web2.0-frontend/src/components/Accordion/Accordion.tsx

import React, { useState } from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import AccordionIcon from "./AccordionIcon";

const Container = styled.div`
  margin: 0.2em;
  padding: 0.2em;
  display: flex;
  flex-flow: column nowrap;
  border-style: solid;
  border-color: ${colors.lightTurquoise};
  border-width: 1px;

  & > button {
    display: flex;
    flex-flow: row nowrap;
    background-color: ${colors.white};
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;

    h5 {
      flex: 1;
      text-align: left;
      padding-left: 1em;
      color: ${colors.blue1};
      font-size: 1.125rem;
      margin: auto;
    }
  }

  & > div {
    overflow: hidden;
  }
`;

const Panel = styled.div<{ $visible?: boolean }>`
  max-height: ${((p) => (p.$visible ? "1000vh" : "0"))};
  transition: max-height 400ms ease-in-out;
  display: flex;

  & > * {
    padding: 0 1em;
  }
`;

interface AccordionProps {
  title: string;
  children: React.ReactNode;
}

const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
  const [isOpen, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!isOpen);
  };
  return (
    <Container>
      <button type="button" onClick={handleClick}>
        <AccordionIcon open={isOpen} />
        <h5>{title}</h5>
      </button>
      <div>
        <Panel $visible={isOpen}>
          {children}
        </Panel>
      </div>
    </Container>
  );
};

export default Accordion;