From 79117da96939a569b345d1ab85ee3af854e579a3 Mon Sep 17 00:00:00 2001 From: Darius Schefer Date: Fri, 29 Aug 2025 03:18:08 +0200 Subject: [PATCH] Add Card components --- src/components/Card/Card.tsx | 5 +++ src/components/Card/style.module.css | 14 ++++++ src/components/CardHeader/CardHeader.tsx | 16 +++++++ src/components/CardHeader/style.module.css | 27 ++++++++++++ src/components/Dashboard/Dashboard.tsx | 51 ++++++++++------------ src/components/Dashboard/style.module.css | 38 +--------------- src/components/Flatastic/Flatastic.tsx | 2 +- src/components/Flatastic/style.module.css | 4 ++ src/components/Terminal/Terminal.tsx | 5 +-- src/components/Timetable/Timetable.tsx | 2 +- src/components/Timetable/style.module.css | 3 ++ 11 files changed, 99 insertions(+), 68 deletions(-) create mode 100644 src/components/Card/Card.tsx create mode 100644 src/components/Card/style.module.css create mode 100644 src/components/CardHeader/CardHeader.tsx create mode 100644 src/components/CardHeader/style.module.css diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx new file mode 100644 index 0000000..c6f1517 --- /dev/null +++ b/src/components/Card/Card.tsx @@ -0,0 +1,5 @@ +import style from "./style.module.css"; + +export default function Card({ active, children }) { + return
{children}
; +} diff --git a/src/components/Card/style.module.css b/src/components/Card/style.module.css new file mode 100644 index 0000000..773bd02 --- /dev/null +++ b/src/components/Card/style.module.css @@ -0,0 +1,14 @@ +.card { + flex-direction: column; + justify-content: flex-start; + background-color: #c0c0c0; + border-top: 2px solid white; + border-left: 2px solid white; + border-bottom: 2px solid #828282; + border-right: 2px solid #828282; + margin: 10px; +} + +.cardContent { + padding: 1px 100px 30px 100px; +} diff --git a/src/components/CardHeader/CardHeader.tsx b/src/components/CardHeader/CardHeader.tsx new file mode 100644 index 0000000..482d00e --- /dev/null +++ b/src/components/CardHeader/CardHeader.tsx @@ -0,0 +1,16 @@ +import style from "./style.module.css"; + +export default function CardHeader({ icon, content, active = false }) { + let containerClass = style.container; + if (active) { + containerClass += " " + style.active; + } + return ( +
+
+
{icon}
+
{content}
+
+
+ ); +} diff --git a/src/components/CardHeader/style.module.css b/src/components/CardHeader/style.module.css new file mode 100644 index 0000000..700cd96 --- /dev/null +++ b/src/components/CardHeader/style.module.css @@ -0,0 +1,27 @@ +.container { + height: 28px; + display: flex; + flex-direction: row; + margin: 2px; + justify-content: space-between; + align-items: center; + color: #c0c0c0; + background-color: #808080; +} + +.active { + color: white; + background-color: #000082; +} + +.title { + display: flex; + flex-direction: row; + font-weight: bold; + gap: 7px; + padding-left: 5px; +} + +.icon { + font-size: 10pt; +} diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 3304468..77a1ce2 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -1,5 +1,7 @@ import { useEffect, useState } from "react"; +import Card from "@/components/Card/Card"; +import CardHeader from "@/components/CardHeader/CardHeader"; import Datetime from "@/components/Datetime/Datetime"; import Flatastic from "@/components/Flatastic/Flatastic"; import Footer from "@/components/Footer/Footer"; @@ -10,7 +12,8 @@ import style from "./style.module.css"; export default function Dashboard() { const schemes = [style.day, style.evening, style.night]; - const [scheme, setScheme] = useState(style.day); + const [schemeIndex, setSchemeIndex] = useState(0); + const scheme = schemes[schemeIndex]; // change background color based on time of day const time = useEffect(() => { @@ -19,11 +22,11 @@ export default function Dashboard() { let d = new Date(); let hour = d.getHours(); if (hour >= 7 && hour < 16) { - setScheme(style.day); - } else if (hour < 23) { - setScheme(style.evening); + setSchemeIndex(0); + } else if (hour >= 16 && hour < 23) { + setSchemeIndex(1); } else { - setScheme(style.night); + setSchemeIndex(2); } }, 20 * 60 * 1000, @@ -36,33 +39,27 @@ export default function Dashboard() { return (
-
-
๐ŸšŠ Timetable
-
- -
-
+ + + + -
-
-
๐Ÿ• Clock
+
+ + -
+
-
-
-
๐Ÿ”” Terminal
- -
-
+ + + + -
-
๐Ÿงน Flatastic
-
- -
-
+ + + +
diff --git a/src/components/Dashboard/style.module.css b/src/components/Dashboard/style.module.css index 9535ef1..4a312cc 100644 --- a/src/components/Dashboard/style.module.css +++ b/src/components/Dashboard/style.module.css @@ -29,46 +29,12 @@ justify-content: flex-start; } -.card { - flex-direction: column; - justify-content: flex-start; - background-color: #c0c0c0; - border-top: 2px solid white; - border-left: 2px solid white; - border-bottom: 2px solid #828282; - border-right: 2px solid #828282; -} - -.cardContent { - padding: 1px 100px 30px 100px; -} - -.cardHeader { - height: 30px; - color: white; - background-color: #000082; - text-align: left; - padding-left: 5px; - font-weight: bold; -} - -.cardHeaderInactive { - height: 30px; - color: #c0c0c0; - background-color: #808080; - text-align: left; - padding-left: 5px; - font-weight: bold; -} - -.clock { +.small { width: 45%; -<<<<<<< HEAD -======= } .terminal { ->>>>>>> 115a228 (Make dashboard change background based on time of day) + margin: 2px; } .footer { diff --git a/src/components/Flatastic/Flatastic.tsx b/src/components/Flatastic/Flatastic.tsx index cce0b55..7612157 100644 --- a/src/components/Flatastic/Flatastic.tsx +++ b/src/components/Flatastic/Flatastic.tsx @@ -56,7 +56,7 @@ export default function Flatastic() { }); return ( -
+

Chores

    {choresRender}
diff --git a/src/components/Flatastic/style.module.css b/src/components/Flatastic/style.module.css index eb1f027..46582c7 100644 --- a/src/components/Flatastic/style.module.css +++ b/src/components/Flatastic/style.module.css @@ -1,3 +1,7 @@ +.container { + padding: 1px 100px 30px 100px; +} + .choreList { list-style-type: none; display: flex; diff --git a/src/components/Terminal/Terminal.tsx b/src/components/Terminal/Terminal.tsx index e3cea94..52fdbd6 100644 --- a/src/components/Terminal/Terminal.tsx +++ b/src/components/Terminal/Terminal.tsx @@ -84,9 +84,8 @@ export default function Terminal() {
{text}
- - [sus@home ~/hallway]{"$"} - {" "} + [sus@home ~/hallway]{"$"} + {" โ–ˆ"}
); diff --git a/src/components/Timetable/Timetable.tsx b/src/components/Timetable/Timetable.tsx index f59803a..6a167e9 100644 --- a/src/components/Timetable/Timetable.tsx +++ b/src/components/Timetable/Timetable.tsx @@ -18,7 +18,7 @@ export default function Timetable() { }, [fetchTimetable]); return ( -
+

Departures