Rewrite URLs for app router folders

components/ui/category-card/category-card.tsx

@@ -1,32 +1,30 @@
-'use client'
-
-import SanityImage from 'components/ui/sanity-image'
-import { cn } from 'lib/utils'
-import Link from 'next/link'
-import { FC } from 'react'
-
+'use client';
 
+import SanityImage from 'components/ui/sanity-image';
+import { cn } from 'lib/utils';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { FC } from 'react';
 interface Props {
-  className?: string
-  category: any
+  className?: string;
+  category: any;
 }
 
-const placeholderImg = '/product-img-placeholder.svg'
-
 const CategoryCard: FC<Props> = ({ category, className }) => {
   const rootClassName = cn(
     'w-1/2 min-w-0 grow-0 shrink-0 group relative box-border overflow-hidden transition-transform ease-linear cursor-pointer basis-[50%]',
     className
-  )
+  );
+  const t = useTranslations('routes');
 
   return (
     <Link
-      href={`${category.slug}`}
+      href={`/${t('category')}/${category.slug}`}
       className={rootClassName}
       aria-label={category.name}
     >
-      <div className={'flex flex-col flex-1 justify-center w-full h-full'}>
-        <div className="w-full h-full aspect-[3/4] relative">
+      <div className={'flex h-full w-full flex-1 flex-col justify-center'}>
+        <div className="relative aspect-[3/4] h-full w-full">
           <SanityImage
             image={category.image}
             alt={category.name || 'Category Image'}
@@ -34,13 +32,13 @@ const CategoryCard: FC<Props> = ({ category, className }) => {
             height={400}
             sizes="(max-width: 1024px) 50vw, 25vw"
           />
-          <div className="absolute font-medium bg-high-contrast text-white py-3 px-6 md:py-5 md:px-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-high-contrast px-6 py-3 font-medium text-white md:px-10 md:py-5">
             {category.title}
           </div>
         </div>
       </div>
     </Link>
-  )
-}
+  );
+};
 
-export default CategoryCard
+export default CategoryCard;

components/ui/product-card/product-card.tsx

@@ -5,6 +5,7 @@ import type { Product } from '@/lib/storm/product';
 import Price from 'components/price';
 import Text from 'components/ui/text';
 import { cn } from 'lib/utils';
+import { useLocale, useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { FC } from 'react';
 interface Props {
@@ -15,10 +16,12 @@ interface Props {
 
 const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) => {
   const rootClassName = cn('w-full group relative overflow-hidden', className);
+  const t = useTranslations('routes');
+  const locale = useLocale();
 
   return (
     <Link
-      href={`/product/${product.slug}`}
+      href={`/${locale}/${t('product')}/${product.slug}`}
       className={rootClassName}
       aria-label={product.name}
       locale={product.locale}