fix(FE-86): resolve merge conflict

src/components/Card.tsx

@@ -1,18 +1,17 @@
-"use client";
+'use client';
 
-import { HTMLAttributes, ReactNode } from "react";
+import {
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
 
-import { cn } from "@/lib/helper";
-import Image from "next/image";
+import { cn } from '@/lib/helper';
 
-export interface CardProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
   subtitle?: string;
   image?: string;
   imageAlt?: string;
-  imageWidth?: number;
-  imageHeight?: number;
   actions?: ReactNode;
   footer?: ReactNode;
   className?: {
@@ -24,8 +23,8 @@ export interface CardProps
     actions?: string;
     footer?: string;
   };
-  variant?: "default" | "compact" | "bordered" | "shadow" | "image-full";
-  size?: "sm" | "md" | "lg";
+  variant?: 'default' | 'compact' | 'bordered' | 'shadow' | 'image-full';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 const Card = ({
@@ -33,110 +32,85 @@ const Card = ({
   subtitle,
   image,
   imageAlt,
-  imageWidth,
-  imageHeight,
   actions,
   footer,
   className,
-  variant = "default",
-  size = "md",
+  variant = 'default',
+  size = 'md',
   children,
   ...props
 }: CardProps) => {
   const getCardClasses = () => {
-    const baseClasses = "card bg-base-100";
+    const baseClasses = 'card bg-base-100';
 
     const variantClasses = {
-      default: "",
-      compact: "card-compact",
-      bordered: "border border-base-300",
-      shadow: "shadow-xl",
-      "image-full": "card-side card-compact shadow-xl",
+      'default': '',
+      'compact': 'card-compact',
+      'bordered': 'border border-base-300',
+      'shadow': 'shadow-xl',
+      'image-full': 'card-side card-compact shadow-xl',
     };
 
     const sizeClasses = {
-      sm: "w-64",
-      md: "w-96",
-      lg: "w-[28rem]",
+      'sm': 'w-64',
+      'md': 'w-96',
+      'lg': 'w-[28rem]',
     };
 
     return cn(
       baseClasses,
       variantClasses[variant],
-      variant !== "image-full" ? sizeClasses[size] : "",
-      className?.wrapper,
+      variant !== 'image-full' ? sizeClasses[size] : '',
+      className?.wrapper
     );
   };
 
-  const getImageDimensions = () => {
-    if (variant === "image-full") {
-      return {
-        width: imageWidth || 128,
-        height: imageHeight || 128,
-      };
-    }
-
-    const cardWidths = {
-      sm: 256, // w-64
-      md: 384, // w-96
-      lg: 448, // w-[28rem]
-    };
-
-    return {
-      width: imageWidth || cardWidths[size],
-      height: imageHeight || 192,
-    };
-  };
-
   const getImageClasses = () => {
-    if (variant === "image-full") {
-      return cn("object-cover", className?.image);
+    if (variant === 'image-full') {
+      return cn('w-32 h-32 object-cover', className?.image);
     }
-    return cn("w-full object-cover", className?.image);
+    return cn('h-48 object-cover', className?.image);
   };
 
   const getBodyClasses = () => {
-    const baseClasses = "card-body";
+    const baseClasses = 'card-body';
 
-    if (variant === "compact" || variant === "image-full") {
-      return cn(baseClasses, "p-4", className?.body);
+    if (variant === 'compact' || variant === 'image-full') {
+      return cn(baseClasses, 'p-4', className?.body);
     }
 
-    return cn(baseClasses, "p-6", className?.body);
+    return cn(baseClasses, 'p-6', className?.body);
   };
 
   const getTitleClasses = () => {
     const sizeClasses = {
-      sm: "text-lg",
-      md: "text-xl",
-      lg: "text-2xl",
+      'sm': 'text-lg',
+      'md': 'text-xl',
+      'lg': 'text-2xl',
     };
 
-    return cn("card-title font-bold", sizeClasses[size], className?.title);
+    return cn('card-title font-bold', sizeClasses[size], className?.title);
   };
 
   const getSubtitleClasses = () => {
-    return cn("text-base-content/70 text-sm mt-1", className?.subtitle);
+    return cn('text-base-content/70 text-sm mt-1', className?.subtitle);
   };
 
   const getActionsClasses = () => {
-    return cn("card-actions justify-end mt-4", className?.actions);
+    return cn('card-actions justify-end mt-4', className?.actions);
   };
 
   const getFooterClasses = () => {
-    return cn("border-t border-base-300 mt-4 pt-4", className?.footer);
+    return cn('border-t border-base-300 mt-4 pt-4', className?.footer);
   };
 
-  if (variant === "image-full" && image) {
-    const imageDimensions = getImageDimensions();
+  if (variant === 'image-full' && image) {
     return (
       <div className={getCardClasses()} {...props}>
         <figure>
-          <Image
+          <img
             src={image}
-            alt={imageAlt || title || "Card image"}
-            width={imageDimensions.width}
-            height={imageDimensions.height}
+            alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}
           />
         </figure>
@@ -155,11 +129,9 @@ const Card = ({
     <div className={getCardClasses()} {...props}>
       {image && (
         <figure>
-          <Image
+          <img
             src={image}
-            alt={imageAlt || title || "Card image"}
-            width={getImageDimensions().width}
-            height={getImageDimensions().height}
+            alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}
           />
         </figure>