QUIZ-195: ui for flashcard feature

Author: trungdong11

components.json

@@ -2,16 +2,19 @@
   "$schema": "https://shadcn-vue.com/schema.json",
   "style": "new-york",
   "typescript": true,
-  "tsConfigPath": "./tsconfig.json",
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "tailwind.config.ts",
     "css": "src/assets/index.css",
-    "baseColor": "slate",
-    "cssVariables": true
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
   },
-  "framework": "vite",
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "composables": "@/composables",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "iconLibrary": "lucide"
 }

package-lock.json

@@ -10,7 +10,8 @@
     "build": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "shadcn-vue": "shadcn-vue"
   },
   "dependencies": {
     "@google/generative-ai": "^0.21.0",
@@ -19,11 +20,11 @@
     "@stomp/stompjs": "^7.0.0",
     "@vueup/vue-quill": "^1.2.0",
     "@vueuse/components": "^10.11.0",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^11.3.0",
     "@vueuse/integrations": "^11.0.3",
     "@vueuse/motion": "2.2.6",
     "@vueuse/router": "^11.1.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "driver.js": "^1.3.1",
     "lodash-es": "^4.17.21",
@@ -34,10 +35,12 @@
     "pinia": "^2.1.7",
     "qrcode-vue3": "^1.7.1",
     "radix-vue": "^1.9.5",
+    "reka-ui": "^2.4.1",
     "sanitize-html": "^2.13.1",
+    "shadcn-vue": "^2.2.0",
     "socket.io-client": "^4.8.1",
     "swrv": "^1.0.4",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^10.0.0",
     "vee-validate": "^4.13.2",

package.json

@@ -5,66 +5,86 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 3.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 0 0% 3.9%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 0 0% 3.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 220.9 39.3% 11%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
 
-    --ring: 222.2 84% 4.9%;
+    --ring: 0 0% 3.9%;
 
     --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+
+    --chart-2: 173 58% 39%;
+
+    --chart-3: 197 37% 24%;
+
+    --chart-4: 43 74% 66%;
+
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
 
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 83.1%;
+
+    --chart-1: 220 70% 50%;
+
+    --chart-2: 160 60% 45%;
+
+    --chart-3: 30 80% 55%;
+
+    --chart-4: 280 65% 60%;
 
-    --ring: 212.7 26.8% 83.9%;
+    --chart-5: 340 75% 55%;
   }
 }
 

src/assets/index.css

@@ -28,6 +28,7 @@ onBeforeMount(() => {
     v-bind="{ ...$props, ...$attrs }"
     v-model="value"
     :invalid="errorMessage"
+    class="hover:border-primary border"
   />
   <ErrorMessage
     :error="errorMessage"

src/components/base/TextareaValidation.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+import { Card } from '@/components/ui/card'
+
+const props = defineProps<{
+  number: number
+  term: string
+  description: string
+  image?: string
+  lengthData: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:term', value: string): void
+  (e: 'update:description', value: string): void
+  (e: 'update:image', value: string): void
+  (e: 'remove'): void
+}>()
+
+const refImage = ref<HTMLInputElement>()
+
+const showChooseImage = () => {
+  refImage.value?.click()
+}
+
+const onChangeImage = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  const file = target?.files?.[0]
+  if (file) {
+    const url = URL.createObjectURL(file)
+    emit('update:image', url)
+  }
+}
+
+const removeImage = () => {
+  emit('update:image', '')
+}
+</script>
+
+<template>
+  <Card class="border border-[#edeff4] bg-white rounded-xl">
+    <div class="flex items-center justify-between p-5">
+      <p class="font-bold text-xl text-slate-500">{{ number }}</p>
+      <div
+        v-if="props.lengthData > 1"
+        class="group flex items-center rounded-full hover:border-red-400 justify-center w-8 h-8 border border-[#edeff4] cursor-pointer"
+        @click="emit('remove')"
+      >
+        <span
+          class="i-material-symbols-light-delete-outline cursor-pointer text-xl text-slate-500 group-hover:text-red-500"
+        ></span>
+      </div>
+    </div>
+    <div class="line w-full border border-[#f6f7fb]"></div>
+    <div class="flex items-start justify-between gap-5 px-5 py-8">
+      <!-- term -->
+      <div class="grid w-full gap-1.5">
+        <Textarea
+          :model-value="term"
+          placeholder="Enter your term"
+          @update:model-value="(val) => emit('update:term', String(val))"
+        />
+        <Label class="text-[12px]">TERM</Label>
+      </div>
+
+      <!-- description -->
+      <div class="grid w-full gap-1.5">
+        <Textarea
+          :model-value="description"
+          placeholder="Enter your description"
+          @update:model-value="(val) => emit('update:description', String(val))"
+        />
+        <Label class="text-[12px]">DESCRIPTION</Label>
+      </div>
+
+      <!-- upload -->
+      <div class="flex flex-col items-center">
+        <div
+          v-if="props.image"
+          class="relative w-[100px] h-[100px] border rounded-lg"
+        >
+          <div class="w-[100px] h-[100px] overflow-hidden rounded-lg">
+            <img
+              :src="props.image"
+              class="object-cover w-full h-full"
+            />
+          </div>
+          <button
+            class="absolute -top-2 -right-2 bg-white p-1 border rounded-full w-4 h-4 flex items-center justify-center text-xs shadow"
+            @click="removeImage"
+          >
+            ✕
+          </button>
+        </div>
+        <div
+          v-else
+          class="cursor-pointer group items-center justify-center flex p-3 rounded-lg border-dashed border-[#d9dde8] border-2 w-[100px] h-[100px] hover:border-primary"
+          @click="showChooseImage"
+        >
+          <span
+            class="i-material-symbols-light-add-a-photo-sharp cursor-pointer text-xl text-slate-500 group-hover:text-primary"
+          ></span>
+        </div>
+
+        <input
+          ref="refImage"
+          type="file"
+          accept="image/jpeg, image/png, image/jpg"
+          class="hidden"
+          @change="onChangeImage"
+        />
+      </div>
+    </div>
+  </Card>
+</template>