43 |
46 |
51 | ![Logo]({require("../../resources/images/applelogo.png")})
56 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/ChakraAlert/ChakraAlert.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | AlertDialog,
4 | AlertDialogBody,
5 | AlertDialogContent,
6 | AlertDialogFooter,
7 | AlertDialogHeader,
8 | AlertDialogOverlay,
9 | Button,
10 | } from "@chakra-ui/react";
11 | import toggleFullscreen from "../../utils/helpers/toggleFullscreen";
12 |
13 | export interface ChakraAlertProps {
14 | isOpen: any;
15 | cancelRef: any;
16 | onClose: any;
17 | }
18 |
19 | export default function ChakraAlert(props: ChakraAlertProps) {
20 | const { isOpen, cancelRef, onClose } = props;
21 |
22 | return (
23 |
56 |
57 |
58 |
66 |
125 | {determineDailyCon(day)}
126 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/DailyTemps/DailyTemps.scss:
--------------------------------------------------------------------------------
1 | .daily-temps {
2 | display: flex;
3 | gap: 20px;
4 | margin-left: 20px;
5 |
6 | div {
7 | display: flex;
8 | gap: 6px;
9 | align-items: center;
10 |
11 | h3 {
12 | }
13 |
14 | .highest-h3 {
15 | width: 40px;
16 | }
17 |
18 | .lowest-h3 {
19 | width: 40px;
20 | }
21 |
22 | .icon {
23 | fill: white;
24 | height: 17px;
25 | margin-right: 10px;
26 |
27 | }
28 |
29 | .highest-icon {
30 | width: 16px;
31 | }
32 |
33 | .lowest-icon {
34 | width: 16px;
35 | }
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/DailyTemps/DailyTemps.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import "./DailyTemps.scss";
3 | import { ReactComponent as Highest } from "../../resources/images/svg/weather/highest.svg";
4 | import { ReactComponent as Lowest } from "../../resources/images/svg/weather/lowest.svg";
5 | import sortedIntervalType from "../../types/sortedInterval";
6 |
7 | export interface DailyTempsProps {
8 | day: sortedIntervalType[];
9 | }
10 |
11 | export default function DailyTemps(props: DailyTempsProps) {
12 | const { day } = props;
13 |
14 | const determineTemps = () => {
15 | let lowestTemp: number = 100;
16 | let highestTemp: number = -100;
17 | day.forEach((interval: sortedIntervalType, i: number) => {
18 | if (interval.minTemp < lowestTemp) {
19 | lowestTemp = interval.minTemp;
20 | }
21 |
22 | if (interval.maxTemp > highestTemp) {
23 | highestTemp = interval.maxTemp;
24 | }
25 | });
26 |
27 | return [lowestTemp, highestTemp];
28 | };
29 |
30 | const temps = determineTemps();
31 |
32 | return (
33 | {determineDailyConString(day)}
127 |
34 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/Dock/Dock.scss:
--------------------------------------------------------------------------------
1 | .dock {
2 | display: flex;
3 | background-color: hsla(240, 3%, 11%, 0.4);
4 | box-shadow: 0px 0px 4px black;
5 | height: 71px !important;
6 | justify-content: center;
7 | gap: 1px;
8 | align-items: center;
9 | border: 1px solid rgb(85, 84, 84);
10 | border-radius: 18px;
11 | min-width: 618px;
12 | margin-top: 50px;
13 | position: absolute;
14 | bottom: 9px;
15 | backdrop-filter: blur(20px);
16 | overflow-y: visible !important;
17 |
18 | .finder {
19 | margin-right: 1px;
20 | }
21 |
22 | .dock-item {
23 | display: flex;
24 | flex-direction: column;
25 | align-items: center;
26 | margin-bottom: 5px;
27 | margin-top: 4px;
28 | transition: 0.175s all ease-in-out;
29 | position: relative;
30 |
31 | .tool-tip {
32 | position: absolute;
33 | top: -40px;
34 | border-radius: 6px;
35 | background-color: rgba(0, 0, 0, 0.4);
36 | color: white;
37 | display: flex;
38 | align-items: center;
39 | justify-content: center;
40 | padding: 2px 8px 3px 8px;
41 | border: 1px solid #707272;
42 | backdrop-filter: blur(20px);
43 | transition: 0.2s all;
44 | opacity: 0;
45 | visibility: hidden;
46 | }
47 | }
48 |
49 | .no-point {
50 | margin-bottom: 9px;
51 | }
52 |
53 | .dock-icon {
54 | height: 3.59rem;
55 | cursor: url("../../resources//images/pointing.png"), auto;
56 | transition: 0.175s all ease-in-out;
57 | }
58 |
59 | .division {
60 | width: 1px;
61 | height: 62px;
62 | background-color: rgb(85, 84, 84);
63 | margin-left: 2px;
64 | margin-right: 2px;
65 | }
66 | }
67 |
68 | .dock-item:hover {
69 | margin-bottom: 35px;
70 |
71 | &:hover {
72 | .tool-tip {
73 | opacity: 1;
74 | visibility: visible;
75 | }
76 |
77 | .dock-icon {
78 | height: 90px;
79 | width: 88px;
80 | }
81 | }
82 | }
83 |
84 | .distance-1 {
85 | margin-bottom: 22px !important;
86 |
87 | .dock-icon {
88 | height: 70px;
89 | width: 69px;
90 | }
91 | }
92 |
93 | .distance-1.no-point {
94 | margin-bottom: 25px !important;
95 | }
96 |
97 | .distance-2 {
98 | margin-bottom: 14px !important;
99 |
100 | .dock-icon {
101 | height: 62px;
102 | width: 61px;
103 | }
104 | }
105 |
106 | .hovered.no-point {
107 | margin-bottom: 40px !important;
108 | }
109 |
110 | .point {
111 | height: 4px;
112 | width: 4px;
113 | border-radius: 9999px;
114 | background-color: white;
115 | justify-self: center;
116 | margin-right: 2px;
117 | }
118 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/DropdownComponent/DropdownComponent.scss:
--------------------------------------------------------------------------------
1 | @import "../Page/Page.scss";
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | }
7 |
8 | .dropdown-menu {
9 | display: flex;
10 | flex-direction: column;
11 | gap: 3px;
12 | cursor: url("../../resources/images/cursor.png"), auto;
13 | border: 1px solid rgba(255, 255, 255, 0.335);
14 | border-radius: 8px;
15 | z-index: 20 !important;
16 | background-color: rgba(0, 0, 0, 0.19);
17 | position: absolute;
18 | width: 200px;
19 | padding: 11px 4px 8px 7px;
20 | left: 0;
21 | top: 30px;
22 | box-shadow: 0px 0px 3.35px black;
23 |
24 | .divider {
25 | margin: -2px 3px 1px 0px;
26 | height: 1px;
27 | background-color: rgba(255, 255, 255, 0.335);
28 | }
29 |
30 | .dropdown-item {
31 | padding: 0px 8px;
32 | font-size: 14.6px;
33 | font-family: "SF Regular";
34 | transform: scaleY(1.03);
35 | border: none;
36 | border-radius: 4px;
37 | }
38 | }
39 |
40 | .dd-logo {
41 | left: -10px;
42 | }
43 |
44 | .dd-finder {
45 | left: -6px;
46 | }
47 |
48 | .dd-logo,
49 | .dd-finder,
50 | .dd-file,
51 | .dd-edit,
52 | .dd-view {
53 | width: 257px;
54 | }
55 |
56 | .dd-go,
57 | .dd-help {
58 | width: 255px;
59 | }
60 |
61 | .dd-windows {
62 | width: 292px;
63 | }
64 |
65 | .dropdown-menu::after {
66 | backdrop-filter: blur(25px);
67 | content: "";
68 | display: block;
69 | height: 100%;
70 | width: 100%;
71 | z-index: -1 !important;
72 | position: absolute;
73 | left: 0;
74 | top: 0;
75 | }
76 |
77 | .selectable {
78 |
79 | &:hover {
80 | background-color: $systemColor;
81 | color: black !important;
82 | cursor: url("../../resources/images/pointing.png"), auto;
83 | }
84 | }
85 |
86 | .unselectable {
87 | cursor: url("../../resources/images/cursor.png"), auto;
88 | }
89 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/DropdownComponent/DropdownComponent.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import getDropdownContent from "../../utils/helpers/getDropdownContent";
3 | import { store } from "../../App";
4 | import "./DropdownComponent.scss";
5 | import clearStorage from "../../utils/helpers/clearStorage";
6 |
7 | export default function DropdownComponent() {
8 | const [state, dispatch] = useContext(store);
9 | const content = getDropdownContent(state);
10 |
11 | return (
12 |
35 |
38 | {temps[0]}°
37 |
39 |
42 | {temps[1]}°
41 |
33 | {content.map((item, i) => {
34 | if (item.name === "divider") {
35 | return ;
36 | }
37 |
38 | return (
39 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/ForecastList/ForecastList.scss:
--------------------------------------------------------------------------------
1 | .forecast-list {
2 | margin-top: 10px;
3 | padding: 12px 12px;
4 | border-radius: 34px;
5 | background-color: rgba(0, 0, 0, 0.3);
6 |
7 | .weekly {
8 | padding: 14px 32px 17px 32px;
9 | border: none;
10 | border-radius: 24px;
11 | display: flex;
12 | flex-direction: column;
13 | gap: 3px;
14 | background: rgb(52, 59, 87);
15 | background: linear-gradient(
16 | 0deg,
17 | rgba(52, 59, 87, 1) 0%,
18 | rgba(27, 32, 54, 1) 100%
19 | );
20 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
21 | }
22 |
23 | .day-container {
24 | display: flex;
25 | cursor: url("../../resources/images/pointing.png"), auto;
26 |
27 | * {
28 | pointer-events: none;
29 | }
30 |
31 | .day {
32 | width: 100px;
33 | }
34 |
35 | h3 {
36 | color: white;
37 | font-family: "SF Medium";
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/ForecastList/ForecastList.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { store } from "../../App";
3 | import sortedIntervalType from "../../types/sortedInterval";
4 | import DailyCon from "../DailyCon/DailyCon";
5 | import DailyTemps from "../DailyTemps/DailyTemps";
6 | import "./ForecastList.scss";
7 |
8 | export default function ForecastList() {
9 | const [state, dispatch] = useContext(store);
10 |
11 | const selectDay = (e: React.MouseEvent) => {
12 | const target = e.target as HTMLElement;
13 |
14 | dispatch({
15 | type: 'select/SELECT',
16 | payload: target.id
17 | });
18 | }
19 |
20 | return (
21 | {
63 | if (item.name === "Restart") {
64 | localStorage.clear();
65 | window.location.reload();
66 | }
67 |
68 | dispatch({
69 | type: "section/CHECK",
70 | payload: e.target,
71 | });
72 | }}
73 | >
74 | {item.name}
75 |
76 | );
77 | })}
78 |
22 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/InputField/InputField.scss:
--------------------------------------------------------------------------------
1 | .input-container {
2 | position: relative;
3 |
4 | .search,
5 | .lock,
6 | .refresh {
7 | position: absolute;
8 | }
9 |
10 | .search {
11 | fill: #969696;
12 | height: 17px;
13 | left: 7.6em;
14 | top: 0.3em;
15 | cursor: url("../../resources/images/cursor.png"), auto;
16 | }
17 |
18 | .lock {
19 | fill: white;
20 | height: 15px;
21 | left: 8.6em;
22 | top: 0.35em;
23 | cursor: url("../../resources/images/cursor.png"), auto;
24 | }
25 |
26 | .refresh {
27 | height: 13px;
28 | right: 0.4em;
29 | top: 0.4em;
30 | cursor: url("../../resources/images/pointing.png"), auto;
31 | transition: 0.2s all;
32 |
33 | &:active {
34 | transform: scale(0.935);
35 | }
36 | }
37 |
38 | .inputField {
39 | width: 351.68px;
40 | padding-top: 2px;
41 | margin-left: 1px;
42 | border: none;
43 | overflow: hidden;
44 | padding-right: 2.5em;
45 | padding-bottom: 1px;
46 | border-radius: 4px;
47 | outline: none;
48 | height: 24px;
49 | border-top: 1px solid #79797b;
50 | background: rgb(92, 92, 94);
51 | background: linear-gradient(
52 | 360deg,
53 | rgba(92, 92, 94, 1) 0%,
54 | rgba(97, 97, 99, 1) 100%
55 | );
56 | border-bottom: 1px solid #616163;
57 | padding-left: 12.1em;
58 | font-size: 13.2px;
59 | font-family: "SF Medium";
60 | margin-bottom: 1px;
61 | letter-spacing: 0.015em;
62 | color: white;
63 | ::placeholder {
64 | color: #969696 !important;
65 | }
66 | }
67 |
68 | ::placeholder {
69 | color: #969696 !important;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/InputField/InputField.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from "react";
2 | import { store } from "../../App";
3 | import inputWork from "../../utils/helpers/inputWork";
4 | import { ReactComponent as Lock } from "../../resources/images/svg/lock.svg";
5 | import { ReactComponent as Search } from "../../resources/images/svg/search.svg";
6 | import "./InputField.scss";
7 |
8 | export default function InputField() {
9 | const [state, dispatch] = useContext(store);
10 |
11 | return (
12 |
23 | {state.weather.forecast !== 4
24 | ? state.weather.forecast.map(
25 | (dayArray: sortedIntervalType[], i: number) => {
26 | return (
27 |
37 |
28 |
32 | );
33 | }
34 | )
35 | : null}
36 | {dayArray[0].dateName}
29 |
13 | ![Refresh]({require("../../resources/images/refresh.png")})
{
20 | dispatch({
21 | type: 'loading/START'
22 | })
23 |
24 | try {
25 | setTimeout(() => {
26 | inputWork(state.query).then((weather) => {
27 | dispatch({
28 | type: "query/SUBMIT",
29 | payload: weather,
30 | });
31 | });
32 | }, 750)
33 | } catch {
34 | dispatch({
35 | type: 'query/FAIL'
36 | })
37 | }
38 | }}
39 | />
40 |
41 |
49 | dispatch({
50 | type: "query/SEARCH",
51 | payload: e.currentTarget.value,
52 | })
53 | }
54 | onKeyUp={(e) => {
55 | if (e.key === "Enter") {
56 | dispatch({
57 | type: 'loading/START'
58 | });
59 |
60 | try {
61 | setTimeout(() => {
62 | inputWork(state.query).then((weather) => {
63 | dispatch({
64 | type: "query/SUBMIT",
65 | payload: weather,
66 | });
67 | });
68 | }, 750)
69 | } catch {
70 | dispatch({
71 | type: 'query/FAIL'
72 | })
73 | }
74 | }
75 | }}
76 | />
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/NavBar/NavBar.scss:
--------------------------------------------------------------------------------
1 | .nav-bar {
2 | width: 100vw;
3 | height: 29px;
4 | z-index: 12;
5 | position: absolute;
6 | top: 0;
7 | display: flex;
8 | background-color: rgba(0, 0, 0, 0.25);
9 |
10 | &::after {
11 | content: "";
12 | position: absolute;
13 | inset: 0.01%;
14 | height: inherit;
15 | width: inherit;
16 | z-index: -1;
17 | background-color: black;
18 | opacity: 0.075;
19 | }
20 |
21 | .right {
22 | display: flex;
23 | align-items: center;
24 | font-size: 0.825em;
25 | font-family: "SF Regular";
26 | position: absolute;
27 | right: 8px;
28 | top: 2px;
29 |
30 | .date {
31 | margin-right: 9px;
32 | }
33 |
34 | .settings {
35 | height: 26px;
36 | fill: white;
37 | padding: 5px 8px;
38 | margin-right: 9px;
39 | cursor: url("../../resources/images/pointing.png"), auto;
40 |
41 | path {
42 | pointer-events: none;
43 | }
44 | }
45 | }
46 | }
47 |
48 | .section {
49 | padding: 5px 8px;
50 | font-size: 13px;
51 | border: none;
52 | border-radius: 6px;
53 | font-family: "SF Regular";
54 | color: white;
55 | cursor: url("../../resources/images/pointing.png"), auto;
56 | background-position: 50% 50%;
57 | transition: 2s all;
58 | position: relative;
59 | }
60 |
61 | .not-selected {
62 | background-color: "";
63 | background-size: "5px 5px";
64 | width: 5px;
65 | height: 5px;
66 | border-radius: 6px;
67 | transition: 0.175s all;
68 | position: absolute;
69 | top: 45%;
70 | left: 45%
71 | }
72 |
73 | .selected-logo {
74 | background-color: rgba(255, 255, 255, 0.25);
75 | width: 37px;
76 | border-radius: 6px;
77 | height: 29px;
78 | position: absolute;
79 | top: 0;
80 | left: 0;
81 | transition: 0.175s all;
82 | background-size: "29px 35px";
83 | pointer-events: none;
84 | }
85 |
86 | .selected-finder {
87 | background-color: rgba(255, 255, 255, 0.25);
88 | width: 58px;
89 | border-radius: 6px;
90 | height: 29px;
91 | position: absolute;
92 | top: 0;
93 | left: 0;
94 | transition: 0.175s all;
95 | background-size: "29px 35px";
96 | pointer-events: none;
97 | }
98 |
99 | .selected-file {
100 | background-color: rgba(255, 255, 255, 0.25);
101 | width: 38px;
102 | border-radius: 6px;
103 | height: 29px;
104 | position: absolute;
105 | top: 0;
106 | left: 0;
107 | transition: 0.175s all;
108 | background-size: "29px 35px";
109 | pointer-events: none;
110 | }
111 |
112 | .selected-edit {
113 | background-color: rgba(255, 255, 255, 0.25);
114 | width: 39px;
115 | border-radius: 6px;
116 | height: 29px;
117 | position: absolute;
118 | top: 0;
119 | left: 0;
120 | transition: 0.175s all;
121 | background-size: "29px 35px";
122 | pointer-events: none;
123 | }
124 |
125 | .selected-view {
126 | background-color: rgba(255, 255, 255, 0.25);
127 | width: 46px;
128 | border-radius: 6px;
129 | height: 29px;
130 | position: absolute;
131 | top: 0;
132 | left: 0;
133 | transition: 0.175s all;
134 | background-size: "29px 35px";
135 | pointer-events: none;
136 | }
137 |
138 | .selected-go {
139 | background-color: rgba(255, 255, 255, 0.25);
140 | width: 33px;
141 | border-radius: 6px;
142 | height: 29px;
143 | position: absolute;
144 | top: 0;
145 | left: 0;
146 | transition: 0.175s all;
147 | background-size: "29px 35px";
148 | pointer-events: none;
149 | }
150 |
151 | .selected-window {
152 | background-color: rgba(255, 255, 255, 0.25);
153 | width: 65px;
154 | border-radius: 6px;
155 | height: 29px;
156 | position: absolute;
157 | top: 0;
158 | left: 0;
159 | transition: 0.175s all;
160 | background-size: "29px 35px";
161 | pointer-events: none;
162 | }
163 |
164 | .selected-help {
165 | background-color: rgba(255, 255, 255, 0.25);
166 | width: 44px;
167 | border-radius: 6px;
168 | height: 29px;
169 | position: absolute;
170 | top: 0;
171 | left: 0;
172 | transition: 0.175s all;
173 | background-size: "29px 35px";
174 | pointer-events: none;
175 | }
176 |
177 | .finder {
178 | font-family: "SF Bold";
179 | margin-right: 4px;
180 | }
181 |
182 | .logo {
183 | margin-left: 10px;
184 | padding: 5px 12px;
185 | margin-right: 8px;
186 | }
187 |
188 |
189 | .apple {
190 | height: 16px;
191 | }
192 |
193 | .not-selected {
194 | pointer-events: none;
195 | }
--------------------------------------------------------------------------------
/weather-forecast/src/components/NavBar/NavBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect } from "react";
2 | import { store } from "../../App";
3 | import "./NavBar.scss";
4 | import { ReactComponent as Settings } from "../../resources/images/svg/settings.svg";
5 | import getDate from "../../utils/helpers/getDate";
6 | import DropdownComponent from "../DropdownComponent/DropdownComponent";
7 | import SettingsDropdown from "../SettingsDropdown/SettingsDropdown";
8 | import { AnimatePresence, motion } from "framer-motion";
9 |
10 | export default function () {
11 | const [state, dispatch] = useContext(store);
12 |
13 | useEffect(() => {
14 | dispatch({
15 | type: "date/SET",
16 | });
17 | }, []);
18 |
19 | setInterval(() => {
20 | dispatch({
21 | type: "date/SET",
22 | });
23 | }, 60000);
24 |
25 | const dispatchAction = (e: React.MouseEvent {
20 | dispatch({
21 | type: 'loading/START'
22 | })
23 |
24 | try {
25 | setTimeout(() => {
26 | inputWork(state.query).then((weather) => {
27 | dispatch({
28 | type: "query/SUBMIT",
29 | payload: weather,
30 | });
31 | });
32 | }, 750)
33 | } catch {
34 | dispatch({
35 | type: 'query/FAIL'
36 | })
37 | }
38 | }}
39 | />
40 |
41 |
49 | dispatch({
50 | type: "query/SEARCH",
51 | payload: e.currentTarget.value,
52 | })
53 | }
54 | onKeyUp={(e) => {
55 | if (e.key === "Enter") {
56 | dispatch({
57 | type: 'loading/START'
58 | });
59 |
60 | try {
61 | setTimeout(() => {
62 | inputWork(state.query).then((weather) => {
63 | dispatch({
64 | type: "query/SUBMIT",
65 | payload: weather,
66 | });
67 | });
68 | }, 750)
69 | } catch {
70 | dispatch({
71 | type: 'query/FAIL'
72 | })
73 | }
74 | }
75 | }}
76 | />
77 |
52 |
144 |
145 | );
146 | }
147 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/Page/Page.scss:
--------------------------------------------------------------------------------
1 | $systemColor: var(--user-color);
2 |
3 | .page {
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | height: 100vh;
9 | width: 100vw;
10 | -webkit-transition: background-image 0.3s ease-in-out;
11 | transition: background-image 0.3s ease-in-out;
12 | background-image: url("../../resources/images/catalina.jpg");
13 | overflow: hidden;
14 | background-repeat: no-repeat;
15 |
16 | * {
17 | user-select: none;
18 | }
19 |
20 | .weather-window {
21 | height: 668px;
22 | width: 45.785vw;
23 | }
24 |
25 | .window {
26 | border: 1px solid #3f3f47;
27 | background-color: #1e1f23;
28 | border-radius: 4px;
29 | box-sizing: border-box;
30 | display: flex;
31 | transition: transform none;
32 | flex-direction: column;
33 | align-items: center;
34 | box-shadow: 0px 8px 15px #050505, 0px 12px 15px #050505,
35 | 0px 40px 70px #050505;
36 | margin-bottom: 10.35vh;
37 | opacity: 1;
38 | }
39 |
40 | .window-closed {
41 | border: 1px solid #3f3f47;
42 | background-color: #1e1f23;
43 | border-radius: 4px;
44 | transition: 0.4s all;
45 | transform: scale(0.01) !important;
46 | box-sizing: border-box;
47 | display: flex;
48 | flex-direction: column;
49 | align-items: center;
50 | box-shadow: 0px 8px 15px #050505, 0px 12px 15px #050505,
51 | 0px 40px 70px #050505;
52 | margin-bottom: 6.5vh;
53 | opacity: 0;
54 | }
55 |
56 | .window-minimized {
57 | border: 1px solid #3f3f47;
58 | background-color: #1e1f23;
59 | border-radius: 4px;
60 | transition: 0.7s all;
61 | margin-top: 900px;
62 | margin-left: 200px;
63 | transform: scale(0.01) !important;
64 | box-sizing: border-box;
65 | display: flex;
66 | flex-direction: column;
67 | align-items: center;
68 | box-shadow: 0px 8px 15px #050505, 0px 12px 15px #050505,
69 | 0px 40px 70px #050505;
70 | margin-bottom: 6.5vh;
71 | opacity: 0;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/Page/Page.tsx:
--------------------------------------------------------------------------------
1 | import React, { Children, useContext, MouseEvent, useEffect } from "react";
2 | import { store } from "../../App";
3 | import checkDropdown from "../../utils/helpers/checkDropdown";
4 | import checkSettings from "../../utils/helpers/checkSettings";
5 | import openContextMenu from "../../utils/helpers/openContextMenu";
6 | import wallpapers from "../../utils/helpers/wallpapers";
7 | import BootUpWindow from "../BootUpWindow/BootUpWindow";
8 | import "./Page.scss";
9 | import updateSysColor from "../../utils/helpers/updateSysColor";
10 |
11 | export default function Page({ children }: any) {
12 | const [state, dispatch] = useContext(store);
13 |
14 | const conditionalClick = (e: React.MouseEvent) => {
15 | const contextMenu = document.getElementById("context-menu");
16 | // enable animation on left click after contextMenu has been displayed
17 | contextMenu!.style.transition = "0.2s all";
18 | contextMenu!.style.opacity = "0";
19 | contextMenu!.style.visibility = "hidden";
20 |
21 | const isDropdown = checkDropdown(e);
22 | if (isDropdown === false) {
23 | dispatch({
24 | type: "section/RESET",
25 | });
26 | }
27 |
28 | const isSettings = checkSettings(e);
29 | if (isSettings === false) {
30 | dispatch({
31 | type: "settings/CLOSE",
32 | });
33 | }
34 | };
35 |
36 | useEffect(() => {
37 | // check localStorage
38 |
39 | let color = localStorage.getItem("color");
40 | let boot = JSON.parse(sessionStorage.getItem("boot")!);
41 | let wallpaper = JSON.parse(localStorage.getItem("wallpaper")!);
42 | if (boot !== null && boot !== undefined) {
43 | dispatch({
44 | type: "state/BOOT",
45 | payload: boot.status,
46 | });
47 | }
48 | if (wallpaper !== null && wallpaper !== undefined) {
49 | let updatedWallpaper = {
50 | open: false,
51 | name: wallpaper.name,
52 | surname: wallpaper.surname,
53 | preview: wallpaper.preview,
54 | src: wallpaper.src,
55 | };
56 |
57 | dispatch({
58 | type: "state/LOCAL",
59 | payload: updatedWallpaper,
60 | });
61 | const page = document.getElementById("page");
62 | const url = require(`../../resources/images/${wallpaper.surname}.jpg`);
63 | page!.style.backgroundImage = `url(${url})`;
64 | }
65 | if (color !== null && color !== undefined) {
66 | updateSysColor(color);
67 |
68 | dispatch({
69 | type: "state/LOCALCOLOR",
70 | payload: color,
71 | });
72 | }
73 |
74 | // preload images to avoid flashing white background when switching to a
75 | // wallpaper that hasn't yet been loaded
76 | wallpapers.forEach((picture) => {
77 | let img = new Image();
78 | img.src = picture.src;
79 | });
80 | }, []);
81 |
82 | useEffect(() => {
83 | // update localStorage
84 |
85 | if (state.booting) {
86 | return;
87 | }
88 | localStorage.setItem("color", state.settings.color);
89 | sessionStorage.setItem(
90 | "boot",
91 | JSON.stringify({
92 | status: state.booting,
93 | })
94 | );
95 | localStorage.setItem("wallpaper", JSON.stringify(state.settings.wallpaper));
96 | }, [state]);
97 |
98 | return (
99 |
53 | ![Apple Logo]({require("../../resources/images/apple.png")})
58 |
63 | {state.section === "logo" ?
65 |
66 |
58 |
63 | {state.section === "logo" ?
67 | Finder
68 |
73 | {state.section === "finder" ?
75 |
76 |
77 | File
78 |
83 | {state.section === "file" ?
85 |
86 |
87 | Edit
88 |
93 | {state.section === "edit" ?
95 |
96 |
97 | View
98 |
103 | {state.section === "view" ?
105 |
106 | Go
107 |
112 | {state.section === "go" ?
114 |
115 |
116 | Window
117 |
122 | {state.section === "windows" ?
124 |
125 |
126 | Help
127 |
132 | {state.section === "help" ?
134 |
135 |
136 |
143 |
137 |
140 | {state.date[0]}
141 |{state.date[1]}
142 |
105 | {children}
106 | {state.booting ?
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/QueryBoard/QueryBoard.scss:
--------------------------------------------------------------------------------
1 | .query-board {
2 | width: 100%;
3 | display: flex;
4 | cursor: url("../../resources//images//grabbing.png"), auto;
5 | align-items: center;
6 | border-top: 1px solid #696971;
7 | border-bottom: 1px solid #141318;
8 | border-radius: 4px;
9 | border-bottom-left-radius: 0px;
10 | border-bottom-right-radius: 0px;
11 | background: rgb(43, 42, 47);
12 | background: linear-gradient(
13 | 360deg,
14 | rgba(43, 42, 47, 1) 0%,
15 | rgba(53, 53, 55, 1) 100%
16 | );
17 | box-sizing: border-box;
18 | height: 2.55em;
19 | padding-left: 13px;
20 |
21 | .fullscreen-btn {
22 | margin-left: 0.4em;
23 | width: 41px !important;
24 |
25 | .fullscreen {
26 | height: 18px;
27 | margin-bottom: 1px;
28 | }
29 | }
30 |
31 | .dot {
32 | border-radius: 9999px;
33 | border: none;
34 | height: 0.83em;
35 | width: 0.81em;
36 | margin-right: 9px;
37 | cursor: url("../../resources/images/pointing.png"), auto;
38 |
39 | &:hover {
40 | box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.22);
41 | }
42 | }
43 |
44 | .red {
45 | background-color: rgb(255, 69, 58);
46 | }
47 |
48 | .yellow {
49 | background-color: rgb(255, 214, 10);
50 | }
51 |
52 | .green {
53 | background-color: rgb(48, 209, 88);
54 | margin-right: 0.9em;
55 | }
56 |
57 | .nav {
58 | height: 24px;
59 | width: 27px;
60 | background-color: #5b5c60;
61 | border-radius: 4px;
62 | border-top: 1px solid #747579;
63 | margin-right: 2px;
64 | display: flex;
65 | justify-content: center;
66 | align-items: center;
67 | transition: 0.25s all;
68 | cursor: url("../../resources/images/pointing.png"), auto;
69 |
70 | &:hover {
71 | background-color: #636466;
72 | }
73 |
74 | &:active {
75 | transform: scale(0.95);
76 | }
77 |
78 | .arrow {
79 | height: 14px;
80 | margin-bottom: 1px;
81 | }
82 |
83 | .forward {
84 | margin-left: 1px;
85 | fill: #848589;
86 | }
87 |
88 | .back {
89 | rotate: (180deg);
90 | fill: white;
91 | }
92 |
93 | .chat {
94 | height: 16px;
95 | width: 18px;
96 | margin-bottom: 1px;
97 | }
98 |
99 | .cat {
100 | height: 20px;
101 | margin-bottom: 1px;
102 | fill: white;
103 | }
104 | }
105 |
106 | .chat-btn {
107 | margin-left: 0.5625em;
108 | margin-right: 1.365em;
109 | width: 40px;
110 | }
111 |
112 | .github-btn {
113 | width: 40px;
114 | margin-right: 0.525em;
115 | }
116 |
117 | .forward-btn {
118 | cursor: not-allowed;
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/QueryBoard/QueryBoard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./QueryBoard.scss";
3 | import InputField from "../InputField/InputField";
4 | import QueryBoardLinks from "../QueryBoardLinks/QueryBoardLinks";
5 | import { useDisclosure } from "@chakra-ui/react";
6 | import ChakraAlert from "../ChakraAlert/ChakraAlert";
7 | import ChakraCookies from "../ChakraCookies/ChakraCookies";
8 |
9 | export default function QueryBoard() {
10 | // Hooks for use in ChakraUI components
11 | const { isOpen, onOpen, onClose } = useDisclosure();
12 | const cancelRef = React.useRef(null);
13 |
14 | return (
15 |
16 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/QueryBoardLinks/QueryBoardLinks.scss:
--------------------------------------------------------------------------------
1 | .cookies-btn {
2 | margin-left: 10em;
3 | width: 41px !important;
4 |
5 | .cookies {
6 | height: 19px;
7 | margin-bottom: 1px;
8 | }
9 | }
10 |
11 | .fullscreen-btn {
12 | margin-left: 0.4em;
13 | width: 41px !important;
14 |
15 | .fullscreen {
16 | height: 18px;
17 | margin-bottom: 2px;
18 | }
19 | }
20 |
21 | .dot {
22 | border-radius: 9999px;
23 | border: none;
24 | height: 0.83em;
25 | width: 0.81em;
26 | margin-right: 9px;
27 | cursor: url("../../resources/images/pointing.png"), auto;
28 | transition: 0.2s all;
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 |
33 | .close,
34 | .minimize,
35 | .stretch {
36 | opacity: 0;
37 | transition: 0.15s all;
38 | pointer-events: none;
39 | }
40 | }
41 |
42 | .red {
43 | background-color: rgb(255, 69, 58);
44 | }
45 |
46 | .yellow {
47 | background-color: rgb(255, 214, 10);
48 | }
49 |
50 | .green {
51 | background-color: rgb(48, 209, 88);
52 | margin-right: 0.9em;
53 | }
54 |
55 | .nav {
56 | height: 24px;
57 | width: 27px;
58 | background-color: #5b5c60;
59 | border-radius: 4px;
60 | border-top: 1px solid #747579;
61 | margin-right: 2px;
62 | display: flex;
63 | justify-content: center;
64 | align-items: center;
65 | transition: 0.25s all;
66 | cursor: url("../../resources/images/pointing.png"), auto;
67 | &:hover {
68 | background-color: #636466;
69 | }
70 |
71 | .arrow {
72 | height: 14px;
73 | margin-bottom: 1px;
74 | }
75 |
76 | .forward {
77 | margin-left: 1px;
78 | fill: #848589;
79 | }
80 |
81 | .back {
82 | rotate: (180deg);
83 | fill: white;
84 | }
85 |
86 | .chat {
87 | height: 16px;
88 | width: 18px;
89 | margin-bottom: 1px;
90 | }
91 |
92 | .cat {
93 | height: 20px;
94 | margin-bottom: 1px;
95 | fill: white;
96 | }
97 | }
98 |
99 | .chat-btn {
100 | margin-left: 0.5625em;
101 | margin-right: 1.365em;
102 | width: 40px;
103 | }
104 |
105 | .github-btn {
106 | width: 40px;
107 | margin-right: 0.525em;
108 | }
109 |
110 | .forward-btn {
111 | cursor: not-allowed;
112 | }
113 |
114 | .dots {
115 | display: flex;
116 | }
117 |
118 | .dots:hover .dot {
119 | transform: scale(1.16);
120 |
121 | .close,
122 | .minimize,
123 | .stretch {
124 | opacity: 1;
125 | }
126 | }
127 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/QueryBoardLinks/QueryBoardLinks.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ReactComponent as Arrow } from "../../resources/images/svg/arrow.svg";
3 | import { ReactComponent as Chat } from "../../resources/images/svg/chat.svg";
4 | import { ReactComponent as Cat } from "../../resources/images/svg/githubcat.svg";
5 | import { ReactComponent as Close } from "../../resources/images/svg/close.svg";
6 | import { ReactComponent as Minimize } from "../../resources/images/svg/minimize.svg";
7 | import { ReactComponent as Stretch } from "../../resources/images/svg/stretch.svg";
8 | import "./QueryBoardLinks.scss";
9 | import toggleVisibility from "../../utils/helpers/toggleVisibility";
10 | import toggleMinimize from "../../utils/helpers/toggleMinimize";
11 |
12 | export default function QueryBoardLinks() {
13 | return (
14 | <>
15 |
16 |
26 |
27 |
30 |
33 |
34 |
35 |
42 |
43 |
44 |
45 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/SelectedDayForecast/SelectedDayForecast.scss:
--------------------------------------------------------------------------------
1 | @keyframes appear {
2 | 0% {
3 | opacity: 0;
4 | }
5 | 100% {
6 | opacity: 1;
7 | }
8 | }
9 |
10 |
11 | .selected-day-forecast {
12 | border-radius: 26px;
13 | background: rgb(34, 39, 60);
14 | border-top-left-radius: 0px;
15 | border-top-right-radius: 0px;
16 | background: rgb(34, 39, 60);
17 | background: linear-gradient(
18 | 0deg,
19 | rgba(34, 39, 60, 1) 0%,
20 | rgba(18, 22, 47, 1) 100%
21 | );
22 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
23 | padding: 4px 20px 4px 20px;
24 | transition: 0.25s all;
25 |
26 | .intervals {
27 | display: flex;
28 | justify-content: center;
29 | gap: 16px;
30 | overflow: hidden;
31 |
32 | .interval-container {
33 | display: flex;
34 | padding: 10px 16px;
35 | flex-direction: column;
36 | justify-content: center;
37 | align-items: center;
38 | gap: 8px;
39 | transition: 0.25s all;
40 | animation: 0.4s ease-out 0s 1 appear;
41 |
42 | &:hover {
43 | transform: translateY(-10px)
44 | }
45 |
46 | .time {
47 | font-family: "SF Semibold";
48 | color: rgba(255, 255, 255, 0.7);
49 | font-size: 18px;
50 | }
51 |
52 | .current-con {
53 | display: flex;
54 | justify-content: center;
55 | align-items: center;
56 |
57 | * {
58 | height: 40px;
59 | width: 40px;
60 | }
61 | }
62 |
63 | .temp {
64 | margin-top: 2px;
65 | font-family: "SF Semibold";
66 | color: white;
67 | font-size: 18px;
68 | }
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/SelectedDayForecast/SelectedDayForecast.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { store } from "../../App";
3 | import "./SelectedDayForecast.scss";
4 | // SVG Imports
5 | import { ReactComponent as Ash } from "../../resources/images/svg/weather/Ash.svg";
6 | import { ReactComponent as Clear } from "../../resources/images/svg/weather/Clear.svg";
7 | import { ReactComponent as ClearNight } from "../../resources/images/svg/weather/Clear_night.svg";
8 | import { ReactComponent as Clouds } from "../../resources/images/svg/weather/Clouds.svg";
9 | import { ReactComponent as Drizzle } from "../../resources/images/svg/weather/Drizzle.svg";
10 | import { ReactComponent as Dust } from "../../resources/images/svg/weather/Dust.svg";
11 | import { ReactComponent as Fog } from "../../resources/images/svg/weather/Fog.svg";
12 | import { ReactComponent as Haze } from "../../resources/images/svg/weather/Haze.svg";
13 | import { ReactComponent as Mist } from "../../resources/images/svg/weather/Mist.svg";
14 | import { ReactComponent as Rain } from "../../resources/images/svg/weather/Rain.svg";
15 | import { ReactComponent as Sand } from "../../resources/images/svg/weather/Sand.svg";
16 | import { ReactComponent as Smoke } from "../../resources/images/svg/weather/Smoke.svg";
17 | import { ReactComponent as Snow } from "../../resources/images/svg/weather/Snow.svg";
18 | import { ReactComponent as Squall } from "../../resources/images/svg/weather/Squall.svg";
19 | import { ReactComponent as Thunderstorm } from "../../resources/images/svg/weather/Thunderstorm.svg";
20 | import { ReactComponent as Tornado } from "../../resources/images/svg/weather/Tornado.svg";
21 | import nightTimes from "../../utils/helpers/nightTimes";
22 |
23 | export default function SelectedDayForecast() {
24 | const [state, dispatch] = useContext(store);
25 |
26 | const returnCurrentCon = (weather: string, i: number) => {
27 | switch (weather) {
28 | case "Clear":
29 | if (
30 | nightTimes.includes(
31 | state.selected
32 | ? state.selected[i].hours
33 | : state.weather.forecast[0][i].hours
34 | )
35 | ) {
36 | return
17 |
19 |
20 |
22 |
23 |
25 |
72 |
73 | {state.selected
74 | ? state.selected.map((interval: any, i: number) => {
75 | return (
76 |
103 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/SelectedWeatherSlice/SelectedWeatherSlice.scss:
--------------------------------------------------------------------------------
1 | @keyframes appear {
2 | 0% {
3 | opacity: 0;
4 | }
5 | 100% {
6 | opacity: 1;
7 | }
8 | }
9 |
10 |
11 | .selected-weather-slice {
12 | width: inherit;
13 | border: none;
14 | border-radius: 26px;
15 | background: rgb(18, 22, 47);
16 | border-bottom-left-radius: 0px;
17 | border-bottom-right-radius: 0px;
18 | background: rgb(18, 22, 47);
19 | background: linear-gradient(
20 | 0deg,
21 | rgba(18, 22, 47, 1) 0%,
22 | rgba(0, 5, 34, 1) 100%
23 | );
24 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
25 | padding: 22px 34px 26px 34px;
26 | transition: 0.25s all;
27 |
28 | .top {
29 | display: flex;
30 | width: 100%;
31 | justify-content: space-between;
32 | animation: 0.4s ease-out 0s 1 appear;
33 |
34 | .location-container {
35 | display: flex;
36 | gap: 12px;
37 | align-items: center;
38 |
39 | .text {
40 | animation: 0.4s ease-out 0s 1 appear;
41 | }
42 |
43 | h3 {
44 | color: white;
45 | font-size: 26px;
46 | font-family: "SF Bold";
47 | cursor: url("../../resources/images/pointing.png"), auto;
48 | }
49 |
50 | .location {
51 | height: 22px;
52 | cursor: pointer;
53 | transition: 0.25s all;
54 | cursor: url("../../resources/images/pointing.png"), auto;
55 |
56 | &:hover {
57 | transform: scale(1.05);
58 | }
59 | }
60 | }
61 |
62 | .current-con {
63 | padding-top: 2px;
64 |
65 | * {
66 | height: 36px;
67 | width: 36px;
68 | fill: white;
69 | transition: 0.25s all;
70 | cursor: url("../../resources/images/pointing.png"), auto;
71 |
72 | &:hover {
73 | transform: scale(1.03);
74 | }
75 | }
76 | }
77 | }
78 |
79 | .details {
80 | display: flex;
81 | justify-content: space-between;
82 | animation: 0.4s ease-out 0s 1 appear;
83 |
84 | h1 {
85 | color: white;
86 | font-size: 72px;
87 | font-family: "SF Light";
88 | margin-top: -22px;
89 | }
90 |
91 | .data {
92 | margin-top: 12px;
93 | display: flex;
94 | flex-direction: column;
95 | justify-content: flex-end;
96 | text-align: end;
97 | animation: 0.4s ease-out 0s 1 appear;
98 |
99 | h3 {
100 | color: white;
101 | font-size: 17px;
102 | font-family: "SF Medium";
103 | }
104 |
105 | .con {
106 | margin-bottom: 4px;
107 | font-size: 21px;
108 | }
109 |
110 | .humidity-container,
111 | .rain-container,
112 | .temp-container {
113 | margin-top: -2px;
114 | padding-top: 0;
115 | padding-bottom: 0;
116 | display: flex;
117 | align-items: center;
118 | gap: 4px;
119 | text-align: end;
120 | justify-content: flex-end;
121 |
122 | h3 {
123 | font-family: "SF Regular";
124 | }
125 |
126 | .icon {
127 | height: 20px;
128 | fill: white;
129 | margin-bottom: 1px;
130 | }
131 | }
132 |
133 | .temp-container {
134 | h3.high {
135 | margin-right: 6px;
136 | }
137 | }
138 | }
139 | }
140 | }
141 |
142 | .temps {
143 | h3 {
144 | font-family: "SF Light";
145 | margin-top: -2px;
146 | margin-bottom: 4px;
147 | animation: 0.4s ease-out 0s 1 appear;
148 | }
149 |
150 | h1 {
151 | animation: 0.4s ease-out 0s 1 appear;
152 | }
153 | }
154 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/SelectedWeatherSlice/SelectedWeatherSlice.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { store } from "../../App";
3 | import "./SelectedWeatherSlice.scss";
4 | // SVG Imports
5 | import Search from "../../resources/images/svg/search.svg";
6 | import { ReactComponent as Location } from "../../resources/images/svg/location.svg";
7 | import { ReactComponent as Ash } from "../../resources/images/svg/weather/Ash.svg";
8 | import { ReactComponent as Clear } from "../../resources/images/svg/weather/Clear.svg";
9 | import { ReactComponent as ClearNight } from "../../resources/images/svg/weather/Clear_night.svg";
10 | import { ReactComponent as Clouds } from "../../resources/images/svg/weather/Clouds.svg";
11 | import { ReactComponent as Drizzle } from "../../resources/images/svg/weather/Drizzle.svg";
12 | import { ReactComponent as Dust } from "../../resources/images/svg/weather/Dust.svg";
13 | import { ReactComponent as Fog } from "../../resources/images/svg/weather/Fog.svg";
14 | import { ReactComponent as Haze } from "../../resources/images/svg/weather/Haze.svg";
15 | import { ReactComponent as Mist } from "../../resources/images/svg/weather/Mist.svg";
16 | import { ReactComponent as Rain } from "../../resources/images/svg/weather/Rain.svg";
17 | import { ReactComponent as Sand } from "../../resources/images/svg/weather/Sand.svg";
18 | import { ReactComponent as Smoke } from "../../resources/images/svg/weather/Smoke.svg";
19 | import { ReactComponent as Snow } from "../../resources/images/svg/weather/Snow.svg";
20 | import { ReactComponent as Squall } from "../../resources/images/svg/weather/Squall.svg";
21 | import { ReactComponent as Thunderstorm } from "../../resources/images/svg/weather/Thunderstorm.svg";
22 | import { ReactComponent as Tornado } from "../../resources/images/svg/weather/Tornado.svg";
23 | import { ReactComponent as Humidity } from "../../resources/images/svg/weather/humidity.svg";
24 | import { ReactComponent as Wind } from "../../resources/images/svg/weather/wind.svg";
25 | import { ReactComponent as Highest } from "../../resources/images/svg/weather/highest.svg";
26 | import { ReactComponent as Lowest } from "../../resources/images/svg/weather/lowest.svg";
27 | import { ReactComponent as Raindrops } from "../../resources/images/svg/weather/raindrops.svg";
28 | import nightTimes from "../../utils/helpers/nightTimes";
29 |
30 | export default function SelectedWeatherSlice() {
31 | const [state, dispatch] = useContext(store);
32 |
33 | const returnCurrentCon = (weather: string) => {
34 | switch (weather) {
35 | case "Clear":
36 | if (
37 | nightTimes.includes(
38 | state.selected
39 | ? state.selected[0].hours
40 | : state.weather.current.hours
41 | )
42 | ) {
43 | return
77 |
85 | );
86 | })
87 | : state.weather.forecast[0]
88 | ? state.weather.forecast[0].map((interval: any, i: number) => {
89 | return (
90 | {interval.hours}
78 | 79 |
80 | {returnCurrentCon(interval.weather, i)}
81 |
82 |
83 | {interval.temp}°
84 |
91 |
99 | );
100 | })
101 | : null}
102 | {interval.hours}
92 | 93 |
94 | {returnCurrentCon(interval.weather, i)}
95 |
96 |
97 | {interval.temp}°
98 |
79 |
95 |
96 |
146 | );
147 | }
148 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/WallpaperMenu/WallpaperMenu.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import Draggable from "react-draggable";
3 | import { store } from "../../App";
4 | import "./WallpaperMenu.scss";
5 | import { ReactComponent as Close } from "../../resources/images/svg/close.svg";
6 | import { ReactComponent as Minimize } from "../../resources/images/svg/minimize.svg";
7 | import { ReactComponent as Stretch } from "../../resources/images/svg/stretch.svg";
8 | import wallpapers from "../../utils/helpers/wallpapers";
9 | import toggleWallpaperVis from "../../utils/helpers/toggleWallpaperVis";
10 | import toggleWallpaperMin from "../../utils/helpers/toggleWallpaperMin";
11 | import wallpaperObjectType from "../../types/wallpaperObjectType";
12 | import returnColor from "../../utils/helpers/returnColor";
13 | import toggleBorder from "../../utils/helpers/toggleBorder";
14 |
15 | export default function WallpaperMenu() {
16 | const [state, dispatch] = useContext(store);
17 |
18 | const changeWallpaper = (wallpaper: any) => {
19 | dispatch({
20 | type: "wallpaper/CHANGE",
21 | payload: {
22 | name: wallpaper.name,
23 | surname: wallpaper.surname,
24 | preview: `../../resources/images/preview_${wallpaper.surname}.jpg`,
25 | src: `../../resources/images/${wallpaper.surname}.jpg`,
26 | },
27 | });
28 |
29 | const page = document.getElementById("page");
30 | const url = require(`../../resources/images/${wallpaper.surname}.jpg`);
31 | page!.style.backgroundImage = `url(${url})`;
32 | };
33 |
34 | return (
35 |
97 |
145 |
98 |
106 |
107 | {state.date[1]}
99 |100 | {state.selected 101 | ? state.selected[0].temp 102 | : state.weather.current.temp} 103 | ° 104 |
105 |
108 |
144 | 109 | {state.selected 110 | ? state.selected[0].weather 111 | : state.weather.current.weather} 112 |
113 | 114 |
115 |
123 |
124 | 116 | Humidity:{" "} 117 | {state.selected 118 | ? state.selected[0].humidity 119 | : state.weather.current.humidity} 120 | % 121 |
122 |
125 |
133 |
134 | 126 | Rain Probability:{" "} 127 | {state.selected 128 | ? state.selected[0].rain 129 | : state.weather.current.rain} 130 | % 131 |
132 |
135 |
143 | 136 | Wind Speed:{" "} 137 | {state.selected 138 | ? state.selected[0].wind 139 | : state.weather.current.wind} 140 | km/h 141 |
142 |
45 |
46 |
59 |
60 |
61 |
107 |
108 | ) : (
109 |
110 | )}
111 |
47 |
57 | Wallpaper
58 |
48 |
50 |
51 |
53 |
54 |
56 |
62 | 
71 |
79 |
80 | {state.settings.wallpaper.name}
72 |Dynamic Wallpaper
73 | 74 |
75 |
76 |
78 | Change dark/light mode as wallpapers change
77 |
81 |
106 | Dynamic Wallpapers
82 | 83 |
84 | {wallpapers.map(
85 | (wallpaperObject: wallpaperObjectType, i: number) => {
86 | return (
87 |
105 |
88 | })
changeWallpaper(wallpaperObject)}
95 | style={{
96 | borderColor: returnColor(state.settings.color),
97 | }}
98 | />
99 |
101 | );
102 | }
103 | )}
104 | changeWallpaper(wallpaperObject)}
95 | style={{
96 | borderColor: returnColor(state.settings.color),
97 | }}
98 | />
99 | {wallpaperObject.name}
100 |
33 |
34 | {state.loading ? (
35 |
42 |
44 | ) : state.weather.current === undefined ? (
45 |
53 |
55 | Sorry, we couldn't find any weather data for the city you
56 | provided.
57 |
60 |
61 | ) : (
62 | <>
63 |
72 |
75 |
76 |
84 |
86 |
87 | )}
88 |
89 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/weather-forecast/src/components/Window/Window.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gianlucajahn/macOS-react/849af2a3a8e1dc133c6fa3573a1c46cf429b16ea/weather-forecast/src/components/Window/Window.scss
--------------------------------------------------------------------------------
/weather-forecast/src/components/Window/Window.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Window.scss";
3 |
4 | export default function Window({ children }: any) {
5 |
6 | return (
7 | City not found
54 |
55 | Sorry, we couldn't find any weather data for the city you
56 | provided.
57 |
58 | Please try another one.
59 |
60 |
8 | {children}
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/weather-forecast/src/custom.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 | const src: string;
3 | export default src;
4 | }
--------------------------------------------------------------------------------
/weather-forecast/src/framer-motion.d.ts:
--------------------------------------------------------------------------------
1 | declare module "framer-motion/dist/framer-motion" {
2 | export * from "framer-motion";
3 | }
4 |
--------------------------------------------------------------------------------
/weather-forecast/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --user-color: #0a85ff;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
8 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
9 | sans-serif;
10 | -webkit-font-smoothing: antialiased;
11 | -moz-osx-font-smoothing: grayscale;
12 | cursor: url("./resources//images/cursor.png"), auto;
13 | overflow-x: hidden;
14 | overflow-y: hidden !important;
15 | }
16 |
17 | code {
18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
19 | monospace;
20 | }
21 |
22 | @font-face {
23 | font-family: "SF Regular";
24 | src: local("sfregular"),
25 | url(./resources/fonts/sfregular.otf) format("opentype");
26 | }
27 |
28 | @font-face {
29 | font-family: "SF Medium";
30 | src: local("sfmedium"), url(./resources/fonts/sfmedium.otf) format("opentype");
31 | }
32 |
33 | @font-face {
34 | font-family: "SF Bold";
35 | src: local("sfbold"), url(./resources/fonts/sfbold.otf) format("opentype");
36 | }
37 |
38 | @font-face {
39 | font-family: "SF Semibold";
40 | src: local("sfsemibold"),
41 | url(./resources/fonts/sfsemibold.otf) format("opentype");
42 | }
43 |
44 | @font-face {
45 | font-family: "SF Light";
46 | src: local("sflight"), url(./resources/fonts/sflight.otf) format("opentype");
47 | }
48 |
--------------------------------------------------------------------------------
/weather-forecast/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 |
7 | const root = ReactDOM.createRoot(
8 | document.getElementById("root") as HTMLElement
9 | );
10 | root.render(
11 |