update App.js, src/components/Accordion/index.js and src/components/Card/index.js

master
mahdi 2 years ago
parent 2b89b344e2
commit d057c1d2e7
  1. 1
      src/App.js
  2. 182
      src/components/Accordion/index.js
  3. 2
      src/components/Card/index.js

@ -1,4 +1,5 @@
import "./App.scss"; import "./App.scss";
import Accordion from "./components/Accordion";
import Card from "./components/Card"; import Card from "./components/Card";
function App() { function App() {

@ -11,17 +11,6 @@ const finalSpaceCharacters = [
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4, video: 4,
min: 30, min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
}, },
{ {
id: "garfdsy", id: "garfdsy",
@ -30,84 +19,20 @@ const finalSpaceCharacters = [
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4, video: 4,
min: 30, min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
}, },
{ {
id: "kvn", id: "kvn",
name: "KVN", name: "KVN",
thumb: "/images/kvn.png",
test: "mahdi", test: "mahdi",
title: title:
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4, video: 4,
min: 30, 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({ vod }) {
const [activeAccordion, setActiveAccordion] = useState(null); // const [activeAccordion, setActiveAccordion] = useState(null);
const [characters, updateCharacters] = useState(finalSpaceCharacters); const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) { function handleOnDragEnd(result) {
@ -121,12 +46,12 @@ function Accordion({ vod }) {
} }
return ( return (
<section className="w-full"> <section className="w-full mt-7">
<DragDropContext onDragEnd={handleOnDragEnd}> <DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters"> <Droppable droppableId="characters">
{(provided) => ( {(provided) => (
<section <section
className="characters w-full flex flex-col bg-surface" className="characters w-full flex flex-col gap-y-4"
id="container" id="container"
{...provided.droppableProps} {...provided.droppableProps}
ref={provided.innerRef} ref={provided.innerRef}
@ -140,110 +65,31 @@ function Accordion({ vod }) {
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
{/* parent */} <div className="flex items-center w-full ">
<div <img
onClick={() => src="images/blue-hamburger-menu.jpeg"
setActiveAccordion( alt=""
activeAccordion === item ? null : item class="w-4 ml-2"
)
}
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item
? "border-primary"
: "border-gray-100"
} cursor-pointer`}
>
<CircleInCircle
parentClassName={"bg-primary w-4 h-4"}
childClassName={false}
/> />
<h2 className="flex-1 mr-5 text-sm text-primaryText"> <div className="w-full flex flex-row items-center justify-between px-3 py-4 bg-blue-200 cursor-pointer">
<h2 className="flex-1 mr-5 text-sm text-pink-400">
{item.title} {item.title}
</h2> </h2>
{vod && ( <div className="bg-blue-800 p-2">
<div className="flex flex-row items-center ml-5 ">
<p className="text-xs text-primary">
دقیقه:
<span>{item.min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-gray-100"></div>
<p className="text-xs text-primary">
ویدیو:
<span>{item.video}</span>
</p>
</div>
)}
<img <img
src={ src="images/blue-cancle-icon.png"
activeAccordion === item
? `images/accordion-.svg`
: `images/accordion+.svg`
}
alt="" alt=""
class="w-3 ml-2" class="w-3 "
/>
</div>{" "}
{/* child */}
{activeAccordion === item &&
item.subItems.map((subItem, i) => (
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-primary 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-primary"></div>
<p className="text-xs flex-1 text-primaryText">
{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 primaryText">
دقیقه:
<span>{item.min}</span>
</p>
<Button
className="px-2 py-1 text-primary text-sm border border-primary rounded mr-4"
text={"پخش"}
/> />
</div> </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>
</div> </div>
))}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
</Draggable> </Draggable>
))} ))}
{provided.placeholder} {provided.placeholder}
</section> </section>
)} )}

@ -18,7 +18,7 @@ const ProcessCard = ({ processes, title, hint, buttons, options }) => {
> >
{process.color && ( {process.color && (
<CircleInCircle <CircleInCircle
parentClassName={`${process.color} w-3 h-3`} parentClassName={`${process.color} w-2.5 h-2.5`}
childClassName={false} childClassName={false}
/> />
)} )}

Loading…
Cancel
Save