Iterated search experience

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

@@ -1,6 +1,7 @@
-import Text from 'components/ui/text/text';
-import { categoryQuery } from 'lib/sanity/queries';
-import { clientFetch } from 'lib/sanity/sanity.client';
+import Search from '@/components/search/search';
+import SearchResult from '@/components/search/search-result';
+import { categoryQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
@@ -34,8 +35,10 @@ export default async function ProductPage({ params }: CategoryPageParams) {
   const { title } = category;
 
   return (
-    <div className="my-8 flex w-full flex-col px-4 lg:my-16 lg:px-8 2xl:px-16">
-      <Text variant={'pageHeading'}>{title}</Text>
+    <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}>
+        <SearchResult />
+      </Search>
     </div>
   );
 }

app/[locale]/globals.css

@@ -77,7 +77,7 @@ body {
 
 /* DYNAMIC CONTENT MANAGER */
 .dynamic-content > :not(.hero) {
-  @apply my-16 lg:my-24;
+  @apply my-12 md:my-16 lg:my-24;
 }
 
 .dynamic-content > :first-child {
@@ -85,7 +85,7 @@ body {
 }
 
 .dynamic-content > :last-child {
-  @apply mb-16 lg:mb-24;
+  @apply mb-12 md:mb-16 lg:mb-24;
 }
 
 .dynamic-content .dynamic-content {

app/[locale]/search/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import Search from '@/components/search/search';
+import SearchResult from '@/components/search/search-result';
+import { useTranslations } from 'next-intl';
+
+export default function SearchPage() {
+  const t = useTranslations('search');
+
+  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')}>
+        <SearchResult />
+      </Search>
+    </div>
+  );
+}