Fixed bugs

app/[locale]/category/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
+import Text from '@/components/ui/text/text';
 import { categoryQuery } from '@/lib/sanity/queries';
 import { clientFetch } from '@/lib/sanity/sanity.client';
 import { Metadata } from 'next';
@@ -36,7 +37,12 @@ export default async function ProductPage({ params }: CategoryPageParams) {
 
   return (
     <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
-      <Search isCategory placeholder={title.toLowerCase()} title={title}>
+      {title && (
+        <Text className="mb-8 lg:mb-12" variant="pageHeading">
+          {title}
+        </Text>
+      )}
+      <Search isCategory placeholder={title.toLowerCase()}>
         <SearchResult />
       </Search>
     </div>

app/[locale]/product/[slug]/page.tsx

@@ -62,17 +62,7 @@ export default async function ProductPage({ params }: ProductPageParams) {
     '@type': 'Product',
     name: product.name,
     description: product.description,
-    // @TODO UPDATE TO STORM URL???
     image: product.images[0].asset.url
-    // offers: {
-    //   '@type': 'AggregateOffer',
-    //   availability: product.availableForSale
-    //     ? 'https://schema.org/InStock'
-    //     : 'https://schema.org/OutOfStock',
-    //   priceCurrency: product.priceRange.minVariantPrice.currencyCode,
-    //   highPrice: product.priceRange.maxVariantPrice.amount,
-    //   lowPrice: product.priceRange.minVariantPrice.amount
-    // }
   };
 
   return (

app/[locale]/search/page.tsx

@@ -2,6 +2,7 @@
 
 import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
+import Text from '@/components/ui/text/text';
 import { useTranslations } from 'next-intl';
 
 export default function SearchPage() {
@@ -9,7 +10,11 @@ export default function SearchPage() {
 
   return (
     <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
-      <Search title={t('search')}>
+      <Text className="mb-8 lg:mb-12" variant="pageHeading">
+        {t('search')}
+      </Text>
+
+      <Search>
         <SearchResult />
       </Search>
     </div>

components/cart/modal.tsx

@@ -70,10 +70,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                   );
 
                   return (
-                    <li
+                    <li key={i} className="flex w-full flex-col border-b border-neutral-300">
-                      key={i}
-                      className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
-                    >
                       <div className="relative flex w-full flex-row justify-between px-1 py-4">
                         <div className="absolute z-40 -mt-2 ml-[55px]">
                           <DeleteItemButton item={item} />
@@ -83,7 +80,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                           onClick={() => setIsOpen(false)}
                           className="z-30 flex flex-row space-x-4"
                         >
-                          <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                          <div className="relative h-16 w-16 cursor-pointer">
                             <Image
                               className="h-full w-full object-cover"
                               width={64}
@@ -111,7 +108,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             amount={item.cost.totalAmount.amount}
                             currencyCode={item.cost.totalAmount.currencyCode}
                           />
-                          <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                          <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 ">
                             <EditItemQuantityButton item={item} type="minus" />
                             <p className="w-6 text-center">
                               <span className="w-full text-sm">{item.quantity}</span>
@@ -165,7 +162,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                     onClick={() => setIsOpen(false)}
                     className="z-30 flex flex-row space-x-4"
                   >
-                    <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 "></div>
+                    <div className="relative h-16 w-16 cursor-pointer border-neutral-300 bg-neutral-300 "></div>
 
                     <div className="flex flex-1 flex-col text-base">
                       <span className="leading-tight">Product title</span>
@@ -188,7 +185,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                     onClick={() => setIsOpen(false)}
                     className="z-30 flex flex-row space-x-4"
                   >
-                    <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 "></div>
+                    <div className="relative h-16 w-16 cursor-pointer border-neutral-300 bg-neutral-300 "></div>
 
                     <div className="flex flex-1 flex-col text-base">
                       <span className="leading-tight">Product title</span>

components/layout/header/search/modal.tsx

@@ -55,6 +55,7 @@ export default function SearchModal() {
             <Hits
               hitComponent={Hit}
               classNames={{
+                root: 'flex flex-col flex-1 h-full overflow-auto pb-6',
                 list: 'mt-4 grid w-full grid-cols-1 overflow-auto gap-6'
               }}
             />

components/product/product-view.tsx

@@ -26,7 +26,7 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
   const { name, description, price, images } = product;
 
   return (
-    <div className="my-8 flex w-full flex-col lg:my-16">
+    <div className="mb-8 flex w-full flex-col lg:my-16">
       <div
         className={cn('relative grid grid-cols-1 items-start lg:grid-cols-12 lg:px-8 2xl:px-16')}
       >

components/search/search-result.tsx

@@ -40,7 +40,7 @@ export default function SearchResult() {
         classNames={{
           root: cn('flex flex-col flex-1'),
           list: cn(
-            'grid grid-cols-2 mt-4 gap-4 md:grid-cols-3 md:gap-8 lg:grid-cols-4 lg:gap-12 lg:mt-12'
+            'grid grid-cols-2 mt-4 gap-4 md:grid-cols-3 md:mt-8 lg:grid-cols-4 lg:gap-8 lg:mt-12 2xl:gap-12'
           ),
           loadMore:
             'border border-ui-border mt-4 px-6 py-3 inline-flex mx-auto w-auto disabled:opacity-50 disabled:cursor-not-allowed md:mt-8 lg:mt-12'

components/search/search.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import Text from '@/components/ui/text';
-
 import { cn } from 'lib/utils';
 import { useTranslations } from 'next-intl';
 import SearchRoot from './search-root';
@@ -12,28 +10,19 @@ import { ReactNode } from 'react';
 import { NoResults, NoResultsBoundary } from './no-result';
 
 interface SearchProps {
-  title?: string;
   placeholder?: string;
   className?: string;
   children: ReactNode;
   isCategory?: boolean;
 }
 
-export default function Search({ title, placeholder, children, isCategory = false }: SearchProps) {
+export default function Search({ placeholder, children, isCategory = false }: SearchProps) {
   const t = useTranslations('search');
 
-  console.log(isCategory);
-
   return (
     <SearchRoot>
       {/* Search top */}
       <div className="">
-        {title && (
-          <Text className="mb-8 lg:mb-12" variant="pageHeading">
-            {title}
-          </Text>
-        )}
-
         <SearchBox
           placeholder={
             placeholder

components/ui/sheet.tsx

@@ -24,7 +24,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-foreground/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-foreground/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}