feat: header, footer

USNightOwl · Jun 19, 2024 · c895cbd · c895cbd
1 parent 79f533f
commit c895cbd
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Thi thử, làm trắc nghiệm online 100% miễn phí</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "primeicons": "^7.0.0",
     "vue": "^3.4.21",
     "vue-router": "4"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+  import 'primeicons/primeicons.css'
+
 </script>
 
 <template>

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
@@ -0,0 +1,7 @@
+<template lang="">
+  <i :class="'pi '+props.icon+' '+props.className"></i>
+</template>
+
+<script setup>
+  const props = defineProps(['icon', 'className']);
+</script>
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
@@ -0,0 +1,5 @@
+<template lang="">
+  <router-link :to="{ name: 'home' }" class="text-2xl font-bold text-[#67c23a]">
+    Baitaptracnghiem
+  </router-link> 
+</template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -0,0 +1,22 @@
+<template lang="">
+  <div class="text-xs hidden md:flex uppercase font-semibold justify-between items-center flex-1">
+    <div class="flex gap-5">
+      <div>Đề thi THPT</div>
+      <div>Lớp 12</div>
+      <div>Lớp 11</div>
+      <div>Lớp 10</div>
+      <div>Tiếng anh</div>
+      <div>Đại học</div>
+      <div>Trắc nghiệm tính cách MBTI</div>
+    </div>
+    <Searchbar/>
+  </div>
+  <div class="flex md:hidden justify-end flex-1">
+    <Icon icon="pi-bars" className="text-xl"/>
+  </div>
+</template>
+
+<script setup>
+  import Searchbar from "@/components/Searchbar.vue";
+  import Icon from "@/components/Icon.vue";
+</script>
diff --git a/src/components/Searchbar.vue b/src/components/Searchbar.vue
@@ -0,0 +1,9 @@
+<template lang="">
+  <button class="text-gray-400 flex items-center gap-1 outline-none text-[0.6rem]">
+    <Icon icon="pi-search" />
+    <span class="uppercase">tìm kiếm</span>
+  </button>
+</template>
+<script setup>
+  import Icon from "@/components/Icon.vue";
+</script>
diff --git a/src/layout/DefaultLayout.vue b/src/layout/DefaultLayout.vue
@@ -0,0 +1,14 @@
+<template lang="">
+  <div>
+    <Header/>
+    <div class="pt-12 min-h-screen">
+      <router-view/>
+    </div>
+    <Footer/>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Header from "@/layout/Header.vue";
+  import Footer from "@/layout/Footer.vue";
+</script>
diff --git a/src/layout/Footer.vue b/src/layout/Footer.vue
@@ -0,0 +1,8 @@
+<template lang="">
+  <div class="h-16 bg-slate-100 flex items-center justify-center">
+    Footer
+  </div>
+</template>
+<script setup>
+
+</script>
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
@@ -0,0 +1,12 @@
+<script setup>
+  import Logo from "@/components/Logo.vue";
+  import Navbar from "@/components/Navbar.vue";
+</script>
+
+<template lang="">
+  <div class="fixed w-full top-0 left-0 bg-white px-2 md:px-5 h-12 flex items-center shadow-md gap-4">
+    <Logo />
+    <Navbar />
+  </div>
+</template>
+
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,17 +1,26 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import NotFoundPage from "@/views/NoutFoundPage.vue";
-import HomePage from "@/views/HomePage.vue";
 
 const routes = [
   {
     path:"/",
-    name: "home",
-    component: HomePage,
+    component: () => import('@/layout/DefaultLayout.vue'),
+    children: [
+      {
+        path: "",
+        name: "home",
+        component: () => import("@/views/HomePage.vue"),
+      },
+      {
+        path: "/danh-sach-bai-tap/:classId",
+        name: "course",
+        component: () => import("@/views/ExercisePage.vue"),
+      },
+    ]
   },
   {
     path:"/:pathMatch(.*)*",
     name: "notfound",
-    component: NotFoundPage,
+    component: () => import("@/views/NoutFoundPage.vue"),
   }
 ]
 

diff --git a/src/views/ExercisePage.vue b/src/views/ExercisePage.vue
@@ -0,0 +1,8 @@
+<template lang="">
+  <div>
+    Exercise
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -1,8 +1,8 @@
 <template lang="">
+
   <div>
     Home page
   </div>
 </template>
 <script setup lang="ts">
-
 </script>
diff --git a/yarn.lock b/yarn.lock
@@ -1581,6 +1581,11 @@ postcss@^8.4.23, postcss@^8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+primeicons@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-7.0.0.tgz#6b25c3fdcb29bb745a3035bdc1ed5902f4a419cf"
+  integrity sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==
+
 punycode@^2.1.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"