mahdi
/
sameh
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

update 2 files and delete 3 files

Browse Source
master
mahdi 2 years ago
parent fe04b3e2d9
commit 89ca628076
5 changed files with 6 additions and 524 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
src/App.js
Unescape View File

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

16
src/components/Modal/index.js
Unescape View File

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

60
src/components/Testt/App.css
Unescape View File

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

249
src/components/Testt/index.js
Unescape View File

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

203
src/components/Testt/mahdi.js
Unescape View File

@ -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;
Write Preview
Loading…
Cancel
Save