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. 192
      src/components/Accordion/index.js
  3. 2
      src/components/Card/index.js

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

@ -11,17 +11,6 @@ const finalSpaceCharacters = [
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
id: "garfdsy",
@ -30,84 +19,20 @@ const finalSpaceCharacters = [
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
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 [activeAccordion, setActiveAccordion] = useState(null);
// const [activeAccordion, setActiveAccordion] = useState(null);
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
@ -121,12 +46,12 @@ function Accordion({ vod }) {
}
return (
<section className="w-full">
<section className="w-full mt-7">
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<section
className="characters w-full flex flex-col bg-surface"
className="characters w-full flex flex-col gap-y-4"
id="container"
{...provided.droppableProps}
ref={provided.innerRef}
@ -140,110 +65,31 @@ function Accordion({ vod }) {
{...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-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">
{item.title}
</h2>
{vod && (
<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>
)}
<div className="flex items-center w-full ">
<img
src={
activeAccordion === item
? `images/accordion-.svg`
: `images/accordion+.svg`
}
src="images/blue-hamburger-menu.jpeg"
alt=""
class="w-3 ml-2"
class="w-4 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-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>
</>
) : (
<>
<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 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}
</h2>
<div className="bg-blue-800 p-2">
<img
src="images/blue-cancle-icon.png"
alt=""
class="w-3 "
/>
</div>
))}
</div>
</div>
{provided.placeholder}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</section>
)}

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

Loading…
Cancel
Save