update src/components/MiniComponents/CircleInCircle/index.js and data.js

src/components/Accordion/AccordionDesign1/index.js

@@ -0,0 +1,71 @@
+import React from "react";
+import CircleInCircle from "../../MiniComponents/CircleInCircle";
+
+const AccordionDesign1 = ({ items }) => {
+  return (
+    <section className="w-full flex flex-col p-4 bg-gray-300">
+      {/* header */}
+      {items.map((item, index) => (
+        <div className="flex flex-row items-center justify-between bg-red-50 border-b-4 border-secondaryLight">
+          <CircleInCircle
+            parentClassName={"bg-green-500  w-3 h-3 "}
+            childClassName={false}
+          />
+          <h2 className="bg-blue-300 flex-1">{item.title}</h2>{" "}
+        </div>
+      ))}
+    </section>
+  );
+};
+
+export default AccordionDesign1;
+
+AccordionDesign1.defaultProps = {
+  items: [
+    {
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+  ],
+};

src/components/Accordion/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import AccordionDesign1 from "./AccordionDesign1";
+
+function Accordion() {
+  const list = {
+    1: <AccordionDesign1 />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-center">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default Accordion;

src/redux/data.js

@@ -51,6 +51,7 @@ import Avatar from "../components/Avatar";
 import Timeline from "../components/Timeline";
 import ThemeColor from "../components/ThemeColor";
 import ShowCase from "../components/ShowCase";
+import Accordion from "../components/Accordion";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -785,6 +786,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Accordion",
+    author: "Andalib",
+    props: [],
+    content: {
+      name: "Accordion",
+      component: <Accordion />,
+      code: null,
+    },
+  },
   // mini components
   {
     name: "Mini Components",