Frontend used Vue.js & Added ESLint

1 files changed, 62 insertions, 0 deletions

diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..79ec4ab
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,62 @@
+<template>
+	<HomeHeader />
+	<div class="row mx-0 mt-5">
+		<div id="projects-header" class="col ms-4">
+			<p class="fs-1">
+				Projects
+			</p>
+		</div>
+		<div id="projects-search" class="col d-flex justify-content-end">
+			<form>
+				<input type="search" name="q">
+				<input type="submit" value="Search">
+			</form>
+		</div>
+	</div>
+	<div class="row mx-0">
+		<div class="col ms-4">
+			<ul id="repos">
+				<li v-for="(project, project_name, index) in projects" :key="index">
+					<div v-if="(search !== null && project_name.includes(search)) || search == null">
+						<p class="fs-3">
+							<router-link :to="project_name">
+								{{ project_name }}
+							</router-link>
+						</p>
+						<span class="repo-last-updated fs-5">Last updated about {{ project["last_updated"] }} ago</span>
+						<span class="fs-5">{{ project["description"] }}</span>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import HomeHeader from "../components/HomeHeader";
+import { watch, reactive, toRefs } from "vue";
+
+export default {
+	name: "Home",
+	components: {
+		HomeHeader
+	},
+	setup()
+	{
+		const state = reactive({ projects: Object, search: String });
+
+		watch(() =>
+		{
+			fetch(`http://localhost:1337/api/v1/repos`)
+				.then((res) => res.json())
+				.then((data) => state.projects = data["data"]);
+		});
+
+		state.search = (new URLSearchParams(window.location.search)).get("q");
+
+		return {
+			... toRefs(state)
+		};
+	}
+}
+</script>
\ No newline at end of file