fix: update PLP display

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/layout/search/filters/mobile-filters.tsx

@@ -3,20 +3,11 @@
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
 import { FunnelIcon } from '@heroicons/react/24/outline';
 import { XMarkIcon } from '@heroicons/react/24/solid';
-import { Filter, Menu } from 'lib/shopify/types';
-import { Fragment, useState } from 'react';
+import { Filter } from 'lib/shopify/types';
+import { Fragment, ReactNode, useState } from 'react';
 import Filters from './filters-list';
-import SubMenu from './sub-menu';
 
-const MobileFilters = ({
-  collection,
-  filters,
-  menu
-}: {
-  collection: string;
-  filters: Filter[];
-  menu: Menu[];
-}) => {
+const MobileFilters = ({ filters, menu }: { filters: Filter[]; menu: ReactNode }) => {
   const [openDialog, setOpenDialog] = useState(false);
 
   return (
@@ -64,7 +55,7 @@ const MobileFilters = ({
                   </button>
                 </div>
                 <div className="mt-4 border-t border-gray-200 px-4 pt-4">
-                  <SubMenu collection={collection} menu={menu} />
+                  {menu}
                   <Filters filters={filters} defaultOpen={false} />
                 </div>
               </DialogPanel>

components/layout/search/filters/sub-menu.tsx

@@ -1,7 +1,9 @@
-import { Menu } from 'lib/shopify/types';
+import { getMenu } from 'lib/shopify';
 import Link from 'next/link';
 
-const SubMenu = ({ menu, collection }: { menu: Menu[]; collection: string }) => {
+const SubMenu = async ({ collection }: { collection: string }) => {
+  const menu = await getMenu('main-menu');
+
   const subMenu = menu.find((item) => item.path === `/search/${collection}`)?.items || [];
 
   return subMenu.length ? (

components/layout/search/header.tsx

@@ -0,0 +1,21 @@
+import { getCollection } from 'lib/shopify';
+
+const Header = async ({ collection }: { collection: string }) => {
+  const collectionData = await getCollection(collection);
+
+  return collectionData ? (
+    <div className="mb-3 mt-3 max-w-5xl lg:mb-1">
+      <h1 className="text-4xl font-bold tracking-tight text-gray-900">{collectionData.title}</h1>
+      <p className="mt-2 text-base text-gray-500">{collectionData.description}</p>
+    </div>
+  ) : null;
+};
+
+export const HeaderPlaceholder = () => {
+  return (
+    <div className="mb-3 mt-3 max-w-5xl lg:mb-1">
+      <div className="h-10 w-1/2 rounded bg-gray-200" />
+    </div>
+  );
+};
+export default Header;

components/layout/search/placeholder.tsx

@@ -0,0 +1,25 @@
+import Grid from 'components/grid';
+
+const ProductsGridPlaceholder = () => {
+  return (
+    <section>
+      <Grid className="animate-pulse pt-5 lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
+        <aside className="hidden lg:flex lg:flex-col lg:gap-4">
+          <div className="h-32 w-full rounded bg-gray-200" />
+          <div className="h-32 w-full rounded bg-gray-200" />
+          <div className="h-32 w-full rounded bg-gray-200" />
+          <div className="h-32 w-full rounded bg-gray-200" />
+        </aside>
+        <div className="lg:col-span-2 xl:col-span-3">
+          <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+            {Array.from({ length: 9 }).map((_, index) => (
+              <div key={index} className="h-96 w-full rounded-lg bg-gray-200" />
+            ))}
+          </Grid>
+        </div>
+      </Grid>
+    </section>
+  );
+};
+
+export default ProductsGridPlaceholder;