arccodion

arccodion.jsx

import React, { useState } from 'react';
import styled from 'styled-components';
import media from 'styled-media-query';
import * as S from './styles';
import * as T from '../Typograph';
import Icon from '../Icons';

export const Wrapper = styled.div`
  padding: 16px;
  background: #ffffff;
  border: 2px solid #e4e5e8;
  box-sizing: border-box;
  border-radius: 16px;
  margin-bottom: 16px;

  ${media.greaterThan('medium')`

  `}
`;

export const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

export const Body = styled.div``;

export const IconBox = styled.div`
  margin-left: 24px;
  color: #d53436;
`;

export const TextContent = styled.div``;

const Accordion = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <S.Wrapper onClick={() => setIsOpen(!isOpen)}>
      <S.Header>
        <S.TextContent>
          <T.ParagraphBold>{title}</T.ParagraphBold>
        </S.TextContent>
        <S.IconBox>
          <Icon name="chevron" />
        </S.IconBox>
      </S.Header>
      {isOpen && (
        <S.Body>
          <T.ParagraphLight>{children}</T.ParagraphLight>
        </S.Body>
      )}
    </S.Wrapper>
  );
};

export default Accordion;