sdy

create HomeCheckList component

1 +import React from "react";
2 +import styled from "styled-components";
3 +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 +import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
5 +
6 +const CheckListBox = styled.div`
7 + display: flex;
8 + flex-direction: column;
9 + align-items: center;
10 + justify-content: center;
11 + height: 50%;
12 + border: 1px solid;
13 +`;
14 +
15 +const ElementBox = styled.div`
16 + display: flex;
17 + flex-direction: row;
18 + justify-content: space-between;
19 + align-items: center;
20 +`;
21 +
22 +const IconBox = styled.div`
23 + svg {
24 + font-size: 15px;
25 + }
26 +`;
27 +
28 +const ListContentBox = styled.div`
29 + font-size: 15px;
30 +`;
31 +
32 +export default () => {
33 + return (
34 + <CheckListBox>
35 + <ElementBox>
36 + <IconBox>
37 + <FontAwesomeIcon icon={faCheckCircle} />
38 + </IconBox>
39 + <ListContentBox>Check List One</ListContentBox>
40 + </ElementBox>
41 + </CheckListBox>
42 + );
43 +};