create-brainerce-store 1.9.1 → 1.11.1

package/templates/nextjs/base/src/components/products/product-card.tsx

@@ -1,96 +1,102 @@
-'use client';
-
-import Link from 'next/link';
-import Image from 'next/image';
-import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { StockBadge } from '@/components/products/stock-badge';
-import { DiscountBadge } from '@/components/products/discount-badge';
-import { cn } from '@/lib/utils';
-
-interface ProductCardProps {
-  product: Product;
-  className?: string;
-}
-
-export function ProductCard({ product, className }: ProductCardProps) {
-  const t = useTranslations('common');
-  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
-  const mainImage = product.images?.[0];
-  const imageUrl = mainImage?.url || null;
-  const slug = product.slug || product.id;
-
-  return (
-    <Link
-      href={`/products/${slug}`}
-      className={cn(
-        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
-        className
-      )}
-    >
-      {/* Image */}
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={mainImage?.alt || product.name}
-            fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-        )}
-
-        {/* Badges */}
-        <div className="absolute start-2 top-2 flex flex-col gap-1">
-          {isOnSale && (
-            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
-              {t('sale')}
-            </span>
-          )}
-          <DiscountBadge discount={product.discount} />
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="space-y-2 p-3">
-        {/* Categories */}
-        {product.categories && product.categories.length > 0 && (
-          <div className="flex flex-wrap gap-1">
-            {product.categories.slice(0, 2).map((cat) => (
-              <span
-                key={cat.id}
-                className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[10px]"
-              >
-                {cat.name}
-              </span>
-            ))}
-          </div>
-        )}
-
-        {/* Name */}
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {product.name}
-        </h3>
-
-        {/* Price */}
-        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
-
-        {/* Stock */}
-        <StockBadge inventory={product.inventory} />
-      </div>
-    </Link>
-  );
-}
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import type { Product } from 'brainerce';
+import { getProductPriceInfo } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { StockBadge } from '@/components/products/stock-badge';
+import { DiscountBadge } from '@/components/products/discount-badge';
+import { cn } from '@/lib/utils';
+
+interface ProductCardProps {
+  product: Product;
+  className?: string;
+}
+
+export function ProductCard({ product, className }: ProductCardProps) {
+  const t = useTranslations('common');
+  const tp = useTranslations('productDetail');
+  const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
+  const mainImage = product.images?.[0];
+  const imageUrl = mainImage?.url || null;
+  const slug = product.slug || product.id;
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn(
+        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      {/* Image */}
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={mainImage?.alt || product.name}
+            fill
+            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+
+        {/* Badges */}
+        <div className="absolute start-2 top-2 flex flex-col gap-1">
+          {isOnSale && (
+            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
+              {t('sale')}
+            </span>
+          )}
+          <DiscountBadge discount={product.discount} />
+          {product.isDownloadable && (
+            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+              {tp('digitalProduct')}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="space-y-2 p-3">
+        {/* Categories */}
+        {product.categories && product.categories.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {product.categories.slice(0, 2).map((cat) => (
+              <span
+                key={cat.id}
+                className="text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-[10px]"
+              >
+                {cat.name}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Name */}
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {product.name}
+        </h3>
+
+        {/* Price */}
+        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+
+        {/* Stock */}
+        <StockBadge inventory={product.inventory} />
+      </div>
+    </Link>
+  );
+}

package/templates/nextjs/base/src/components/products/recommendation-section.tsx

@@ -1,110 +1,107 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import Image from 'next/image';
-import type { ProductRecommendation } from 'brainerce';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { cn } from '@/lib/utils';
-
-interface RecommendationCardProps {
-  item: ProductRecommendation;
-  className?: string;
-}
-
-function RecommendationCard({ item, className }: RecommendationCardProps) {
-  const imageUrl = item.images?.[0]?.url || null;
-  const slug = item.slug || item.id;
-  const basePrice = parseFloat(item.basePrice);
-  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
-  const isOnSale = salePrice != null && salePrice < basePrice;
-
-  return (
-    <Link
-      href={`/products/${slug}`}
-      className={cn(
-        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
-        className
-      )}
-    >
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={item.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-        )}
-      </div>
-      <div className="space-y-1.5 p-3">
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {item.name}
-        </h3>
-        <PriceDisplay
-          price={basePrice}
-          salePrice={isOnSale ? salePrice : undefined}
-          size="sm"
-        />
-      </div>
-    </Link>
-  );
-}
-
-interface RecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface CartRecommendationSectionProps {
-  title: string;
-  items: ProductRecommendation[];
-  className?: string;
-}
-
-export function CartRecommendationSection({
-  title,
-  items,
-  className,
-}: CartRecommendationSectionProps) {
-  if (items.length === 0) return null;
-
-  return (
-    <div className={cn('', className)}>
-      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        {items.map((item) => (
-          <RecommendationCard key={item.id} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { cn } from '@/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const firstImage = item.images?.[0];
+  const imageUrl = typeof firstImage === 'string' ? firstImage : firstImage?.url || null;
+  const slug = item.slug || item.id;
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn(
+        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+      <div className="space-y-1.5 p-3">
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {item.name}
+        </h3>
+        <PriceDisplay price={basePrice} salePrice={isOnSale ? salePrice : undefined} size="sm" />
+      </div>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}