update App.js, src/components/Accordion/index.js and src/components/Card/index.js

src/App.js

@@ -1,4 +1,5 @@
 import "./App.scss";
+import Accordion from "./components/Accordion";
 import Card from "./components/Card";
 
 function App() {

src/components/Accordion/index.js

@@ -11,17 +11,6 @@ const finalSpaceCharacters = [
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
     video: 4,
     min: 30,
-    subItems: [
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-      },
-      {
-        name: "شرکت های بزرگ خیلی خوب هستند",
-      },
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-      },
-    ],
   },
   {
     id: "garfdsy",
@@ -30,84 +19,20 @@ const finalSpaceCharacters = [
       "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
     video: 4,
     min: 30,
-    subItems: [
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-      },
-      {
-        name: "شرکت های بزرگ خیلی خوب هستند",
-      },
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-      },
-    ],
   },
   {
     id: "kvn",
     name: "KVN",
-    thumb: "/images/kvn.png",
     test: "mahdi",
     title:
       "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
     video: 4,
     min: 30,
-
-    subItems: [
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-      },
-      {
-        name: "شرکت های بزرگ خیلی خوب هستند",
-      },
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-      },
-    ],
-  },
-  {
-    id: "mooncake",
-    name: "Mooncake",
-    thumb: "/images/kvn.png",
-    test: "mahdi",
-    title:
-      "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
-    video: 4,
-    min: 30,
-    subItems: [
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-      },
-      {
-        name: "شرکت های بزرگ خیلی خوب هستند",
-      },
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-      },
-    ],
-  },
-  {
-    id: "garfsddsfy",
-    test: "mahdi",
-    title:
-      "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
-    video: 4,
-    min: 30,
-    subItems: [
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
-      },
-      {
-        name: "شرکت های بزرگ خیلی خوب هستند",
-      },
-      {
-        name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
-      },
-    ],
   },
 ];
 
 function Accordion({ vod }) {
-  const [activeAccordion, setActiveAccordion] = useState(null);
+  // const [activeAccordion, setActiveAccordion] = useState(null);
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
   function handleOnDragEnd(result) {
@@ -121,12 +46,12 @@ function Accordion({ vod }) {
   }
 
   return (
-    <section className="w-full">
+    <section className="w-full mt-7">
       <DragDropContext onDragEnd={handleOnDragEnd}>
         <Droppable droppableId="characters">
           {(provided) => (
             <section
-              className="characters w-full flex flex-col bg-surface"
+              className="characters w-full flex flex-col gap-y-4"
               id="container"
               {...provided.droppableProps}
               ref={provided.innerRef}
@@ -140,110 +65,31 @@ function Accordion({ vod }) {
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}
                     >
-                      {/* parent */}
-                      <div
-                        onClick={() =>
-                          setActiveAccordion(
-                            activeAccordion === item ? null : item
-                          )
-                        }
-                        className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
-                          activeAccordion === item
-                            ? "border-primary"
-                            : "border-gray-100"
-                        }  cursor-pointer`}
-                      >
-                        <CircleInCircle
-                          parentClassName={"bg-primary w-4 h-4"}
-                          childClassName={false}
-                        />
-                        <h2 className="flex-1 mr-5 text-sm text-primaryText">
-                          {item.title}
-                        </h2>
-                        {vod && (
-                          <div className="flex flex-row items-center ml-5 ">
-                            <p className="text-xs text-primary">
-                              دقیقه:
-                              <span>{item.min}</span>
-                            </p>
-                            <div className="w-0.5 h-4 mx-2 bg-gray-100"></div>
-                            <p className="text-xs text-primary">
-                              ویدیو:
-                              <span>{item.video}</span>
-                            </p>
-                          </div>
-                        )}
+                      <div className="flex items-center w-full ">
                         <img
-                          src={
-                            activeAccordion === item
-                              ? `images/accordion-.svg`
-                              : `images/accordion+.svg`
-                          }
+                          src="images/blue-hamburger-menu.jpeg"
                           alt=""
-                          class="w-3 ml-2"
+                          class="w-4 ml-2"
                         />
-                      </div>{" "}
-                      {/* child */}
-                      {activeAccordion === item &&
-                        item.subItems.map((subItem, i) => (
-                          <div className="flex flex-row items-center justify-between p-3 border-b-2 border-primary cursor-pointer transition-all duration-500 ease-in-out">
-                            <div className="flex flex-row items-center">
-                              {vod === !true && (
-                                <img
-                                  src="images/accordionGroup2725.svg"
-                                  className="w-3"
-                                  alt="line"
-                                />
-                              )}
-                              <span
-                                className={`text-sm ${
-                                  vod === true ? "mr-0" : "mr-3"
-                                }`}
-                              >
-                                {i + 1}
-                              </span>
-                            </div>
-                            <div className="w-0.5 h-5 mx-3 bg-primary"></div>
-                            <p className="text-xs flex-1 text-primaryText">
-                              {subItem.name}
-                            </p>
-                            <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
-                              {vod ? (
-                                <>
-                                  <div className="flex flex-row items-center ml-7">
-                                    <p className="text-xs primaryText">
-                                      دقیقه:
-                                      <span>{item.min}</span>
-                                    </p>
-                                    <Button
-                                      className="px-2 py-1 text-primary text-sm border border-primary rounded mr-4"
-                                      text={"پخش"}
-                                    />
-                                  </div>
-                                </>
-                              ) : (
-                                <>
-                                  <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 className="w-full flex flex-row items-center justify-between px-3 py-4 bg-blue-200 cursor-pointer">
+                          <h2 className="flex-1 mr-5 text-sm text-pink-400">
+                            {item.title}
+                          </h2>
+                          <div className="bg-blue-800 p-2">
+                            <img
+                              src="images/blue-cancle-icon.png"
+                              alt=""
+                              class="w-3 "
+                            />
                           </div>
-                        ))}
+                        </div>
+                      </div>
+
                       {provided.placeholder}
                     </div>
                   )}
                 </Draggable>
               ))}
-
               {provided.placeholder}
             </section>
           )}

src/components/Card/index.js

@@ -18,7 +18,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
             >
               {process.color && (
                 <CircleInCircle
-                  parentClassName={`${process.color} w-3 h-3`}
+                  parentClassName={`${process.color} w-2.5 h-2.5`}
                   childClassName={false}
                 />
               )}