update App.js, src/components/Accordion/index.js, src/components/Questions/index.js and src/components/Settingss/index.js

master
mahdi 2 years ago
parent d2277aa08d
commit 51c6a43627
  1. 2
      src/App.js
  2. 203
      src/components/Accordion/index.js
  3. 2
      src/components/Questions/index.js
  4. 2
      src/components/Settingss/index.js
  5. 60
      src/components/Testt/App.css
  6. 249
      src/components/Testt/index.js
  7. 203
      src/components/Testt/mahdi.js

@ -1,10 +1,12 @@
import "./App.scss"; import "./App.scss";
import Card from "./components/Card"; import Card from "./components/Card";
import Testt from "./components/Testt";
function App() { function App() {
return ( return (
<> <>
<Card /> <Card />
<Testt />
</> </>
); );
} }

@ -1,110 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const finalSpaceCharacters = [ function Accordion({ 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 }) {
const [characters, updateCharacters] = useState(finalSpaceCharacters); const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) { function handleOnDragEnd(result) {
@ -172,5 +69,101 @@ function Accordion({ vod }) {
export default Accordion; export default Accordion;
Accordion.defaultProps = { 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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
}; };

@ -3,6 +3,8 @@ import Accordion from "../Accordion";
import CustomSelectBox from "../CustomSelectBox"; import CustomSelectBox from "../CustomSelectBox";
const Questions = () => { const Questions = () => {
// const [selectedQuestion, setSelectedQuestion] = useState(null);
return ( return (
<div className=" w-full"> <div className=" w-full">
<CustomSelectBox <CustomSelectBox

@ -7,7 +7,7 @@ import CircleInCircle from "../CircleInCircle";
import RadioButton from "../RadioButton"; import RadioButton from "../RadioButton";
const Settingss = ({ status }) => { const Settingss = ({ status }) => {
const { register, getValues } = useForm(); const { register } = useForm();
return ( return (
<div className="w-full flex flex-row items-start justify-between mx-auto divide-x-2 divide-[#E3E3E3] divide-x-reverse"> <div className="w-full flex flex-row items-start justify-between mx-auto divide-x-2 divide-[#E3E3E3] divide-x-reverse">

@ -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;
}

@ -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 (
<section>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<section
className="characters w-full flex flex-col bg-gray-200"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<div
className="flex flex-col"
ref={provided.innerRef}
{...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-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
>
<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=""
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>
)}
</Draggable>
))}
{provided.placeholder}
</section>
)}
</Droppable>
</DragDropContext>
</section>
);
}
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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
};

@ -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 (
<section>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<section
className="characters w-full flex flex-col bg-gray-200"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
>
{characters.map(
({ id, title, video, min, item, subItems, name }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<div
className="flex flex-col"
ref={provided.innerRef}
{...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-surfaceBorder "
: "border-secondary"
} 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={
activeAccordion === item
? `images/accordion-.svg`
: `images/accordion+.svg`
}
alt=""
class="w-3 ml-2"
/>
</div>
{provided.placeholder}
</div>
)}
</Draggable>
);
}
)}
{provided.placeholder}
</section>
)}
</Droppable>
</DragDropContext>
</section>
);
}
export default Testt;
Loading…
Cancel
Save