Expansion Panel

"use client";

import React, {useState} from "react";
import {Button, ExpansionPanel} from "@brynlabs/fusion-ui";

export const ExpansionPanelExample = () => {
  const [expansionPanel1Expanded, setExpansionPanel1Expanded] = useState(false);
  const [expansionPanel2Expanded, setExpansionPanel2Expanded] = useState(false);
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
      <div style={{display: "flex", flexDirection: "column", gap: "10px", width: "fit-content"}}>
        <Button onClick={() => setExpansionPanel1Expanded(curr => !curr)}>Toggle Content</Button>
        <Button onClick={() => setExpansionPanel2Expanded(curr => !curr)}>
          Toggle Stacked Content
        </Button>
      </div>
      <ExpansionPanel expanded={expansionPanel1Expanded}>
        Test-Content
        <ExpansionPanel expanded={expansionPanel2Expanded}>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
          dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
          eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
          ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor.
        </ExpansionPanel>
      </ExpansionPanel>
    </div>
  );
};