feat: implement browse by manufacturers section

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

components/manufacturers-grid/item.tsx

@@ -0,0 +1,29 @@
+import ImageDisplay from 'components/page/image-display';
+import { Metaobject } from 'lib/shopify/types';
+import { Suspense } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const ManufacturerItem = ({
+  manufacturer,
+  className
+}: {
+  manufacturer: Metaobject;
+  className?: string;
+}) => {
+  return (
+    <div className={twMerge('flex w-full flex-row items-center justify-between', className)}>
+      <span className="text-sm leading-5">{manufacturer.display_name}</span>
+      <div className="hidden md:block">
+        <Suspense>
+          <ImageDisplay
+            fileId={manufacturer.logo as string}
+            title={manufacturer.display_name || 'Logo'}
+            className="aspect-2 h-auto w-auto"
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export default ManufacturerItem;