Add Card components

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 (
+        <div className={containerClass}>
+            <div className={style.title}>
+                <div className={style.icon}>{icon}</div>
+                <div className={style.content}>{content}</div>
+            </div>
+        </div>
+    );
+}

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