Add src/components/sections/product/ProductCardOneWithSaving.tsx

src/components/sections/product/ProductCardOneWithSaving.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useWorkoutStorage } from '@/hooks/useWorkoutStorage';
+import ProductCardOne from './ProductCardOne';
+
+interface ProductCardOneWithSavingProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: any;
+  products: Array<{
+    id: string;
+    name: string;
+    price: string;
+    imageSrc: string;
+    imageAlt?: string;
+    onFavorite?: () => void;
+    onProductClick?: () => void;
+    isFavorited?: boolean;
+  }>;
+  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+  useInvertedBackground: boolean;
+  gridVariant:
+    | 'uniform-all-items-equal'
+    | 'bento-grid'
+    | 'bento-grid-inverted'
+    | 'two-columns-alternating-heights'
+    | 'asymmetric-60-wide-40-narrow'
+    | 'three-columns-all-equal-width'
+    | 'four-items-2x2-equal-grid'
+    | 'one-large-right-three-stacked-left'
+    | 'items-top-row-full-width-bottom'
+    | 'full-width-top-items-bottom-row'
+    | 'one-large-left-three-stacked-right';
+  onWorkoutStart?: (workoutData: any) => void;
+}
+
+export function ProductCardOneWithSaving({
+  title,
+  description,
+  tag,
+  tagIcon,
+  products,
+  animationType,
+  textboxLayout,
+  useInvertedBackground,
+  gridVariant,
+  onWorkoutStart,
+}: ProductCardOneWithSavingProps) {
+  const { saveWorkout } = useWorkoutStorage();
+
+  const handleProductClick = (productId: string, productName: string) => {
+    const workoutData = {
+      type: 'training' as const,
+      date: new Date().toISOString().split('T')[0],
+      data: {
+        workout: productName,
+        startTime: Date.now(),
+        productId,
+      },
+    };
+    saveWorkout(workoutData as any);
+    onWorkoutStart?.(workoutData);
+  };
+
+  const enhancedProducts = products.map(product => ({
+    ...product,
+    onProductClick: () => handleProductClick(product.id, product.name),
+  }));
+
+  return (
+    <ProductCardOne
+      title={title}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      products={enhancedProducts}
+      animationType={animationType}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      gridVariant={gridVariant}
+    />
+  );
+}
+
+export default ProductCardOneWithSaving;