diff --git a/src/components/Testt/App.css b/src/components/Testt/App.css
new file mode 100644
index 0000000..49adc02
--- /dev/null
+++ b/src/components/Testt/App.css
@@ -0,0 +1,60 @@
+.App {
+ text-align: center;
+}
+
+.App-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 1.5vmin);
+}
+
+.App-link {
+ color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.characters {
+ list-style: none;
+ padding-left: 0;
+}
+
+.characters li {
+ display: flex;
+ align-items: center;
+ border: solid 2px #d0d0d0;
+ border-radius: 0.2em;
+ padding: 0.5em 0.8em 0.5em 0.5em;
+ margin-bottom: 1em;
+}
+
+.characters p {
+ max-width: none;
+ font-weight: bold;
+ margin: 0;
+}
+
+.characters-thumb {
+ overflow: hidden;
+ flex-shrink: 0;
+ width: 2em;
+ height: 2em;
+ background-color: #e8e8e8;
+ padding: 0.5em;
+ margin-right: 0.5em;
+}
+
+.characters-thumb img {
+ display: block;
+ width: 100%;
+ height: auto;
+}
diff --git a/src/components/Testt/index.js b/src/components/Testt/index.js
new file mode 100644
index 0000000..87e4282
--- /dev/null
+++ b/src/components/Testt/index.js
@@ -0,0 +1,249 @@
+import React, { useState } from "react";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import "./App.css";
+import CircleInCircle from "../CircleInCircle";
+import Button from "../Button";
+
+function Testt({ vod, finalSpaceCharacters }) {
+ const [activeAccordion, setActiveAccordion] = useState(null);
+ const [characters, updateCharacters] = useState(finalSpaceCharacters);
+
+ function handleOnDragEnd(result) {
+ if (!result.destination) return;
+
+ const items = Array.from(characters);
+ const [reorderedItem] = items.splice(result.source.index, 1);
+ items.splice(result.destination.index, 0, reorderedItem);
+
+ updateCharacters(items);
+ }
+
+ return (
+
+
+
+ {(provided) => (
+
+ {characters.map((item, index) => (
+
+ {(provided) => (
+
+ {/* parent */}
+
+ setActiveAccordion(
+ activeAccordion === item ? null : item
+ )
+ }
+ className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+ activeAccordion === item
+ ? "border-surfaceBorder "
+ : "border-secondary"
+ } cursor-pointer`}
+ >
+
+
{item.title}
+ {vod && (
+
+
+ دقیقه:
+ {item.min}
+
+
+
+ ویدیو:
+ {item.video}
+
+
+ )}
+
+
+ {/* child */}
+ {activeAccordion === item &&
+ item.subItems.map((subItem, i) => (
+
+
+ {vod === !true && (
+
+ )}
+
+ {i + 1}
+
+
+
+
{subItem.name}
+
+ {vod ? (
+ <>
+
+
+ دقیقه:
+ {item.min}
+
+
+
+ >
+ ) : (
+ <>
+
+
+ >
+ )}
+
+
+ ))}
+ {provided.placeholder}
+
+ )}
+
+ ))}
+ {provided.placeholder}
+
+ )}
+
+
+
+ );
+}
+
+export default Testt;
+
+Testt.defaultProps = {
+ finalSpaceCharacters: [
+ {
+ id: "1",
+ title:
+ "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+ video: 4,
+ min: 30,
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ {
+ id: "2",
+ title:
+ "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+ video: 4,
+ min: 30,
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ {
+ id: "3",
+ name: "KVN",
+ thumb: "/images/kvn.png",
+ title:
+ "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
+ video: 4,
+ min: 30,
+
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ {
+ id: "4",
+ name: "Mooncake",
+ thumb: "/images/kvn.png",
+ title:
+ "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
+ video: 4,
+ min: 30,
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ {
+ id: "5",
+ title:
+ "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+ video: 4,
+ min: 30,
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/components/Testt/mahdi.js b/src/components/Testt/mahdi.js
new file mode 100644
index 0000000..46e91e3
--- /dev/null
+++ b/src/components/Testt/mahdi.js
@@ -0,0 +1,203 @@
+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 = [
+ {
+ id: "gary",
+ test: "mahdi",
+ title:
+ "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+ video: 4,
+ min: 30,
+ subItems: [
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
+ },
+ {
+ name: "شرکت های بزرگ خیلی خوب هستند",
+ },
+ {
+ name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
+ },
+ ],
+ },
+ {
+ id: "garfdsy",
+ test: "mahdi",
+ title:
+ "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
+ 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 Testt({ vod }) {
+ const [activeAccordion, setActiveAccordion] = useState(null);
+ const [characters, updateCharacters] = useState(finalSpaceCharacters);
+
+ function handleOnDragEnd(result) {
+ if (!result.destination) return;
+
+ const items = Array.from(characters);
+ const [reorderedItem] = items.splice(result.source.index, 1);
+ items.splice(result.destination.index, 0, reorderedItem);
+
+ updateCharacters(items);
+ }
+
+ return (
+
+
+
+ {(provided) => (
+
+ {characters.map(
+ ({ id, title, video, min, item, subItems, name }, index) => {
+ return (
+
+ {(provided) => (
+
+ {/* parent */}
+
+ setActiveAccordion(
+ activeAccordion === item ? null : item
+ )
+ }
+ className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
+ activeAccordion === item
+ ? "border-surfaceBorder "
+ : "border-secondary"
+ } cursor-pointer`}
+ >
+
+
{title}
+ {vod && (
+
+
+ دقیقه:
+ {min}
+
+
+
+ ویدیو:
+ {video}
+
+
+ )}
+
+
+ {provided.placeholder}
+
+ )}
+
+ );
+ }
+ )}
+ {provided.placeholder}
+
+ )}
+
+
+
+ );
+}
+
+export default Testt;