feat: modify PLP layout

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

components/layout/search/filters/index.tsx

@@ -0,0 +1,30 @@
+import { getMenu } from 'lib/shopify';
+import Link from 'next/link';
+
+const Filters = async ({ collection }: { collection: string }) => {
+  const menu = await getMenu('main-menu');
+  const subMenu = menu.find((item) => item.path === `/search/${collection}`)?.items || [];
+  return (
+    <div>
+      {subMenu.length ? (
+        <>
+          <h3 className="sr-only">Categories</h3>
+          <ul
+            role="list"
+            className="space-y-4 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900"
+          >
+            {subMenu.map((subMenuItem) => (
+              <li key={subMenuItem.title}>
+                <Link href={subMenuItem.path} className="hover:underline">
+                  {subMenuItem.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+    </div>
+  );
+};
+
+export default Filters;

components/layout/search/sorting-menu/index.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { sorting } from 'lib/constants';
+import { Fragment } from 'react';
+import SortingItem from './item';
+
+const SortingMenu = () => {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
+          Sort
+          <ChevronDownIcon
+            className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+            aria-hidden="true"
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {sorting.map((option) => (
+              <Menu.Item key={option.title}>
+                {({ active }) => (
+                  <div>
+                    <SortingItem item={option} hover={active} />
+                  </div>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
+
+export default SortingMenu;

components/layout/search/sorting-menu/item.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { SortFilterItem } from 'lib/constants';
+import { createUrl } from 'lib/utils';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+const SortingItem = ({ item, hover }: { item: SortFilterItem; hover: boolean }) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const active = searchParams.get('sort') === item.slug;
+  const q = searchParams.get('q');
+  const href = createUrl(
+    pathname,
+    new URLSearchParams({
+      ...(q && { q }),
+      ...(item.slug && item.slug.length && { sort: item.slug })
+    })
+  );
+  const DynamicTag = active ? 'p' : Link;
+  return (
+    <DynamicTag
+      prefetch={!active ? false : undefined}
+      href={href}
+      className={clsx('block px-4 py-2 text-sm', {
+        'font-medium text-gray-900': active,
+        'text-gray-500': !active,
+        'bg-gray-100': hover,
+        'bg-transparent': !hover
+      })}
+    >
+      {item.title}
+    </DynamicTag>
+  );
+};
+
+export default SortingItem;