update src/components/MiniComponents/CircleInCircle/index.js and data.js

master
mahdi 2 years ago
parent 691d2142c3
commit 12ccf71c01
  1. 71
      src/components/Accordion/AccordionDesign1/index.js
  2. 25
      src/components/Accordion/index.js
  3. 11
      src/redux/data.js

@ -0,0 +1,71 @@
import React from "react";
import CircleInCircle from "../../MiniComponents/CircleInCircle";
const AccordionDesign1 = ({ items }) => {
return (
<section className="w-full flex flex-col p-4 bg-gray-300">
{/* header */}
{items.map((item, index) => (
<div className="flex flex-row items-center justify-between bg-red-50 border-b-4 border-secondaryLight">
<CircleInCircle
parentClassName={"bg-green-500 w-3 h-3 "}
childClassName={false}
/>
<h2 className="bg-blue-300 flex-1">{item.title}</h2>{" "}
</div>
))}
</section>
);
};
export default AccordionDesign1;
AccordionDesign1.defaultProps = {
items: [
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
{
name: "شرکت های بزرگ خیلی خوب هستند",
},
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ",
},
],
},
],
};

@ -0,0 +1,25 @@
import React, { useState } from "react";
import AccordionDesign1 from "./AccordionDesign1";
function Accordion() {
const list = {
1: <AccordionDesign1 />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="mb-10 w-20 bg-gray-200"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default Accordion;

@ -51,6 +51,7 @@ import Avatar from "../components/Avatar";
import Timeline from "../components/Timeline";
import ThemeColor from "../components/ThemeColor";
import ShowCase from "../components/ShowCase";
import Accordion from "../components/Accordion";
// mini components
import MiniComponents from "../components/MiniComponents";
@ -785,6 +786,16 @@ const components = [
code: null,
},
},
{
name: "Accordion",
author: "Andalib",
props: [],
content: {
name: "Accordion",
component: <Accordion />,
code: null,
},
},
// mini components
{
name: "Mini Components",

Loading…
Cancel
Save