Showing
7 changed files
with
0 additions
and
300 deletions
1 | -import React from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
4 | -import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; | ||
5 | -import moment from "moment"; | ||
6 | - | ||
7 | -const HomeCalendarWrapper = styled.div` | ||
8 | - display: flex; | ||
9 | - flex-direction: column; | ||
10 | - justify-content: center; | ||
11 | - align-items: center; | ||
12 | - height: 50%; | ||
13 | - width: 100%; | ||
14 | - background-color: white; | ||
15 | - opacity: 0.8; | ||
16 | - border-radius: 10px; | ||
17 | -`; | ||
18 | - | ||
19 | -const CalenderBox = styled.div` | ||
20 | - display: flex; | ||
21 | - flex-direction: column; | ||
22 | - justify-content: center; | ||
23 | - align-items: center; | ||
24 | - height: 100%; | ||
25 | - width: 100%; | ||
26 | -`; | ||
27 | - | ||
28 | -const CalenderMenuBox = styled.div` | ||
29 | - display: flex; | ||
30 | - flex-direction: row; | ||
31 | - justify-content: space-evenly; | ||
32 | - align-items: center; | ||
33 | - height: 15%; | ||
34 | - width: 100%; | ||
35 | -`; | ||
36 | - | ||
37 | -const DateInfoSpan = styled.span` | ||
38 | - font-size: 15px; | ||
39 | - font-family: "Kanit", sans-serif; | ||
40 | -`; | ||
41 | - | ||
42 | -const DateBodyBox = styled.div` | ||
43 | - height: 85%; | ||
44 | - width: 100%; | ||
45 | - display: flex; | ||
46 | - flex-direction: column; | ||
47 | - justify-content: center; | ||
48 | - align-items: center; | ||
49 | -`; | ||
50 | - | ||
51 | -const DateRow = styled.div` | ||
52 | - width: 100%; | ||
53 | - height: 100%; | ||
54 | - display: flex; | ||
55 | - flex-direction: row; | ||
56 | - justify-content: space-around; | ||
57 | - align-items: center; | ||
58 | -`; | ||
59 | - | ||
60 | -const DateText = styled.span` | ||
61 | - text-align: center; | ||
62 | - font-family: "Overpass", sans-serif; | ||
63 | - color: ${(props) => { | ||
64 | - if (props.className === "Sunday") return "#EA2027"; | ||
65 | - else if (props.className === "Saturday") return "#0652DD"; | ||
66 | - }}; | ||
67 | -`; | ||
68 | - | ||
69 | -export default () => { | ||
70 | - const generate = () => { | ||
71 | - const today = moment(); | ||
72 | - const startWeek = today.clone().startOf("month").week(); | ||
73 | - const endWeek = | ||
74 | - today.clone().endOf("month").week() === 1 | ||
75 | - ? 53 | ||
76 | - : today.clone().endOf("month").week(); | ||
77 | - let calendar = []; | ||
78 | - for (let week = startWeek; week <= endWeek; week++) { | ||
79 | - calendar.push( | ||
80 | - <DateRow key={week}> | ||
81 | - {Array(7) | ||
82 | - .fill(0) | ||
83 | - .map((n, i) => { | ||
84 | - let current = today | ||
85 | - .clone() | ||
86 | - .week(week) | ||
87 | - .startOf("week") | ||
88 | - .add(n + i, "day"); | ||
89 | - return ( | ||
90 | - <DateText className={`text`} key={i}> | ||
91 | - {current.format("D")} | ||
92 | - </DateText> | ||
93 | - ); | ||
94 | - })} | ||
95 | - </DateRow> | ||
96 | - ); | ||
97 | - } | ||
98 | - return calendar; | ||
99 | - }; | ||
100 | - | ||
101 | - return ( | ||
102 | - <HomeCalendarWrapper> | ||
103 | - <CalenderBox> | ||
104 | - <CalenderMenuBox> | ||
105 | - <FontAwesomeIcon icon={faArrowLeft} /> | ||
106 | - <DateInfoSpan>May 2020</DateInfoSpan> | ||
107 | - <FontAwesomeIcon icon={faArrowRight} /> | ||
108 | - </CalenderMenuBox> | ||
109 | - <DateBodyBox> | ||
110 | - <DateRow> | ||
111 | - <DateText className="Sunday">SUN</DateText> | ||
112 | - <DateText>MON</DateText> | ||
113 | - <DateText>TUE</DateText> | ||
114 | - <DateText>WED</DateText> | ||
115 | - <DateText>THU</DateText> | ||
116 | - <DateText>FRI</DateText> | ||
117 | - <DateText className="Saturday">SAT</DateText> | ||
118 | - </DateRow> | ||
119 | - {generate()} | ||
120 | - </DateBodyBox> | ||
121 | - </CalenderBox> | ||
122 | - </HomeCalendarWrapper> | ||
123 | - ); | ||
124 | -}; |
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 | - background-color: white; | ||
13 | - opacity: 0.8; | ||
14 | - border-radius: 10px; | ||
15 | -`; | ||
16 | - | ||
17 | -const ElementBox = styled.div` | ||
18 | - display: flex; | ||
19 | - flex-direction: row; | ||
20 | - justify-content: space-between; | ||
21 | - align-items: center; | ||
22 | -`; | ||
23 | - | ||
24 | -const IconBox = styled.div` | ||
25 | - svg { | ||
26 | - font-size: 15px; | ||
27 | - } | ||
28 | -`; | ||
29 | - | ||
30 | -const ListContentBox = styled.div` | ||
31 | - font-size: 15px; | ||
32 | -`; | ||
33 | - | ||
34 | -export default () => { | ||
35 | - return ( | ||
36 | - <CheckListBox> | ||
37 | - <ElementBox> | ||
38 | - <IconBox> | ||
39 | - <FontAwesomeIcon icon={faCheckCircle} /> | ||
40 | - </IconBox> | ||
41 | - <ListContentBox>Check List One</ListContentBox> | ||
42 | - </ElementBox> | ||
43 | - </CheckListBox> | ||
44 | - ); | ||
45 | -}; |
1 | -import React from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import HomeTodo from "./HomeTodo"; | ||
4 | -import HomeCalender from "./HomeCalendar"; | ||
5 | -import HomeCheckList from "./HomeCheckList"; | ||
6 | -import img from "../../imgs/1.jpg"; | ||
7 | - | ||
8 | -const HomeContainer = styled.div` | ||
9 | - display: flex; | ||
10 | - flex-direction: row; | ||
11 | - width: 85%; | ||
12 | - background-image: url(${img}); | ||
13 | - background-position: center; | ||
14 | - background-size: cover; | ||
15 | -`; | ||
16 | - | ||
17 | -const HomeMiddleBox = styled.div` | ||
18 | - display: flex; | ||
19 | - flex-direction: column; | ||
20 | - justify-content: center; | ||
21 | - align-items: center; | ||
22 | - width: 70%; | ||
23 | -`; | ||
24 | -const HomeRightBox = styled.div` | ||
25 | - display: flex; | ||
26 | - flex-direction: column; | ||
27 | - justify-content: center; | ||
28 | - align-items: space-between; | ||
29 | - width: 30%; | ||
30 | -`; | ||
31 | - | ||
32 | -export default () => { | ||
33 | - return ( | ||
34 | - <HomeContainer> | ||
35 | - <HomeMiddleBox> | ||
36 | - <HomeTodo /> | ||
37 | - </HomeMiddleBox> | ||
38 | - <HomeRightBox> | ||
39 | - <HomeCalender /> | ||
40 | - <HomeCheckList /> | ||
41 | - </HomeRightBox> | ||
42 | - </HomeContainer> | ||
43 | - ); | ||
44 | -}; |
1 | -import React, { useState, useEffect } from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import moment from "moment"; | ||
4 | -import Input from "../Input"; | ||
5 | - | ||
6 | -const HomeTodo = styled.div` | ||
7 | - display: flex; | ||
8 | - flex-direction: column; | ||
9 | -`; | ||
10 | - | ||
11 | -const DateBox = styled.div` | ||
12 | - display: flex; | ||
13 | - flex-direction: column; | ||
14 | - input { | ||
15 | - margin-top: 20px; | ||
16 | - background: none; | ||
17 | - border-bottom: 1px solid; | ||
18 | - border-radius: 0px; | ||
19 | - border-color: white; | ||
20 | - } | ||
21 | -`; | ||
22 | - | ||
23 | -const DateSpan = styled.span` | ||
24 | - font-size: ${(props) => { | ||
25 | - if (props.className === "Clock") return "85px"; | ||
26 | - if (props.className === "Title") return "30px"; | ||
27 | - }}; | ||
28 | - color: white; | ||
29 | - text-align: center; | ||
30 | - &:not(:last-child) { | ||
31 | - margin-bottom: 20px; | ||
32 | - } | ||
33 | -`; | ||
34 | - | ||
35 | -export default () => { | ||
36 | - const [date, setDate] = useState(moment().format("h:mm:ss")); | ||
37 | - | ||
38 | - useEffect(() => { | ||
39 | - let timer = setInterval(() => tick(), 1000); | ||
40 | - return function cleanUp() { | ||
41 | - clearInterval(timer); | ||
42 | - }; | ||
43 | - }); | ||
44 | - | ||
45 | - function tick() { | ||
46 | - setDate(moment().format("h:mm:ss")); | ||
47 | - } | ||
48 | - | ||
49 | - return ( | ||
50 | - <HomeTodo> | ||
51 | - <DateBox> | ||
52 | - <DateSpan className="Clock">{date}</DateSpan> | ||
53 | - <DateSpan className="Title">Enter Todo list</DateSpan> | ||
54 | - <Input placeholder={""} /> | ||
55 | - </DateBox> | ||
56 | - </HomeTodo> | ||
57 | - ); | ||
58 | -}; |
1 | -import React from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import Menu from "../Menu/MenuContainer"; | ||
4 | -import { Helmet } from "react-helmet"; | ||
5 | - | ||
6 | -const Wrapper = styled.div` | ||
7 | - width: 100%; | ||
8 | - display: flex; | ||
9 | - flex-direction: row; | ||
10 | - overflow: hidden; | ||
11 | -`; | ||
12 | - | ||
13 | -export default () => { | ||
14 | - return ( | ||
15 | - <Wrapper> | ||
16 | - <Helmet> | ||
17 | - <title>1:1 Chat</title> | ||
18 | - </Helmet> | ||
19 | - <Menu /> | ||
20 | - </Wrapper> | ||
21 | - ); | ||
22 | -}; |
File mode changed
-
Please register or login to post a comment