added filter button

frontend/components/products/FilterButton.vue

@@ -1,52 +1,4 @@
-<script setup lang="ts">
-// state
-
-const filterIsShow = ref(false);
-
-const sort_filter = ref([
-    {
-        title: "جدیدترین ها",
-        value: "",
-    },
-    {
-        title: "گران ترین ها",
-        value: "",
-    },
-    {
-        title: "ارزان ترین ها",
-        value: "",
-    },
-]);
-
-const categories = [
-    {
-        name: "میوه",
-        children: [
-            { name: "سیب" },
-            { name: "موز" },
-            { name: "پرتقال" },
-            { name: "طالبی" },
-            { name: "انگور" },
-            { name: "هندوانه" },
-            { name: "خربزه" },
-            { name: "گلابی" },
-        ],
-    },
-    {
-        name: "سبزیجات",
-        children: [
-            { name: "کلم" },
-            { name: "بروکلی" },
-            { name: "هویج" },
-            { name: "کاهو" },
-            { name: "اسفناج" },
-            { name: "چوی بوک" },
-            { name: "گل کلم" },
-            { name: "سیب زمینی" },
-        ],
-    },
-];
-</script>
+<script setup lang="ts"></script>
 
 <template>
     <SideModal title="فیلتر محصولات">
@@ -54,80 +6,13 @@ const categories = [
             <Button
                 end-icon="ci:filter"
                 variant="secondary"
-                class="rounded-full py-4 !bg-slate-100"
+                class="rounded-full py-4 !bg-slate-100 !cursor-pointer"
             >
                 فیلتر محصولات
             </Button>
         </template>
+        <FilterProducts />
     </SideModal>
-
-    <!-- <DialogRoot modal>
-        <DialogTrigger> </DialogTrigger>
-        <DialogPortal to="#teleports">
-            <DialogOverlay
-                class="bg-black/60 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-30"
-            />
-            <DialogContent
-                dir="rtl"
-                class="data-[state=open]:animate-content-show absolute top-1/2 left-1/2 max-h-[85vh] w-[90vw] max-w-[550px] -translate-x-1/2 -translate-y-1/2 rounded-[6px] bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none z-[100]"
-            >
-                <DialogTitle class="flex items-center">
-                    <div class="w-full flex items-center justify-between">
-                        <div
-                            class="typo-h-6 text-black font-semibold flex-center gap-2"
-                        >
-                            <Icon name="ci:filter" size="24" />
-                            فیلتر محصولات
-                        </div>
-                        <DialogClose
-                            class="text-black cursor-pointer inline-flex appearance-none items-center justify-center rounded-full"
-                            aria-label="Close"
-                        >
-                            <Icon name="ci:close" size="20" />
-                        </DialogClose>
-                    </div>
-                </DialogTitle>
-
-                <div class="w-full py-10 gap-6 flex flex-col">
-                    <div class="flex items-center justify-between w-full gap-3">
-                        <div
-                            class="flex items-center justify-start gap-2 text-lg w-full"
-                        >
-                            <Icon name="ci:filter-list" size="24" />
-                            ترتیب بر اساس
-                        </div>
-                        <div class="w-full flex items-start justify-end gap-2">
-                            <button
-                                v-for="(sort, index) in sort_filter"
-                                :key="index"
-                                class="py-1 px-2.5 cursor-pointer text-nowrap bg-slate-100 rounded-sm text-sm"
-                            >
-                                {{ sort.title }}
-                            </button>
-                        </div>
-                    </div>
-                    <div class="flex flex-col w-full gap-3">
-                        <div
-                            class="flex items-center justify-start gap-2 text-lg w-full"
-                        >
-                            <Icon name="ci:grid" size="24" />
-                            دسته بندی
-                        </div>
-                    </div>
-                </div>
-
-                <div class="flex justify-start">
-                    <DialogClose as-child>
-                        <button
-                            class="bg-green4 text-green11 text-sm hover:bg-green5 focus:shadow-green7 inline-flex h-[35px] items-center justify-center rounded-lg px-[15px] font-semibold leading-none focus:shadow-[0_0_0_2px] focus:outline-none"
-                        >
-                            Save changes
-                        </button>
-                    </DialogClose>
-                </div>
-            </DialogContent>
-        </DialogPortal>
-    </DialogRoot> -->
 </template>
 
 <style lang="scss" scoped></style>