diff --git a/src/App.js b/src/App.js index 76d3ff5..bbe98c7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ import "./App.scss"; import Card from "./components/Card"; +import Testt from "./components/Testt"; function App() { return ( <> + ); } diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js index 02cc40d..6e70f5c 100644 --- a/src/components/Accordion/index.js +++ b/src/components/Accordion/index.js @@ -1,110 +1,7 @@ import React, { useState } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; -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 Accordion({ vod }) { +function Accordion({ finalSpaceCharacters }) { const [characters, updateCharacters] = useState(finalSpaceCharacters); function handleOnDragEnd(result) { @@ -172,5 +69,101 @@ function Accordion({ vod }) { export default Accordion; Accordion.defaultProps = { - vod: true, + 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/Questions/index.js b/src/components/Questions/index.js index 2206e02..2c9b176 100644 --- a/src/components/Questions/index.js +++ b/src/components/Questions/index.js @@ -3,6 +3,8 @@ import Accordion from "../Accordion"; import CustomSelectBox from "../CustomSelectBox"; const Questions = () => { + // const [selectedQuestion, setSelectedQuestion] = useState(null); + return (
{ - const { register, getValues } = useForm(); + const { register } = useForm(); return (
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 && ( + line + )} + + {i + 1} + +
+
+

{subItem.name}

+
+ {vod ? ( + <> +
+

+ دقیقه: + {item.min} +

+
+ + ) : ( + <> + delete-button + edit-button + + )} +
+
+ ))} + {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;