update 2 files and delete 3 files

master
mahdi 2 years ago
parent fe04b3e2d9
commit 89ca628076
  1. 2
      src/App.js
  2. 16
      src/components/Modal/index.js
  3. 60
      src/components/Testt/App.css
  4. 249
      src/components/Testt/index.js
  5. 203
      src/components/Testt/mahdi.js

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

@ -5,10 +5,6 @@ import Tabbar from "../Tabbar";
const Modal = ({ activeTab, children }) => {
const [openModal, setOpenModal] = useState(false);
// <Modal>
// <div
// </Modal>
return (
<div>
<Button
@ -19,13 +15,13 @@ const Modal = ({ activeTab, children }) => {
text={"ویرایش"}
onClick={() => setOpenModal(true)}
/>
{children}
{" "}
<div
className={`cursor-pointer w-screen h-screen flex items-center justify-center bg-black fixed left-0 top-0 duration-300 transition-all
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}
`}
className={`w-screen h-screen flex items-center justify-center bg-gray-600 bg-opacity-60 backdrop-filter backdrop-blur-sm fixed left-0 top-0 duration-300 transition-all ${
openModal ? "flex" : "hidden pointer-events-none"
}`}
>
<div className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm ">
<div className="w-1/2 flex flex-col bg-white border border-gray-400 rounded-sm z-100">
<div
className="p-3 flex flex-col"
onClick={(e) => e.stopPropagation()}
@ -37,7 +33,7 @@ const Modal = ({ activeTab, children }) => {
iconHolderClassName={"mr-0"}
onClick={() => setOpenModal(false)}
/>
<Tabbar />
<Tabbar />
</div>
<div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]">
<Button

@ -1,60 +0,0 @@
.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;
}

@ -1,249 +0,0 @@
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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
};

@ -1,203 +0,0 @@
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