update App.css and src/components/Testt/index.js

src/components/Testt/App.css

@@ -1,4 +1,4 @@
-.App {
+/* .App {
   text-align: center;
 }
 
@@ -57,4 +57,4 @@
   display: block;
   width: 100%;
   height: auto;
-}
+} */

src/components/Testt/index.js

@@ -2,36 +2,13 @@ import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import "./App.css";
 
-const finalSpaceCharacters = [
-  {
-    id: "gary",
-    name: "Gary Goodspeed",
-    thumb: "/images/gary.png",
-  },
-  {
-    id: "cato",
-    name: "Little Cato",
-    thumb: "/images/cato.png",
-  },
-  {
-    id: "kvn",
-    name: "KVN",
-    thumb: "/images/kvn.png",
-  },
-  {
-    id: "mooncake",
-    name: "Mooncake",
-    thumb: "/images/mooncake.png",
-  },
-  {
-    id: "quinn",
-    name: "Quinn Ergon",
-    thumb: "/images/quinn.png",
-  },
-];
+import CircleInCircle from "../MiniComponents/CircleInCircle";
+import Button from "../ButtonDesign/Button";
 
-function Testt() {
-  const [characters, updateCharacters] = useState(finalSpaceCharacters);
+function Testt({ items, vod }) {
+  //   const [characters, updateCharacters] = useState(finalSpaceCharacters);
+  const [characters, updateCharacters] = useState(items);
+  const [activeAccordion, setActiveAccordion] = useState(null);
 
   function handleOnDragEnd(result) {
     if (!result.destination) return;
@@ -50,31 +27,123 @@ function Testt() {
         <DragDropContext onDragEnd={handleOnDragEnd}>
           <Droppable droppableId="characters">
             {(provided) => (
-              <ul
-                className="characters"
+              <section
+                className="w-full flex flex-col bg-gray-200"
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >
-                {characters.map(({ id, name, thumb }, index) => {
-                  return (
-                    <Draggable key={id} draggableId={id} index={index}>
+                {items.map((item, index) => (
+                  <Draggable index={index}>
                     {(provided) => (
-                        <li
+                      <div
+                        className="flex flex-col"
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                       >
-                          <div className="characters-thumb">
-                            <img src={thumb} alt={`${name} Thumb`} />
+                        {/* parent */}
+                        <div
+                          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-secondary w-0 h- "}
+                            childClassName={false}
+                          />
+                          <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
+                          {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=""
+                            className="w-3 ml-2"
+                          />
+                        </div>
+                        {/* child */}
+                        {activeAccordion === item &&
+                          item.subItems.map((subItem, i) => (
+                            <div
+                              key={i}
+                              className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder 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>
-                          <p>{name}</p>
-                        </li>
+                              <div className="w-0.5 h-5 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">
+                                {vod ? (
+                                  <>
+                                    <div className="flex flex-row items-center ml-7">
+                                      <p className="text-xs">
+                                        دقیقه:
+                                        <span>{item.min}</span>
+                                      </p>
+                                      <Button
+                                        className="px-2 py-1 text-primary text-sm border border-surfaceBorder 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"
+                                    />
+                                  </>
                                 )}
-                    </Draggable>
-                  );
-                })}
+                              </div>
+                            </div>
+                          ))}
                         {provided.placeholder}
-              </ul>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+              </section>
             )}
           </Droppable>
         </DragDropContext>
@@ -90,3 +159,65 @@ function Testt() {
 }
 
 export default Testt;
+
+Testt.defaultProps = {
+  vod: false,
+
+  items: [
+    {
+      id: "gary",
+      title:
+        "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "kevin",
+      title:
+        "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+      video: 4,
+      min: 30,
+
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+    {
+      id: "rafiqaneh",
+      title:
+        "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+      video: 4,
+      min: 30,
+      subItems: [
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+        },
+        {
+          name: "شرکت های بزرگ خیلی خوب هستند",
+        },
+        {
+          name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ",
+        },
+      ],
+    },
+  ],
+};