Skip to content

Commit 2ced68c

Browse files
BogachanKarabiyikBogachanKarabiyik
authored
Merge pull request #30 from ChicoState/demo-test
Bring main up to date with Demo 1
2 parents 2e48e05 + 6f4149f commit 2ced68c

File tree

17 files changed

+710
-50
lines changed

17 files changed

+710
-50
lines changed

‎package-lock.json‎

Lines changed: 32 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"@phosphor-icons/react": "^2.1.10",
1313
"@rsbuild/plugin-typed-css-modules": "^1.1.1",
14+
"openmeteo": "^1.2.1",
1415
"react": "^19.1.1",
1516
"react-dom": "^19.1.1",
1617
"typescript": "^5.9.2"

‎src/App.css‎

Lines changed: 81 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,30 @@ body {
1212
margin: 0;
1313
color: #fff;
1414
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
15-
background-image: linear-gradient(to bottom, #020917, #101725);
15+
background-image: url(https://images.unsplash.com/photo-1507166763745-bfe008fbb831?q=80&w=960&auto=format);
16+
background-size: cover;
1617
overflow: hidden;
1718
}
1819

1920
.content {
21+
width: 100svw;
22+
height: 100svh;
2023
display: flex;
2124
flex-flow: column nowrap;
22-
justify-content: center;
25+
/*justify-content: center;*/
2326
align-items: center;
2427
}
2528

29+
.content::before {
30+
content: "";
31+
position: absolute;
32+
pointer-events: none;
33+
width: 100%;
34+
height: 100%;
35+
backdrop-filter: brightness(1.25) hue-rotate(15deg) saturate(0.5) blur(10px);
36+
z-index: -1;
37+
}
38+
2639
.content h1 {
2740
font-size: 3.6rem;
2841
font-weight: 700;
@@ -34,20 +47,77 @@ body {
3447
opacity: 0.5;
3548
}
3649

37-
.test-box {
50+
.container {
3851
width: 100%;
3952
height: 100%;
40-
background-color: slategray;
53+
background-color: #0002;
4154
border-radius: 8px;
42-
border: 4px solid darkgray;
55+
border: 1px solid #fff2;
56+
57+
backdrop-filter: blur(40px);
58+
transform: translateZ(0);
59+
backface-visibility: hidden;
4360
}
4461

45-
.test-button {
46-
width: 200px;
47-
height: 40px;
48-
color: white;
49-
font-size: 1rem;
50-
font-weight: 700;
62+
.container::before {
63+
content: "";
64+
position: absolute;
65+
pointer-events: none;
66+
top: 0;
67+
left: 0;
68+
width: 100%;
69+
height: 100%;
70+
image-rendering: pixelated;
71+
background-image: url("assets/noise.webp");
72+
background-size: 128px 128px;
73+
border-radius: 8px;
74+
opacity: 0.025;
75+
}
76+
77+
.button {
78+
display: flex;
79+
align-items: center;
80+
gap: 4px;
81+
82+
padding: 0 12px;
83+
width: min-content;
84+
85+
height: 24px;
86+
color: #fffa;
87+
font-size: 0.8rem;
5188
cursor: pointer;
5289
user-select: none;
90+
91+
transition:
92+
border-color 0.15s,
93+
color 0.15s;
94+
}
95+
96+
.button:hover {
97+
border-color: #fff4;
98+
color: #fffc;
99+
100+
transition: 0.15s;
101+
}
102+
103+
.header {
104+
display: flex;
105+
flex-flow: row nowrap;
106+
align-items: center;
107+
justify-content: flex-end;
108+
109+
padding: 4px;
110+
111+
width: 100%;
112+
height: min-content;
113+
border-top: none;
114+
border-left: none;
115+
border-right: none;
116+
border-radius: 0;
117+
}
118+
119+
.row {
120+
display: flex;
121+
flex-flow: row nowrap;
122+
gap: 4px;
53123
}

‎src/App.tsx‎

Lines changed: 86 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,65 @@
11
import React, { useState } from "react";
2-
import { Grid } from "./Grid";
32
import Widget from "./Widget";
3+
import Menu from "./Menu";
4+
import { Grid } from "./Grid";
5+
import { Weather } from "./widgets/Weather";
46
import { Clock } from "./widgets/Clock";
7+
import { Search } from "./widgets/Search";
8+
import { Shortcut } from "./widgets/Shortcut";
59
import styles from "./App.css";
10+
import {
11+
PencilSimpleIcon,
12+
CheckIcon,
13+
XIcon,
14+
ListIcon,
15+
} from "@phosphor-icons/react";
616

717
const TestBox = () => {
8-
return <div className={styles.testBox}></div>;
18+
return <div className={styles.container}></div>;
919
};
1020

1121
const App = () => {
1222
const [editing, setEditing] = useState(false);
23+
const [menuOpen, setMenuOpen] = useState(false);
1324

1425
return (
1526
<div className={styles.content}>
16-
{/*Temporary button for testing edit mode*/}
17-
<button
18-
className={[styles.testBox, styles.testButton].join(" ")}
19-
onClick={() => {
20-
setEditing(!editing);
21-
}}
22-
>
23-
{editing ? "Disable" : "Enable"} Edit Mode
24-
</button>
27+
<div className={styles.header}>
28+
<div className={styles.row}>
29+
{editing && (
30+
<button
31+
className={[styles.container, styles.button].join(" ")}
32+
onClick={() => {
33+
setEditing(!editing);
34+
}}
35+
>
36+
<XIcon weight="bold"></XIcon>
37+
Cancel
38+
</button>
39+
)}
40+
41+
<button
42+
className={[styles.container, styles.button].join(" ")}
43+
onClick={() => {
44+
setEditing(!editing);
45+
}}
46+
>
47+
{editing && <CheckIcon weight="bold"></CheckIcon>}
48+
{!editing && <PencilSimpleIcon weight="bold"></PencilSimpleIcon>}
49+
{editing ? "Done" : "Edit"}
50+
</button>
51+
52+
<button
53+
className={[styles.container, styles.button].join(" ")}
54+
onClick={() => {
55+
setMenuOpen(!menuOpen);
56+
}}
57+
>
58+
<ListIcon weight="bold"></ListIcon>
59+
Settings
60+
</button>
61+
</div>
62+
</div>
2563

2664
<Grid width={24} height={12} editing={editing}>
2765
<Widget
@@ -32,24 +70,53 @@ const App = () => {
3270
</Widget>
3371

3472
<Widget
35-
size={{ width: 10, height: 1 }}
36-
position={{ gridX: 7, gridY: 3 }}
73+
size={{ width: 8, height: 1 }}
74+
position={{ gridX: 8, gridY: 3 }}
75+
>
76+
<Search></Search>
77+
</Widget>
78+
79+
<Widget
80+
size={{ width: 6, height: 1 }}
81+
position={{ gridX: 9, gridY: 4 }}
82+
>
83+
<Weather></Weather>
84+
</Widget>
85+
86+
<Widget
87+
size={{ width: 1, height: 1 }}
88+
position={{ gridX: 10, gridY: 5 }}
89+
resizeable={false}
3790
>
38-
<TestBox></TestBox>
91+
<Shortcut url="https://canvas.csuchico.edu"></Shortcut>
3992
</Widget>
4093

41-
<Widget position={{ gridX: 8, gridY: 5 }}>
42-
<TestBox></TestBox>
94+
<Widget
95+
size={{ width: 1, height: 1 }}
96+
position={{ gridX: 11, gridY: 5 }}
97+
resizeable={false}
98+
>
99+
<Shortcut url="https://outlook.com"></Shortcut>
43100
</Widget>
44101

45102
<Widget
46-
size={{ width: 1, height: 4 }}
47-
position={{ gridX: 15, gridY: 5 }}
103+
size={{ width: 1, height: 1 }}
104+
position={{ gridX: 12, gridY: 5 }}
48105
resizeable={false}
49106
>
50-
<TestBox></TestBox>
107+
<Shortcut url="https://github.com"></Shortcut>
108+
</Widget>
109+
110+
<Widget
111+
size={{ width: 1, height: 1 }}
112+
position={{ gridX: 13, gridY: 5 }}
113+
resizeable={false}
114+
>
115+
<Shortcut url="https://stackoverflow.com"></Shortcut>
51116
</Widget>
52117
</Grid>
118+
119+
<Menu active={menuOpen}></Menu>
53120
</div>
54121
);
55122
};

0 commit comments

Comments
 (0)