Structural changes

components/ui/card/card.tsx

@@ -1,48 +1,49 @@
-'use client'
+'use client';
 
-import SanityImage from 'components/ui/sanity-image'
-import { cn } from 'lib/utils'
-import Link from 'next/link'
-import { FC } from 'react'
+import SanityImage from 'components/ui/sanity-image';
+import { cn } from 'lib/utils';
+import Link from 'next/link';
+import { FC } from 'react';
 
 interface CardProps {
-  className?: string
-  title: string
-  image: object | any
-  link: object | any
-  text?: string
-  imageFormat?: 'square' | 'portrait' | 'landscape'
+  className?: string;
+  title: string;
+  image: object | any;
+  link: object | any;
+  text?: string;
+  imageFormat?: 'square' | 'portrait' | 'landscape';
 }
 
-const placeholderImg = '/product-img-placeholder.svg'
+const placeholderImg = '/product-img-placeholder.svg';
 
-const Card: FC<CardProps> = ({
-  className,
-  title,
-  image,
-  link,
-  text,
-  imageFormat = 'square',
-}) => {
-  const rootClassName = cn('relative', className)
+const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
+  const rootClassName = cn('relative', className);
 
-  const { linkType } = link
+  const { linkType } = link;
 
   const imageWrapperClasses = cn('w-full h-full overflow-hidden relative', {
     ['aspect-square']: imageFormat === 'square',
     ['aspect-[3/4]']: imageFormat === 'portrait',
-    ['aspect-[4/3]']: imageFormat === 'landscape',
-  })
-  const imageClasses = cn('object-cover w-full h-full')
+    ['aspect-[4/3]']: imageFormat === 'landscape'
+  });
+  const imageClasses = cn('object-cover w-full h-full');
 
   function Card() {
     if (linkType === 'internal') {
+      const type = link.internalLink.reference._type;
+
+      let href = '';
+
+      if (type === 'product') {
+        href = `/product/${link.internalLink.reference.slug.current}`;
+      } else if (type === 'category') {
+        href = `/category/${link.internalLink.reference.slug.current}`;
+      } else {
+        return `${link.internalLink.reference.slug.current}`;
+      }
+
       return (
-        <Link
-          href={link.internalLink.reference.slug.current}
-          className={rootClassName}
-          aria-label={title}
-        >
+        <Link href={href} className={rootClassName} aria-label={title}>
           <div className="flex flex-col">
             {image && (
               <div className={imageWrapperClasses}>
@@ -54,25 +55,17 @@ const Card: FC<CardProps> = ({
                 />
               </div>
             )}
-            <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+            <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
               {title}
             </h3>
-            {text && (
-              <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-                {text}
-              </p>
-            )}
+            {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
           </div>
         </Link>
-      )
+      );
     }
 
     return (
-      <a
-        href={link.externalLink.url}
-        className={rootClassName}
-        aria-label={title}
-      >
+      <a href={link.externalLink.url} className={rootClassName} aria-label={title}>
         <div className="flex flex-col">
           {image && (
             <div className={imageWrapperClasses}>
@@ -84,20 +77,16 @@ const Card: FC<CardProps> = ({
               />
             </div>
           )}
-          <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+          <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
             {title}
           </h3>
-          {text && (
-            <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-              {text}
-            </p>
-          )}
+          {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
         </div>
       </a>
-    )
+    );
   }
 
-  return <Card />
-}
+  return <Card />;
+};
 
-export default Card
+export default Card;

components/ui/locale-switcher/locale-switcher.tsx

@@ -7,7 +7,7 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { i18n } from '../../../i18n-config';
+import { supportedLanguages } from '../../../i18n-config';
 
 interface LocaleSwitcherProps {
   currentLocale: string;
@@ -58,7 +58,7 @@ export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwit
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="drop-shadow-xl">
           <ul className="">
-            {i18n.locales.map((locale) => {
+            {supportedLanguages.locales.map((locale) => {
               if (currentLocale === locale.id) {
                 return;
               } else {

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

@@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
 
   return (
     <Link
-      href={`${product.slug}`}
+      href={`/product/${product.slug}`}
       className={rootClassName}
       aria-label={product.name}
       locale={product.locale}