Add headers to card component

src/components/Card/Card.tsx

@@ -1,11 +1,26 @@
+import CardHeader from "@/components/CardHeader/CardHeader";
+
 import style from "./style.module.css";
 
 export default function Card({
-    active,
+    icon,
+    name,
     children,
+    active = false,
+    header = true,
 }: {
+    icon: string;
+    name: string;
     active?: boolean;
+    header?: boolean;
     children: React.ReactNode;
 }) {
-    return <div className={style.card}>{children}</div>;
+    return (
+        <div className={style.card}>
+            {header && (
+                <CardHeader icon={icon} content={name} isActive={active} />
+            )}
+            {children}
+        </div>
+    );
 }

src/components/Card/style.module.css

@@ -1,6 +1,7 @@
 .card {
+    display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
     background-color: #c0c0c0;
     border-top: 2px solid white;
     border-left: 2px solid white;
@@ -8,7 +9,3 @@
     border-right: 2px solid #828282;
     margin: 10px;
 }
-
-.cardContent {
-    padding: 1px 100px 30px 100px;
-}

src/components/CardHeader/CardHeader.tsx

@@ -1,12 +1,17 @@
+import classNames from "classnames/bind";
+
 import style from "./style.module.css";
 
-export default function CardHeader({ icon, content, active = false }) {
+const styles = {
-    let containerClass = style.container;
+    container: style.container,
-    if (active) {
+    active: style.active,
-        containerClass += ` ${style.active}`;
+};
-    }
+
+const cx = classNames.bind(styles);
+
+export default function CardHeader({ icon, content, isActive = false }) {
     return (
-        <div className={containerClass}>
+        <div className={cx("container", { active: isActive })}>
             <div className={style.title}>
                 <div className={style.icon}>{icon}</div>
                 <div className={style.content}>{content}</div>

src/components/Dashboard/Dashboard.tsx

@@ -5,13 +5,13 @@ import {
     CardColumn,
     CardRow,
 } from "@/components/CardContainers/CardContainers";
-import CardHeader from "@/components/CardHeader/CardHeader";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
-import Weather from "../Weather/Weather";
+import Weather from "@/components/Weather/Weather";
+
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -43,30 +43,25 @@ export default function Dashboard() {
     return (
         <div className={`${style.dashboard} ${scheme}`}>
             <CardColumn>
-                <Card>
+                <Card icon="🚊" name="Timetable">
-                    <CardHeader icon="🚊" content="Timetable" />
                     <Timetable />
                 </Card>
 
                 <CardRow>
-                    <Card>
+                    <Card icon="🕐" name="Clock">
-                        <CardHeader icon="🕐" content="Clock" />
                         <Datetime />
                     </Card>
 
-                    <Card>
+                    <Card icon="🌤" name="Weather">
-                        <CardHeader icon="🌤" content="Weather" />
                         <Weather />
                     </Card>
                 </CardRow>
 
-                <Card>
+                <Card icon="🔔" name="Terminal" active={true}>
-                    <CardHeader icon="🔔" content="Terminal" active={true} />
                     <Terminal />
                 </Card>
 
-                <Card>
+                <Card icon="🧹" name="Flatastic">
-                    <CardHeader icon="🧹" content="Flatastic" />
                     <Flatastic />
                 </Card>
             </CardColumn>