first commit

src/ui/components/global/Accordion.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import {useState} from "react";
+import ChevronLeftSvg from "../icons/ChevronLeftSvg";
+import Image from "next/image";
+import { default_info } from "@/constants";
+
+interface AccordionProps {
+  title: string;
+  description: string;
+  thumbnail: string;
+  services: string;
+  notes?: string;
+  price: string;
+  defaultOpen?: number;
+  index: number;
+}
+
+export default function Accordion({
+  title,
+  index,
+  description,
+  services,
+  notes = "",
+  thumbnail,
+  price,
+  defaultOpen,
+}: AccordionProps) {
+  const [openIndex, setOpenIndex] = useState<number | null>(
+    defaultOpen ?? null
+  );
+
+  const toggle = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <div className="w-full  space-y-4 overflow-hidden">
+      <div key={index} className="p-4 bg-secondary rounded-2xl ">
+        <button
+          className="flex w-full items-center justify-between text-right h-full cursor-pointer"
+          onClick={() => toggle(index)}
+        >
+          <span className="text-lg font-semibold text-white">{title}</span>
+          <span
+            className={` text-white transition-all duration-300  ${
+              openIndex === index ? "rotate-90" : "-rotate-90"
+            }`}
+          >
+            <ChevronLeftSvg size="20" />
+          </span>
+        </button>
+
+        <div>
+          {openIndex === index && (
+            <div className="bg-white p-10 mt-10 space-y-10">
+              {thumbnail && (
+                <div className="h-[600px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
+                  <Image
+                    src={`/packages/${thumbnail}`}
+                    fill
+                    className="object-contain"
+                    alt=""
+                  />
+                </div>
+              )}
+              {description && (
+                <div
+                  className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base"
+                  dangerouslySetInnerHTML={{__html: description}}
+                />
+              )}
+              {services && (
+                <>
+                  <h4 className="font-bold text-lg">
+                    خدمات قابل ارائه به بيمار شامل:
+                  </h4>
+                  <div
+                    className="overflow-hidden text-gray-600  leading-relaxed text-base packages_subpackages_list"
+                    dangerouslySetInnerHTML={{__html: services}}
+                  />
+                </>
+              )}
+              {price && (
+                <>
+                  <h4 className="font-bold text-lg">قیمت پکیج ها:</h4>
+                  <div
+                    className="overflow-hidden text-gray-600  leading-relaxed text-base packages_subpackages_list"
+                    dangerouslySetInnerHTML={{__html: price}}
+                  />
+                </>
+              )}
+              {notes && (
+                <>
+                  <h4 className="font-bold text-lg">نکات مهم :</h4>
+                  <div
+                    className="overflow-hidden text-gray-600  leading-relaxed text-base "
+                    dangerouslySetInnerHTML={{__html: notes}}
+                  />
+                </>
+              )}
+              <>
+                <h4 className="font-bold text-lg">
+                  رزرو نوبت و مشاوره رايگان با پزشك و كارشناس IPD :
+                </h4>
+                <div className="overflow-hidden text-gray-600  leading-relaxed text-base ">
+                  <div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div>
+                  <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}></a></div>
+                </div>
+              </>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}