refactor(product-components): use tComponent + tShared translation pattern

- Update ModelSpecifications component
- Update PlatformLinks component
- Update ProductHero component
- Update ProductPricing component
- Update ResourceLinks component
- Update VendorMatrix component

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/components/product/ModelSpecifications.tsx

@@ -13,7 +13,6 @@ export interface ModelSpecificationsProps {
  * context window, max output, and token pricing.
  */
 export function ModelSpecifications({ model }: ModelSpecificationsProps) {
-  const tComponent = useTranslations('components.product.modelSpecifications')
   const tShared = useTranslations('shared')
   const hasContent =
     model.size ||
@@ -31,7 +30,7 @@ export function ModelSpecifications({ model }: ModelSpecificationsProps) {
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
       <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
-          {tComponent('title')}
+          {tShared('labels.specifications')}
         </h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-md)] mt-[var(--spacing-lg)]">
@@ -46,7 +45,7 @@ export function ModelSpecifications({ model }: ModelSpecificationsProps) {
 
           <div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
             <h3 className="text-xs text-[var(--color-text-muted)] uppercase tracking-wider font-medium mb-[var(--spacing-xs)]">
-              {tComponent('contextWindow')}
+              {tShared('labels.totalContext')}
             </h3>
             <p className="text-lg font-semibold tracking-tight">
               {formatTokenCount(model.contextWindow)}
@@ -71,7 +70,7 @@ export function ModelSpecifications({ model }: ModelSpecificationsProps) {
                 {model.tokenPricing.input !== null && model.tokenPricing.input !== undefined && (
                   <p className="text-sm">
                     <span className="text-[var(--color-text-muted)] text-xs">
-                      {tComponent('input')}{' '}
+                      {tShared('labels.input')}{' '}
                     </span>
                     <span className="font-semibold tracking-tight">
                       ${model.tokenPricing.input}/M
@@ -81,7 +80,7 @@ export function ModelSpecifications({ model }: ModelSpecificationsProps) {
                 {model.tokenPricing.output !== null && model.tokenPricing.output !== undefined && (
                   <p className="text-sm">
                     <span className="text-[var(--color-text-muted)] text-xs">
-                      {tComponent('output')}{' '}
+                      {tShared('labels.output')}{' '}
                     </span>
                     <span className="font-semibold tracking-tight">
                       ${model.tokenPricing.output}/M
@@ -91,7 +90,7 @@ export function ModelSpecifications({ model }: ModelSpecificationsProps) {
                 {model.tokenPricing.cache !== null && model.tokenPricing.cache !== undefined && (
                   <p className="text-sm">
                     <span className="text-[var(--color-text-muted)] text-xs">
-                      {tComponent('cache')}{' '}
+                      {tShared('labels.cache')}{' '}
                     </span>
                     <span className="font-semibold tracking-tight">
                       ${model.tokenPricing.cache}/M

src/components/product/PlatformLinks.tsx

@@ -21,6 +21,7 @@ export function PlatformLinks({
   gridCols = 'grid-cols-1 md:grid-cols-3',
 }: PlatformLinksProps) {
   const tComponent = useTranslations('components.product.platformLinks')
+  const tShared = useTranslations('shared')
 
   if (!platformUrls) {
     return null
@@ -29,24 +30,24 @@ export function PlatformLinks({
   const links = [
     {
       key: 'huggingface',
-      title: tComponent('aiPlatforms.huggingface.title'),
+      title: tShared('platforms.huggingface'),
       description: tComponent('aiPlatforms.huggingface.description'),
     },
     {
       key: 'artificialAnalysis',
-      title: tComponent('aiPlatforms.artificialAnalysis.title'),
+      title: tShared('platforms.artificialAnalysis'),
       description: tComponent('aiPlatforms.artificialAnalysis.description'),
     },
     {
       key: 'openrouter',
-      title: tComponent('aiPlatforms.openrouter.title'),
+      title: tShared('platforms.openrouter'),
       description: tComponent('aiPlatforms.openrouter.description'),
     },
   ] as const
 
   return (
     <LinkCardGrid
-      title={tComponent('title')}
+      title={tShared('labels.findOnAiPlatforms')}
       links={links}
       urls={platformUrls}
       layout={layout}

src/components/product/ProductHero.tsx

@@ -116,7 +116,9 @@ export function ProductHero({
           <div className="inline-flex items-center gap-[var(--spacing-sm)] flex-wrap px-[var(--spacing-md)] py-[var(--spacing-md)] border border-[var(--color-border)] text-sm">
             {vendor && (
               <div className="flex gap-1">
-                <span className="text-[var(--color-text-muted)]">{tShared('terms.vendor')}:</span>
+                <span className="text-[var(--color-text-muted)]">
+                  {tShared('categories.singular.vendor')}:
+                </span>
                 <span className="font-medium">{vendor}</span>
               </div>
             )}

src/components/product/ProductPricing.tsx

@@ -7,7 +7,6 @@ export interface ProductPricingProps {
 }
 
 export function ProductPricing({ pricing, pricingUrl }: ProductPricingProps) {
-  const tComponent = useTranslations('components.product.productPricing')
   const tShared = useTranslations('shared')
 
   if (!pricing || pricing.length === 0) {
@@ -50,7 +49,7 @@ export function ProductPricing({ pricing, pricingUrl }: ProductPricingProps) {
               rel="noopener"
               className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
             >
-              {tComponent('viewFullDetails')}
+              {tShared('actions.viewFullDetails')}
             </a>
           </div>
         )}

src/components/product/ResourceLinks.tsx

@@ -54,7 +54,7 @@ export function ResourceLinks({
 
   return (
     <LinkCardGrid
-      title={tComponent('resources')}
+      title={tShared('terms.resources')}
       links={links}
       urls={resourceUrls}
       layout={layout}

src/components/product/VendorMatrix.tsx

@@ -20,14 +20,14 @@ interface MatrixCellProps {
  * Gets the localized label for a product category, with simple plural handling.
  */
 function getCategoryLabel(
-  t: ReturnType<typeof useTranslations>,
+  tShared: ReturnType<typeof useTranslations>,
   category: ProductCategory,
   count: number
 ): string {
   if (count === 1) {
-    return t(`categories.${category}`)
+    return tShared(`categories.${category}`)
   }
-  return t(`categoriesPlural.${category}`)
+  return tShared(`categories.plural.${category}`)
 }
 
 /**
@@ -45,6 +45,7 @@ function getVendorTypeLabel(t: ReturnType<typeof useTranslations>, type: string)
 function MatrixCell({ products, category }: MatrixCellProps) {
   const [isExpanded, setIsExpanded] = useState(false)
   const tComponent = useTranslations('components.product.vendorMatrix')
+  const tShared = useTranslations('shared')
 
   if (products.length === 0) {
     return (
@@ -104,7 +105,7 @@ function MatrixCell({ products, category }: MatrixCellProps) {
               <span className="font-medium text-sm tracking-tight">
                 {tComponent('cell.summary', {
                   count: products.length,
-                  category: getCategoryLabel(tComponent, category, products.length),
+                  category: getCategoryLabel(tShared, category, products.length),
                 })}
               </span>
               <span className="text-xs text-[var(--color-text-muted)]">
@@ -143,6 +144,7 @@ export default function VendorMatrix({ matrixData }: VendorMatrixProps) {
   const [selectedVendorTypes, setSelectedVendorTypes] = useState<Set<string>>(new Set())
   const [sortBy, setSortBy] = useState<'name' | 'products'>('products')
   const tComponent = useTranslations('components.product.vendorMatrix')
+  const tShared = useTranslations('shared')
 
   const filteredAndSortedData = useMemo(() => {
     let filtered = matrixData
@@ -306,7 +308,7 @@ export default function VendorMatrix({ matrixData }: VendorMatrixProps) {
                 : 'border-[var(--color-border)] hover:bg-[var(--color-hover)]'
             }`}
           >
-            {tComponent('controls.sortProducts')}
+            {tShared('terms.products')}
           </button>
         </div>
       </div>
@@ -322,7 +324,7 @@ export default function VendorMatrix({ matrixData }: VendorMatrixProps) {
               </div>
               {PRODUCT_CATEGORIES.map(cat => (
                 <div key={cat} className="font-medium text-sm text-center px-2">
-                  {tComponent(`categories.${cat}`)}
+                  {tShared(`categories.singular.${cat}`)}
                 </div>
               ))}
             </div>