feat: add vue-toastify

package.json

@@ -19,7 +19,8 @@
     "vue": "^3.4.21",
     "vue-awesome-paginate": "^1.1.46",
     "vue-router": "4",
-    "vue3-lazyload": "^0.3.8"
+    "vue3-lazyload": "^0.3.8",
+    "vue3-toastify": "^0.2.1"
   },
   "devDependencies": {
     "@types/node": "^20.14.5",

src/components/DoExercise/Title.vue

@@ -1,5 +1,5 @@
 <template lang="">
-  <div class="mb-5 md:mt-4 mt-2 flex md:gap-2 gap-4 items-center pl-1">
+  <div class="mb-5 md:mt-4 mt-2 flex md:gap-2 gap-4 items-center md:pl-2 pl-1">
     <h1 class="text-2xl font-bold text-center flex-1">
       {{ props.name }}
     </h1>

src/components/ListCard.vue

@@ -3,7 +3,7 @@
     <router-link :to="props.url+'?page=1'" class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">
       <h1 class="mb-5 text-3xl font-bold hover:text-[#67c23a] text-center md:text-left">{{ title }}</h1>
     </router-link>
-    <div class="grid md:grid-cols-3 gap-x-8 md:gap-y-10 gap-y-5 grid-cols-1 mb-10">
+    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-8 md:gap-y-10 gap-y-5 grid-cols-1 mb-10">
       <Card 
         v-for="exam in props.exams" 
         :key="exam.slug"

src/main.ts

@@ -6,13 +6,16 @@ import VueLazyLoad from 'vue3-lazyload'
 import loading from "@/assets/avatarDefault.webp";
 
 import VueAwesomePaginate from "vue-awesome-paginate";
+import Vue3Toastify from 'vue3-toastify';
 
 import "vue-awesome-paginate/dist/style.css";
+import 'vue3-toastify/dist/index.css';
 import './style.css'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(Vue3Toastify);
 app.use(VueAwesomePaginate)
 app.use(router)
 app.use(VueLazyLoad, {

src/views/DoExercisePage.vue

@@ -33,6 +33,7 @@
   import { watch, reactive } from "vue";
   import { RepositoryFactory } from "@/api/RepositoryFactory";
   import { useLoadingStore } from "@/store/loading";
+  import { toast } from 'vue3-toastify';
   import Title from "@/components/DoExercise/Title.vue";
   import Question from "@/components/DoExercise/Question.vue";
   import Icon from "@/components/Icon.vue";
@@ -50,6 +51,12 @@
     loadingStore.changeLoadingState(false);
 
     examData.value = data;
+
+    toast.warning("Bạn hãy kéo xuống kiểm tra đề một lượt trước khi làm bài nhé. Chúc bạn đạt kết quả tốt!", {
+      toastStyle: {
+        fontSize: '14px',
+      },
+    });
   }, { immediate: true });
 
   function submitExam() {

tsconfig.json

@@ -21,7 +21,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "types": [
+      "vue3-toastify/global"
+    ]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

yarn.lock

@@ -1997,11 +1997,6 @@ vue-demi@^0.12.5:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"
   integrity sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==
 
-vue-mathjax-next@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/vue-mathjax-next/-/vue-mathjax-next-0.0.6.tgz#6f0d7b2bc30edd363bd94ab60ad42a5c2ccb6ade"
-  integrity sha512-H4nZ8t31TmBJgiR6pHrOGz+RWhlw34d0yhD8fi8CnXoGOydGFreNH/Crd/9Jfd2IMSu/I0AC3ymT9D09JRMIrw==
-
 vue-router@4:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.3.tgz#7505509d429a36694b12ba1f6530016c5ce5f6bf"
@@ -2033,6 +2028,11 @@ vue3-lazyload@^0.3.8:
   dependencies:
     vue-demi "^0.12.5"
 
+vue3-toastify@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/vue3-toastify/-/vue3-toastify-0.2.1.tgz#d3999c9f29add53416b0bc23f3ede81cf724b654"
+  integrity sha512-u4i5LCu1q5qs4L4Kbjb4u8NipCS8ox1fCHQ6XFS62676xnA6Q/AJRpZEkAurTMp723LeH6eQX6k9+24bKf1T4Q==
+
 vue@^3.2.25, vue@^3.4.21:
   version "3.4.29"
   resolved "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz"