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

Loading…
Cancel
Save