sdy

create Footer component

1 +import React from "react";
2 +import styled from "styled-components";
3 +import { Link } from "react-router-dom";
4 +
5 +const Footer = styled.footer`
6 + width: 100%;
7 + border-top: 1px solid #ebeaeb;
8 +`;
9 +
10 +const MenuContainer = styled.div`
11 + padding: 5rem 0;
12 +`;
13 +
14 +const MenuNav = styled.nav`
15 + display: grid;
16 + grid-gap: 2rem;
17 + max-width: 80%;
18 + margin: 0 auto;
19 + grid-template-columns: repeat(3, 1fr);
20 +`;
21 +
22 +const MenuBlock = styled.div`
23 + display: flex;
24 + flex-direction: column;
25 + justify-content: center;
26 + align-items: center;
27 +`;
28 +
29 +const MenuTitle = styled.p`
30 + padding: 10px;
31 + font-weight: 600;
32 + font-size: 1.3rem;
33 +`;
34 +
35 +const MenuList = styled.ul`
36 + line-height: 2;
37 +`;
38 +
39 +const MenuItem = styled.li`
40 + text-align: center;
41 +`;
42 +
43 +const CopyRightBox = styled.div`
44 + width: 100%;
45 +`;
46 +
47 +const CopyRightBlock = styled.div`
48 + max-width: 80%;
49 + margin: 0 auto;
50 + height: 2.5rem;
51 + display: flex;
52 + align-items: center;
53 +`;
54 +
55 +const CopyRightSpan = styled.span`
56 + font-size: 1rem;
57 +`;
58 +
59 +export default () => {
60 + return (
61 + <Footer>
62 + <MenuContainer>
63 + <MenuNav>
64 + <MenuBlock>
65 + <MenuTitle>CONCEPT</MenuTitle>
66 + <MenuList>
67 + <MenuItem>
68 + <Link to="/">Features</Link>
69 + </MenuItem>
70 + <MenuItem>
71 + <Link to="/">Test</Link>
72 + </MenuItem>
73 + <MenuItem>
74 + <Link to="/">Observation</Link>
75 + </MenuItem>
76 + </MenuList>
77 + </MenuBlock>
78 + <MenuBlock>
79 + <MenuTitle>SUBJECT</MenuTitle>
80 + <MenuList>
81 + <MenuItem>
82 + <Link to="/">What</Link>
83 + </MenuItem>
84 + <MenuItem>
85 + <Link to="/">How</Link>
86 + </MenuItem>
87 + <MenuItem>
88 + <Link to="/">Why</Link>
89 + </MenuItem>
90 + </MenuList>
91 + </MenuBlock>
92 + <MenuBlock>
93 + <MenuTitle>COMPANY</MenuTitle>
94 + <MenuList>
95 + <MenuItem>
96 + <Link to="/">Leader</Link>
97 + </MenuItem>
98 + <MenuItem>
99 + <Link to="/">Empolyee</Link>
100 + </MenuItem>
101 + <MenuItem>
102 + <Link to="/">Salary</Link>
103 + </MenuItem>
104 + </MenuList>
105 + </MenuBlock>
106 + </MenuNav>
107 + </MenuContainer>
108 + <CopyRightBox>
109 + <CopyRightBlock>
110 + <CopyRightSpan>
111 + @ Copyright 2020 KhuChat. All rights reserved. Various trademarks
112 + held by their respective owners.
113 + </CopyRightSpan>
114 + </CopyRightBlock>
115 + </CopyRightBox>
116 + </Footer>
117 + );
118 +};