glide-design-system/src/lib/components/accordion/Accrodian.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState } from "react";
import styles from "./Accordion.module.css";
import arrowDown from "../../assests/arrowDown.png";
import arrowUp from "../../assests/arrowUp.png";

function Accordion({ title, children, style, titleStyle, id, name }) {
  const [isVisible, setIsVisible] = useState(false);
  const toggleSection = () => {
    setIsVisible(!isVisible);
  };

  const combinedStyles = {
    width: "50%",
    ...style,
  };

  const titleStyles = {
    backgroundColor: !isVisible ? "white" : " rgba(10, 91, 153, 0.05)",
    fontSize: "14px",
    fontWeight: "400",
    color: "#555555",

    ...titleStyle,
  };
  return (
    <div className={`${styles.accordianParent}`} style={combinedStyles}>
      <button
        id={id ? id : ""}
        name={name ? name : ""}
        className={`${styles.accordion} ${!isVisible && styles.accordianClose}`}
        onClick={() => toggleSection()}
        style={titleStyles}>
        <div className={styles.accordianContainer}>
          <div className={styles.title}>{title ? title : "title"}</div>
          <img
            alt="arrow-icons"
            className={` ${styles.accordianIcon}`}
            src={isVisible ? arrowUp : arrowDown}
            onClick={() => toggleSection()}
          />
        </div>
      </button>
      <div className={!isVisible ? styles.closeContent : styles.content}>
        {isVisible && (
          <div className={`${styles.panel}`}>{children ? children : ""}</div>
        )}
      </div>
    </div>
  );
}
export default Accordion;