update src/components/Accordion/AccordionDesign1/index.js and src/components/ButtonDesign/Button/index.js

src/components/Accordion/AccordionDesign1/index.js

@@ -1,26 +1,52 @@
 import React, { useState } from "react";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
+import Button from "../../ButtonDesign/Button";
 
-const AccordionDesign1 = ({ items }) => {
+const AccordionDesign1 = ({ items, vod }) => {
   const [activeAccordion, setActiveAccordion] = useState(null);
 
   return (
-    <section className="w-full flex flex-col ">
+    <section className="w-full flex flex-col bg-gray-200">
       {items.map((item, index) => (
         <div className="flex flex-col" key={index}>
           {/* parent */}
           <div
-            className="flex flex-row items-center justify-between px-3 py-5  border-b-2 border-secondary cursor-pointer"
+            className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+              activeAccordion === item
+                ? "border-surfaceBorder "
+                : "border-secondary"
+            } cursor-pointer`}
             onClick={() =>
               setActiveAccordion(activeAccordion === item ? null : item)
             }
           >
             <CircleInCircle
-              parentClassName={"bg-secondaryDark  w-3 h-3 "}
+              parentClassName={"bg-secondary w-3 h-3 "}
               childClassName={false}
             />
-            <h2 className="flex-1 mr-7 text-sm">{item.title}</h2>
+            <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
-            <img src="images/accordion+.svg" alt="" class="w-3 ml-2" />
+            {vod && (
+              <div className="flex flex-row items-center ml-5 ">
+                <p className="text-xs">
+                  دقیقه:
+                  <span>{item.min}</span>
+                </p>
+                <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                <p className="text-xs">
+                  ویدیو:
+                  <span>{item.video}</span>
+                </p>
+              </div>
+            )}
+            <img
+              src={
+                activeAccordion === item
+                  ? `images/accordion-.svg`
+                  : `images/accordion+.svg`
+              }
+              alt=""
+              class="w-3 ml-2"
+            />
           </div>
           {/* child */}
           {activeAccordion === item &&
@@ -37,16 +63,32 @@ const AccordionDesign1 = ({ items }) => {
                 <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
                 <p className="text-sm flex-1">{subItem.name}</p>
                 <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
-                  <img
+                  {vod ? (
-                    src="images/accordionGroup2724.svg"
+                    <>
-                    className="w-8 rounded"
+                      <p className="text-xs">
-                    alt="delete-button"
+                        دقیقه:
-                  />
+                        <span>{item.min}</span>
-                  <img
+                      </p>
-                    src="images/accordionGroup2723.svg"
+                      <Button
-                    className="w-8 rounded"
+                        className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
-                    alt="edit-button"
+                        text={"پخش"}
-                  />
+                      />
+                    </>
+                  ) : (
+                    <>
+                      {" "}
+                      <img
+                        src="images/accordionGroup2724.svg"
+                        className="w-8 rounded"
+                        alt="delete-button"
+                      />
+                      <img
+                        src="images/accordionGroup2723.svg"
+                        className="w-8 rounded"
+                        alt="edit-button"
+                      />{" "}
+                    </>
+                  )}
                 </div>
               </div>
             ))}
@@ -55,18 +97,16 @@ const AccordionDesign1 = ({ items }) => {
     </section>
   );
 };
-// accordionGroup2723.svg
-// accordionGroup2724.svg
-// accordionGroup2725.svg
-// accordion-.svg
-// accordion+.svg
 export default AccordionDesign1;
 
 AccordionDesign1.defaultProps = {
+  vod: true,
   items: [
     {
       title:
         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
       subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
@@ -81,7 +121,10 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+      video: 4,
+      min: 30,
+
       subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
@@ -96,7 +139,9 @@ AccordionDesign1.defaultProps = {
     },
     {
       title:
-        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+      video: 4,
+      min: 30,
       subItems: [
         {
           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",