WIP: create feature checkboxes layout

src/components/icons/IconChecked.vue

@@ -0,0 +1,34 @@
+<template>
+    <div
+        class="relative two-imgs-container  w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
+        <img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
+        <img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
+    </div>
+    
+</template>
+
+<script>
+import { defineComponent, computed, ref, } from 'vue';
+import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
+import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
+import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
+
+export default defineComponent({
+    props: {
+        isChecked: {
+        type: Boolean,
+        required: true // 表示这个 props 是必需的
+        },
+    },
+    setup(props) {
+        const isChecked = computed(() => props.isChecked);
+        return {
+            ImgCheckboxBlueFrame,
+            ImgCheckboxCheckedMark,
+            ImgCheckboxGrayFrame,
+            isChecked,
+        };
+    },
+});
+</script>