Merge pull request #28 from ItsukiKigoshi/development

Development

src/app/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { AppShell, Flex, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { Header } from "../components/Header/Header";
-import { Navbar } from "../components/Navbar/Navbar";
-import { Timetable } from "../components/Timetable/Timetable";
+import { Header } from "../components/Header";
+import { Navbar } from "../components/Navbar";
+import { Timetable } from "../components/Timetable";
 import { useLocalStorage } from "../hooks/useLocalStorage";
 import { Course } from "../type/Types";
 
@@ -25,6 +25,7 @@ export default function Page() {
       modified: new Date(2022, 5 - 1, 5, 6, 35, 20, 333),
       unit: 3,
       isEnrolled: true,
+      color: "#ff0000",
     },
   ]);
 

src/components/AddCourse/AddCourse.tsx → src/components/AddCourse/index.tsx

@@ -77,6 +77,7 @@ export default function AddCourse(props: {
         unit: unit,
         modified: new Date(),
         isEnrolled: true, // Default value, update as needed
+        color: "#000000", // Default value, update as needed
       };
 
       return course;

src/components/CourseCard/CourseCard.tsx → src/components/CourseCard/index.tsx

@@ -1,4 +1,4 @@
-import ModalConfirm from "@/src/components/ModalConfirm/ModalConfirm";
+import ModalConfirm from "@/src/components/ModalConfirm";
 import { Course } from "@/src/type/Types";
 import {
   ActionIcon,

src/components/Header/Header.tsx → src/components/Header/index.tsx

@@ -4,8 +4,7 @@ import { IconBrandGithub, IconSettings } from "@tabler/icons-react";
 
 import React from "react";
 
-import ModalSetting from "../ModalSetting/ModalSetting";
-import classes from "./Header.module.css";
+import ModalSetting from "../ModalSetting";
 
 export function Header(props: {
   opened: boolean;
@@ -14,7 +13,15 @@ export function Header(props: {
   const [modalOpened, { open, close }] = useDisclosure(false);
   return (
     <header>
-      <Container size="max" className={classes.inner}>
+      <Container
+        size="max"
+        style={{
+          height: "56px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
         <Group gap={5}>
           <Burger
             opened={props.opened}

src/components/ModalSetting/ModalSetting.tsx → src/components/ModalSetting/index.tsx

@@ -1,21 +1,20 @@
 import {
-    Button,
-    Group,
-    Input,
-    Modal,
-    NativeSelect,
-    Text,
-    useComputedColorScheme,
-    useMantineColorScheme,
+  Button,
+  Group,
+  Input,
+  Modal,
+  NativeSelect,
+  Text,
+  useComputedColorScheme,
+  useMantineColorScheme,
 } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { IconMoon, IconSun } from "@tabler/icons-react";
-import cx from "clsx";
 import classes from "./ModalSetting.module.css";
 
 export default function ModalSetting(props: {
-    modalOpened: boolean;
-    close: () => void;
+  modalOpened: boolean;
+  close: () => void;
 }) {
   const { setColorScheme } = useMantineColorScheme();
 
@@ -74,8 +73,11 @@ export default function ModalSetting(props: {
             size="sm"
             aria-label="Toggle color scheme"
           >
-            <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
-            <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
+            {computedColorScheme === "dark" ? (
+              <IconSun stroke={1.5} />
+            ) : (
+              <IconMoon stroke={1.5} />
+            )}
           </Button>
           <Button
             onClick={() => setColorScheme("auto")}

src/components/Navbar/Navbar.tsx → src/components/Navbar/index.tsx

@@ -1,8 +1,8 @@
 import { Flex, ScrollArea, Text } from "@mantine/core";
 
+import AddCourse from "@/src/components/AddCourse";
+import CourseCard from "@/src/components/CourseCard";
 import { Course } from "@/src/type/Types";
-import AddCourse from "../AddCourse/AddCourse";
-import CourseCard from "../CourseCard/CourseCard";
 import classes from "./Navbar.module.css";
 
 export function Navbar(props: {

src/components/Timetable/Timetable.tsx → src/components/Timetable/index.tsx

@@ -1,11 +1,9 @@
 "use client";
 import { Course } from "@/src/type/Types";
-import { Card, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Card, SimpleGrid, Stack, Text } from "@mantine/core";
 import classes from "./Timetable.module.css";
 
 export function Timetable(props: { courses: Course[] }) {
-  const theme = useMantineTheme();
-
   const weekDays: string[] = ["M", "TU", "W", "TH", "F", "SA"];
   const weekDayItems = weekDays.map((day) => (
     <Card key={day} className={classes.item} style={{ height: "30px" }}>

src/type/Types.ts

@@ -11,4 +11,5 @@ export interface Course {
   unit: number;
   modified: Date;
   isEnrolled: boolean;
+  color: string;
 }