update src/components/Accordion/AccordionDesign1/index.js and src/components/ButtonDesign/Button/index.js

master
mahdi 2 years ago
parent 81b0e62c47
commit 673dda0a5e
  1. 73
      src/components/Accordion/AccordionDesign1/index.js

@ -1,26 +1,52 @@
import React, { useState } from "react"; import React, { useState } from "react";
import CircleInCircle from "../../MiniComponents/CircleInCircle"; import CircleInCircle from "../../MiniComponents/CircleInCircle";
import Button from "../../ButtonDesign/Button";
const AccordionDesign1 = ({ items }) => { const AccordionDesign1 = ({ items, vod }) => {
const [activeAccordion, setActiveAccordion] = useState(null); const [activeAccordion, setActiveAccordion] = useState(null);
return ( return (
<section className="w-full flex flex-col "> <section className="w-full flex flex-col bg-gray-200">
{items.map((item, index) => ( {items.map((item, index) => (
<div className="flex flex-col" key={index}> <div className="flex flex-col" key={index}>
{/* parent */} {/* parent */}
<div <div
className="flex flex-row items-center justify-between px-3 py-5 border-b-2 border-secondary cursor-pointer" className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === item
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
onClick={() => onClick={() =>
setActiveAccordion(activeAccordion === item ? null : item) setActiveAccordion(activeAccordion === item ? null : item)
} }
> >
<CircleInCircle <CircleInCircle
parentClassName={"bg-secondaryDark w-3 h-3 "} parentClassName={"bg-secondary w-3 h-3 "}
childClassName={false} childClassName={false}
/> />
<h2 className="flex-1 mr-7 text-sm">{item.title}</h2> <h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
<img src="images/accordion+.svg" alt="" class="w-3 ml-2" /> {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> </div>
{/* child */} {/* child */}
{activeAccordion === item && {activeAccordion === item &&
@ -37,6 +63,20 @@ const AccordionDesign1 = ({ items }) => {
<div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div> <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{subItem.name}</p> <p className="text-sm flex-1">{subItem.name}</p>
<div className="flex flex-row items-center justify-end gap-x-3 flex-1"> <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
{vod ? (
<>
<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={"پخش"}
/>
</>
) : (
<>
{" "}
<img <img
src="images/accordionGroup2724.svg" src="images/accordionGroup2724.svg"
className="w-8 rounded" className="w-8 rounded"
@ -46,7 +86,9 @@ const AccordionDesign1 = ({ items }) => {
src="images/accordionGroup2723.svg" src="images/accordionGroup2723.svg"
className="w-8 rounded" className="w-8 rounded"
alt="edit-button" alt="edit-button"
/> />{" "}
</>
)}
</div> </div>
</div> </div>
))} ))}
@ -55,18 +97,16 @@ const AccordionDesign1 = ({ items }) => {
</section> </section>
); );
}; };
// accordionGroup2723.svg
// accordionGroup2724.svg
// accordionGroup2725.svg
// accordion-.svg
// accordion+.svg
export default AccordionDesign1; export default AccordionDesign1;
AccordionDesign1.defaultProps = { AccordionDesign1.defaultProps = {
vod: true,
items: [ items: [
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
subItems: [ subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
@ -81,7 +121,10 @@ AccordionDesign1.defaultProps = {
}, },
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
subItems: [ subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
@ -96,7 +139,9 @@ AccordionDesign1.defaultProps = {
}, },
{ {
title: title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
subItems: [ subItems: [
{ {
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",

Loading…
Cancel
Save