Add headers to card component

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 }) {
-    let containerClass = style.container;
-    if (active) {
-        containerClass += ` ${style.active}`;
-    }
+const styles = {
+    container: style.container,
+    active: 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>