big fixes

fixes feedback from thecodacus

app/components/ui/Card.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { cn } from '~/lib/utils';
+import { classNames } from '~/utils/classNames';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
 
@@ -7,7 +7,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref
   return (
     <div
       ref={ref}
-      className={cn(
+      className={classNames(
         'rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary shadow-sm',
         className,
       )}
@@ -18,27 +18,38 @@ const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref
 Card.displayName = 'Card';
 
 const CardHeader = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+  return <div ref={ref} className={classNames('flex flex-col space-y-1.5 p-6', className)} {...props} />;
 });
 CardHeader.displayName = 'CardHeader';
 
 const CardTitle = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => {
-    return <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />;
+    return (
+      <h3
+        ref={ref}
+        className={classNames('text-2xl font-semibold leading-none tracking-tight', className)}
+        {...props}
+      />
+    );
   },
 );
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => {
-    return <p ref={ref} className={cn('text-sm text-bolt-elements-textSecondary', className)} {...props} />;
+    return <p ref={ref} className={classNames('text-sm text-bolt-elements-textSecondary', className)} {...props} />;
   },
 );
 CardDescription.displayName = 'CardDescription';
 
 const CardContent = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
-  return <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />;
+  return <div ref={ref} className={classNames('p-6 pt-0', className)} {...props} />;
 });
 CardContent.displayName = 'CardContent';
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent };
+const CardFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={classNames('flex items-center p-6 pt-0', className)} {...props} />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };