Section.jsx 613 Bytes
Newer Older
박민석's avatar
박민석 committed
1 2 3 4
// @ts-nocheck
import styled from 'styled-components'

export default function Section (props) {
박민석's avatar
박민석 committed
5
  const { gap, title } = props
minseok.park's avatar
minseok.park committed
6

박민석's avatar
박민석 committed
7 8 9 10 11
  return <Wrapper>
    <Title>{title}</Title>
    <Contents gap={gap}>
      {props.children}
    </Contents>
박민석's avatar
박민석 committed
12 13 14
  </Wrapper>
}

박민석's avatar
박민석 committed
15
const Wrapper = styled.section`
박민석's avatar
박민석 committed
16
    display: flex;
박민석's avatar
박민석 committed
17
    flex-direction: column;
박민석's avatar
박민석 committed
18
    justify-content: center;
minseok.park's avatar
minseok.park committed
19
    align-items: center;
박민석's avatar
박민석 committed
20 21
    padding: 80px 0;
`
박민석's avatar
박민석 committed
22 23 24 25 26 27 28 29 30 31
const Title = styled.h1`
  font-size: 4rem;
  font-weight: 700;
`
const Contents = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    gap: ${props => props.gap};
`