commerce/app/[locale]/[[...slug]]/pages/category-page.tsx

import Search from '@/components/search/search';
import SearchResult from '@/components/search/search-result';
import Text from '@/components/ui/text/text';
import { clientFetch } from '@/lib/sanity/sanity.client';
import { notFound } from 'next/navigation';

interface CategoryPageParams {
  query: string;
  queryParams: {
    slug: string;
    locale: string;
  };
}

export default async function CategoryPage({ query, queryParams }: CategoryPageParams) {
  const category = await clientFetch(query, queryParams);

  if (!category) return notFound();

  const { title } = category;

  return (
    <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
      {title && (
        <Text className="mb-8 lg:mb-12" variant="pageHeading">
          {title}
        </Text>
      )}
      <Search isCategory placeholder={title.toLowerCase()}>
        <SearchResult />
      </Search>
    </div>
  );
}