add: selected popup directory type

src/components/CustomPopup.vue

@@ -0,0 +1,93 @@
+<script setup>
+    const props = defineProps({
+        options: {
+            type: Array,
+            required: true
+        },
+        value: {
+            type: Object,
+            required: true
+        },
+        style: {
+            type: Object,
+            required: false
+        },
+        selectedColor: {
+            type: String,
+            required: false
+        }
+    })
+
+
+    defineEmits(['change-value', 'close-popup'])
+</script>
+
+<template>
+        <div 
+            class="background-popup"
+            @click="$emit('close-popup')"
+        >
+        </div>
+        <div 
+            class="content-popup"
+            :style="style"
+        >
+            <div 
+                v-for="option in options"
+                class="box-btn" 
+                :style="{
+                    backgroundColor: (value.value === option.value) ? (selectedColor) ? selectedColor : 'primary' : ''
+                }"
+                @click="$emit('change-value', option)"
+            >{{ option.label }}</div>
+        </div>
+</template>
+
+
+<style scoped>
+    .background-popup {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #c6b9b9;
+        opacity: 0.2;
+    }
+
+    .content-popup {
+        position: fixed;
+        right: 180px;
+        top: 180px;
+        z-index: 2000;
+        width: 200px;
+        background-color: #FFF;
+        opacity: 1;
+        border-radius: 13px;
+        padding: 20px 32px;
+        display: flex;
+        flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .box-btn {
+        padding: 8px 16px;
+        margin-bottom: 8px;
+        background-color: rgb(234, 241, 241);
+        border-radius: 5px;
+        font-size: 0.8rem;
+        font-weight: 700;
+    }
+
+    @media (max-width: 568px) {
+        .content-popup {
+            top: 200px;
+            right: 20px;
+        }
+    }
+</style>