create-brainerce-store 1.3.3 → 1.4.0

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

@@ -4,6 +4,7 @@ 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';
@@ -15,6 +16,7 @@ interface ProductCardProps {
 }
 
 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;
@@ -55,7 +57,7 @@ export function ProductCard({ product, className }: ProductCardProps) {
         <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">
-              Sale
+              {t('sale')}
             </span>
           )}
           <DiscountBadge discount={product.discount} />

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

@@ -1,33 +1,35 @@
-'use client';
-
-import type { Product } from 'brainerce';
-import { ProductCard } from '@/components/products/product-card';
-import { cn } from '@/lib/utils';
-
-interface ProductGridProps {
-  products: Product[];
-  className?: string;
-}
-
-export function ProductGrid({ products, className }: ProductGridProps) {
-  if (products.length === 0) {
-    return (
-      <div className="py-16 text-center">
-        <p className="text-muted-foreground text-lg">No products found.</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
-        className
-      )}
-    >
-      {products.map((product) => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </div>
-  );
-}
+'use client';
+
+import type { Product } from 'brainerce';
+import { useTranslations } from '@/lib/translations';
+import { ProductCard } from '@/components/products/product-card';
+import { cn } from '@/lib/utils';
+
+interface ProductGridProps {
+  products: Product[];
+  className?: string;
+}
+
+export function ProductGrid({ products, className }: ProductGridProps) {
+  const t = useTranslations('products');
+  if (products.length === 0) {
+    return (
+      <div className="py-16 text-center">
+        <p className="text-muted-foreground text-lg">{t('noProducts')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        className
+      )}
+    >
+      {products.map((product) => (
+        <ProductCard key={product.id} product={product} />
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/shared/loading-spinner.tsx

@@ -1,30 +1,32 @@
-'use client';
-
-import { cn } from '@/lib/utils';
-
-interface LoadingSpinnerProps {
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-}
-
-const sizeClasses = {
-  sm: 'h-4 w-4 border-2',
-  md: 'h-8 w-8 border-2',
-  lg: 'h-12 w-12 border-3',
-};
-
-export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
-  return (
-    <div
-      className={cn(
-        'border-muted-foreground/30 border-t-primary animate-spin rounded-full',
-        sizeClasses[size],
-        className
-      )}
-      role="status"
-      aria-label="Loading"
-    >
-      <span className="sr-only">Loading...</span>
-    </div>
-  );
-}
+'use client';
+
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4 border-2',
+  md: 'h-8 w-8 border-2',
+  lg: 'h-12 w-12 border-3',
+};
+
+export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
+  const t = useTranslations('common');
+  return (
+    <div
+      className={cn(
+        'border-muted-foreground/30 border-t-primary animate-spin rounded-full',
+        sizeClasses[size],
+        className
+      )}
+      role="status"
+      aria-label={t('loading')}
+    >
+      <span className="sr-only">{t('loading')}</span>
+    </div>
+  );
+}

package/templates/nextjs/base/src/i18n.ts.ejs

@@ -0,0 +1,5 @@
+import messages from '../messages/<%= language %>.json';
+
+export const defaultLocale = '<%= language %>';
+export const direction = '<%= direction %>' as 'ltr' | 'rtl';
+export { messages };

package/templates/nextjs/base/src/lib/translations.ts

@@ -0,0 +1,11 @@
+import { messages } from '@/i18n';
+
+type Messages = typeof messages;
+type Namespace = keyof Messages;
+
+export function useTranslations<N extends Namespace>(namespace: N) {
+  const ns = messages[namespace] as Record<string, string>;
+  return function t(key: keyof Messages[N]): string {
+    return ns[key as string] || `${String(namespace)}.${key as string}`;
+  };
+}