sdy

create Footer component

import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";
const Footer = styled.footer`
width: 100%;
border-top: 1px solid #ebeaeb;
`;
const MenuContainer = styled.div`
padding: 5rem 0;
`;
const MenuNav = styled.nav`
display: grid;
grid-gap: 2rem;
max-width: 80%;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
`;
const MenuBlock = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const MenuTitle = styled.p`
padding: 10px;
font-weight: 600;
font-size: 1.3rem;
`;
const MenuList = styled.ul`
line-height: 2;
`;
const MenuItem = styled.li`
text-align: center;
`;
const CopyRightBox = styled.div`
width: 100%;
`;
const CopyRightBlock = styled.div`
max-width: 80%;
margin: 0 auto;
height: 2.5rem;
display: flex;
align-items: center;
`;
const CopyRightSpan = styled.span`
font-size: 1rem;
`;
export default () => {
return (
<Footer>
<MenuContainer>
<MenuNav>
<MenuBlock>
<MenuTitle>CONCEPT</MenuTitle>
<MenuList>
<MenuItem>
<Link to="/">Features</Link>
</MenuItem>
<MenuItem>
<Link to="/">Test</Link>
</MenuItem>
<MenuItem>
<Link to="/">Observation</Link>
</MenuItem>
</MenuList>
</MenuBlock>
<MenuBlock>
<MenuTitle>SUBJECT</MenuTitle>
<MenuList>
<MenuItem>
<Link to="/">What</Link>
</MenuItem>
<MenuItem>
<Link to="/">How</Link>
</MenuItem>
<MenuItem>
<Link to="/">Why</Link>
</MenuItem>
</MenuList>
</MenuBlock>
<MenuBlock>
<MenuTitle>COMPANY</MenuTitle>
<MenuList>
<MenuItem>
<Link to="/">Leader</Link>
</MenuItem>
<MenuItem>
<Link to="/">Empolyee</Link>
</MenuItem>
<MenuItem>
<Link to="/">Salary</Link>
</MenuItem>
</MenuList>
</MenuBlock>
</MenuNav>
</MenuContainer>
<CopyRightBox>
<CopyRightBlock>
<CopyRightSpan>
@ Copyright 2020 KhuChat. All rights reserved. Various trademarks
held by their respective owners.
</CopyRightSpan>
</CopyRightBlock>
</CopyRightBox>
</Footer>
);
};