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;
-}