update dep + preference styles setup

src/components/window/Card.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from "react"
+import clsx from "clsx"
 
 interface CardProps {
   children?: ReactNode
   className?: string
+  type?: string
   onClick?: () => void
 }
 
@@ -18,12 +20,12 @@ const Card = ({ children }: CardProps) => {
 }
 
 const CardHeader = ({ children }: CardProps) => {
-  return <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+  return <div className="flex items-center gap-1.5 tracking-wide">{children}</div>
 }
 
-const CardIcon = ({ children, ...rest }: CardProps) => {
+const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
   return (
-    <div className="flex gap-1.5 items-center font-semibold" {...rest}>
+    <div className={clsx("flex gap-1.5 items-center font-semibold", type === "menu" && "transition cursor-pointer hover:bg-white/60 px-2 py-1 rounded-md active:scale-95", className)} {...rest}>
       {children}
     </div>
   )