Frontend used Vue.js & Added ESLint

1 files changed, 50 insertions, 0 deletions

diff --git a/src/components/RepositoryHeader.vue b/src/components/RepositoryHeader.vue
new file mode 100644
index 0000000..db1ab1e
--- /dev/null
+++ b/src/components/RepositoryHeader.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="row mx-0">
+		<div id="header" class="col d-flex mt-3 ms-2">
+			<BaseBackButton to="/" />
+			<div class="d-inline ms-3">
+				<span id="title" class="fs-1">{{ title }}</span>
+				<p id="about" class="mb-3 fs-4">
+					{{ about }}
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseBackButton from "./BaseBackButton";
+import { watch, reactive, toRefs } from "vue";
+
+export default {
+	name: "RepositoryHeader",
+	components: {
+		BaseBackButton
+	},
+	props: {
+		repository: {
+			type: String,
+			required: true
+		}
+	},
+	setup(props)
+	{
+		const state = reactive({ title: String, about: String });
+
+		watch(() =>
+		{
+			fetch(`http://localhost:1337/api/v1/repos/${props.repository}`)
+				.then((res) => res.json())
+				.then((data) =>
+				{
+					state.title = data["data"]["name"];
+					state.about = data["data"]["description"];
+				});
+		});
+
+		return {
+			... toRefs(state)
+		};
+	}
+}
+</script>
\ No newline at end of file