|
|
|
@ -3,21 +3,54 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle"; |
|
|
|
|
|
|
|
|
|
|
|
const AccordionDesign1 = ({ items }) => { |
|
|
|
const AccordionDesign1 = ({ items }) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<section className="w-full flex flex-col p-4 bg-gray-300"> |
|
|
|
<section className="w-full flex flex-col "> |
|
|
|
{/* header */} |
|
|
|
{/* header */} |
|
|
|
{items.map((item, index) => ( |
|
|
|
{items.map((item, index) => ( |
|
|
|
<div className="flex flex-row items-center justify-between bg-red-50 border-b-4 border-secondaryLight"> |
|
|
|
<div className="flex flex-col" key={index}> |
|
|
|
<CircleInCircle |
|
|
|
<div className="flex flex-row items-center justify-between px-3 py-5 border-b-2 border-secondary cursor-pointer"> |
|
|
|
parentClassName={"bg-green-500 w-3 h-3 "} |
|
|
|
<CircleInCircle |
|
|
|
childClassName={false} |
|
|
|
parentClassName={"bg-secondaryDark w-3 h-3 "} |
|
|
|
/> |
|
|
|
childClassName={false} |
|
|
|
<h2 className="bg-blue-300 flex-1">{item.title}</h2>{" "} |
|
|
|
/> |
|
|
|
|
|
|
|
<h2 className="flex-1 mr-7 text-sm">{item.title}</h2> |
|
|
|
|
|
|
|
<img src="images/accordion+.svg" alt="" class="w-3 ml-2" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{item.subItems.map((subItem, i) => ( |
|
|
|
|
|
|
|
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer "> |
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
|
|
|
<img |
|
|
|
|
|
|
|
src="images/accordionGroup2725.svg" |
|
|
|
|
|
|
|
className="w-4" |
|
|
|
|
|
|
|
alt="line" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<span className="mr-3 text-sm">1</span> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
<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> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
// accordionGroup2723.svg
|
|
|
|
|
|
|
|
// accordionGroup2724.svg
|
|
|
|
|
|
|
|
// accordionGroup2725.svg
|
|
|
|
|
|
|
|
// accordion-.svg
|
|
|
|
|
|
|
|
// accordion+.svg
|
|
|
|
export default AccordionDesign1; |
|
|
|
export default AccordionDesign1; |
|
|
|
|
|
|
|
|
|
|
|
AccordionDesign1.defaultProps = { |
|
|
|
AccordionDesign1.defaultProps = { |
|
|
|
|
