From 88b20650c46a3c2771efef21b384778b8cbe1922 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 26 Dec 2024 20:50:50 +0330
Subject: [PATCH] new changes

---
 .../components/global/product/Accordion.vue   | 132 ++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 frontend/components/global/product/Accordion.vue

diff --git a/frontend/components/global/product/Accordion.vue b/frontend/components/global/product/Accordion.vue
new file mode 100644
index 0000000..3736ce4
--- /dev/null
+++ b/frontend/components/global/product/Accordion.vue
@@ -0,0 +1,132 @@
+<template>
+    <div class="w-full flex flex-col">
+        <AccordionRoot
+            class="w-full last:border-b last:border-slate-200"
+            default-value="item-1"
+            type="single"
+            :collapsible="true"
+        >
+            <AccordionItem value="item-1" class="overflow-hidden">
+                <AccordionHeader
+                    class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
+                >
+                    <span class="typo-sub-h-md text-black">مشخصات</span>
+                    <AccordionTrigger class="group">
+                        <Icon
+                            name="ci:plus"
+                            size="24"
+                            class="group-data-[state=open]:rotate-45 transition-transform"
+                        />
+                    </AccordionTrigger>
+                </AccordionHeader>
+                <AccordionContent
+                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
+                >
+                    <div
+                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
+                    >
+                        <div
+                            v-for="i in 4"
+                            class="flex flex-col gap-y-[1.5rem]"
+                        >
+                            <span
+                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
+                                >صفحه نمایش</span
+                            >
+                            <ul class="list-disc w-full ps-5">
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2" class="overflow-hidden">
+                <AccordionHeader
+                    class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
+                >
+                    <span class="typo-sub-h-md text-black">مشخصات</span>
+                    <AccordionTrigger class="group">
+                        <Icon
+                            name="ci:plus"
+                            size="24"
+                            class="group-data-[state=open]:rotate-45 transition-transform"
+                        />
+                    </AccordionTrigger>
+                </AccordionHeader>
+                <AccordionContent
+                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
+                >
+                    <div
+                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
+                    >
+                        <div
+                            v-for="i in 4"
+                            class="flex flex-col gap-y-[1.5rem]"
+                        >
+                            <span
+                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
+                                >صفحه نمایش</span
+                            >
+                            <ul class="list-disc w-full ps-5">
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3" class="overflow-hidden">
+                <AccordionHeader
+                    class="border-t border-slate-200 py-[1.5rem] flex justify-between items-center"
+                >
+                    <span class="typo-sub-h-md text-black">مشخصات</span>
+                    <AccordionTrigger class="group">
+                        <Icon
+                            name="ci:plus"
+                            size="24"
+                            class="group-data-[state=open]:rotate-45 transition-transform"
+                        />
+                    </AccordionTrigger>
+                </AccordionHeader>
+                <AccordionContent
+                    class="data-[state=open]:animate-slide-down pb-[1.5rem] data-[state=closed]:animate-slide-up overflow-hidden"
+                >
+                    <div
+                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[1rem]"
+                    >
+                        <div
+                            v-for="i in 4"
+                            class="flex flex-col gap-y-[1.5rem]"
+                        >
+                            <span
+                                class="typo-sub-h-lg text-black w-full pt-[1.5rem]"
+                                >صفحه نمایش</span
+                            >
+                            <ul class="list-disc w-full ps-5">
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                                <li class="text-slate-500 typo-p-md">
+                                    روشنایی :‌3000mn
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </AccordionContent>
+            </AccordionItem>
+        </AccordionRoot>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>