fix: update PLP UI

components/layout/search/collection-link.tsx

@@ -0,0 +1,25 @@
+import { getCollection } from 'lib/shopify';
+import { cn } from 'lib/utils';
+import Link from 'next/link';
+
+const CollectionLink = async ({
+  collectionLinkId,
+  anchorText,
+  className
+}: {
+  collectionLinkId: string;
+  anchorText: string;
+  className?: string;
+}) => {
+  const collection = await getCollection({ id: collectionLinkId });
+
+  if (!collection) return null;
+
+  return (
+    <Link href={collection.path} className={cn('border p-2 text-sm text-gray-600', className)}>
+      {anchorText}
+    </Link>
+  );
+};
+
+export default CollectionLink;

components/layout/search/header.tsx

@@ -1,13 +1,49 @@
-import { getCollection } from 'lib/shopify';
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import { Suspense } from 'react';
+import CollectionLink from './collection-link';
+
+const HelpfulLinks = async ({ ids }: { ids: string[] | null }) => {
+  if (!ids?.length) return null;
+
+  const links = await getMetaobjectsByIds(ids);
+
+  return (
+    <div className="flex w-full flex-wrap items-center gap-3 py-2">
+      {links.map((link) => (
+        <CollectionLink
+          key={link.id}
+          collectionLinkId={link.collection_link!}
+          anchorText={link.anchor_text!}
+          className="rounded border border-gray-600 px-3 py-1 text-sm"
+        />
+      ))}
+    </div>
+  );
+};
+
+const HelpfulLinksPlaceholder = () => {
+  return (
+    <div className="flex w-full animate-pulse items-center gap-3 py-2">
+      <div className="h-[30px] w-[150px] rounded bg-gray-200" />
+      <div className="h-[30px] w-[150px] rounded bg-gray-200" />
+      <div className="h-[30px] w-[150px] rounded bg-gray-200" />
+    </div>
+  );
+};
 
 const Header = async ({ collection }: { collection: string }) => {
   const collectionData = await getCollection({ handle: 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>
+    <>
+      <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>
+      <Suspense fallback={<HelpfulLinksPlaceholder />}>
+        <HelpfulLinks ids={collectionData.helpfulLinksTop} />
+      </Suspense>
+    </>
   ) : null;
 };
 
@@ -18,4 +54,5 @@ export const HeaderPlaceholder = () => {
     </div>
   );
 };
+
 export default Header;

components/layout/search/helpful-links.tsx

@@ -1,23 +1,6 @@
 import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import Link from 'next/link';
+import CollectionLink from './collection-link';
 
-const LinkItem = async ({
-  collectionLinkId,
-  anchorText
-}: {
-  collectionLinkId: string;
-  anchorText: string;
-}) => {
-  const collection = await getCollection({ id: collectionLinkId });
-
-  if (!collection) return null;
-
-  return (
-    <Link href={collection.path} className="border p-2 text-sm text-gray-600">
-      {anchorText}
-    </Link>
-  );
-};
 const HelpfulLinks = async ({ collection }: { collection: string }) => {
   const collectionData = await getCollection({ handle: collection });
   if (!collectionData || !collectionData.helpfulLinks) return null;
@@ -30,7 +13,7 @@ const HelpfulLinks = async ({ collection }: { collection: string }) => {
 
       <div className="flex flex-wrap items-center gap-2">
         {helpfulLinks.map((link) => (
-          <LinkItem
+          <CollectionLink
             key={link.id}
             collectionLinkId={link.collection_link!}
             anchorText={link.anchor_text!}