update src/components/Accordion/AccordionDesign1/index.js and src/components/Testt/index.js

src/components/Accordion/AccordionDesign1/index.js

@@ -85,59 +85,6 @@ const AccordionDesign1 = ({ items, vod }) => {
                         class="w-3 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-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>
-                          <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"
-                                />
-                              </>
-                            )}
-                          </div>
-                        </div>
-                      ))}
                     {provided.placeholder}
                   </div>
                 )}

src/components/Testt/index.js

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import "./App.css";
+import CircleInCircle from "../MiniComponents/CircleInCircle";
+import Button from "../ButtonDesign/Button";
 
 const finalSpaceCharacters = [
   {
@@ -111,7 +113,7 @@ const finalSpaceCharacters = [
   },
 ];
 
-function Testt() {
+function Testt({ vod }) {
   const [activeAccordion, setActiveAccordion] = useState(null);
   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 
@@ -141,17 +143,45 @@ function Testt() {
                   return (
                     <Draggable key={id} draggableId={id} index={index}>
                       {(provided) => (
-                        <li
+                        <>
+                          {/* ! mineeeeeeeeeeeeee */}
+                          <div
+                            className="flex flex-col"
                             ref={provided.innerRef}
                             {...provided.draggableProps}
                             {...provided.dragHandleProps}
                           >
-                          <div className="characters-thumb">
+                            {/* parent */}
-                            <img src={thumb} alt={`${name} Thumb`} />
+                            <div
+                              className={`flex flex-row items-center justify-between px-3 py-4 border-b-2  cursor-pointer`}
+                            >
+                              <CircleInCircle
+                                parentClassName={"bg-secondary w-0 h- "}
+                                childClassName={false}
+                              />
+                              <h2 className="flex-1 mr-5 text-sm">{title}</h2>
+                              {vod && (
+                                <div className="flex flex-row items-center ml-5 ">
+                                  <p className="text-xs">
+                                    دقیقه:
+                                    <span>{min}</span>
+                                  </p>
+                                  <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
+                                  <p className="text-xs">
+                                    ویدیو:
+                                    <span>{video}</span>
+                                  </p>
+                                </div>
+                              )}
+                              <img
+                                src={"images/accordion-.svg"}
+                                alt=""
+                                class="w-3 ml-2"
+                              />
+                            </div>
+                            {provided.placeholder}
                           </div>
-                          <p>{title}</p>
+                        </>
-                          <span className="p-10 bg-red-600">{test}</span>
-                        </li>
                       )}
                     </Draggable>
                   );