update: preference page layout

src/components/window/Card.tsx

@@ -1,8 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode } from "react"
 
 interface CardProps {
-  children?: ReactNode;
-  className?: string;
+  children?: ReactNode
+  className?: string
+  onClick?: () => void
 }
 
 const Card = ({ children }: CardProps) => {
@@ -13,31 +14,27 @@ const Card = ({ children }: CardProps) => {
     >
       {children}
     </div>
-  );
-};
+  )
+}
 
 const CardHeader = ({ children }: CardProps) => {
-  return (
-    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
-  );
-};
+  return <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+}
 
-const CardIcon = ({ children }: CardProps) => {
+const CardIcon = ({ children, ...rest }: CardProps) => {
   return (
-    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
-  );
-};
-
-const CardTool = ({ children }: CardProps) => {
-  return (
-    <div className="flex items-center justify-end flex-grow gap-2">
+    <div className="flex gap-1.5 items-center font-semibold" {...rest}>
       {children}
     </div>
-  );
-};
+  )
+}
+
+const CardTool = ({ children }: CardProps) => {
+  return <div className="flex items-center justify-end flex-grow gap-2">{children}</div>
+}
 
 const CardBody = ({ children }: CardProps) => {
-  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>;
-};
+  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>
+}
 
-export { Card, CardHeader, CardIcon, CardTool, CardBody };
+export { Card, CardHeader, CardIcon, CardTool, CardBody }