chore: transfer repo

components/grid/index.tsx

@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+function Grid(props: React.ComponentProps<'ul'>) {
+  return (
+    <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
+      {props.children}
+    </ul>
+  );
+}
+
+function GridItem(props: React.ComponentProps<'li'>) {
+  return (
+    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
+      {props.children}
+    </li>
+  );
+}
+
+Grid.Item = GridItem;
+
+export default Grid;

components/grid/three-items.tsx

@@ -0,0 +1,61 @@
+import { GridTileImage } from 'components/grid/tile';
+import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+
+function ThreeItemGridItem({
+  item,
+  size,
+  priority
+}: {
+  item: Product;
+  size: 'full' | 'half';
+  priority?: boolean;
+}) {
+  return (
+    <div
+      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
+    >
+      <Link
+        className="relative block aspect-square h-full w-full"
+        href={`/product/${item.handle}`}
+        prefetch={true}
+      >
+        <GridTileImage
+          src={item.featuredImage.url}
+          fill
+          sizes={
+            size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
+          }
+          priority={priority}
+          alt={item.title}
+          label={{
+            position: size === 'full' ? 'center' : 'bottom',
+            title: item.title as string,
+            amount: item.priceRange.maxVariantPrice.amount,
+            currencyCode: item.priceRange.maxVariantPrice.currencyCode
+          }}
+        />
+      </Link>
+    </div>
+  );
+}
+
+export async function ThreeItemGrid() {
+  // Collections that start with `hidden-*` are hidden from the search page.
+  const homepageItems = await getCollectionProducts({
+    collection: 'hidden-homepage-featured-items'
+  });
+
+  if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
+
+  const [firstProduct, secondProduct, thirdProduct] = homepageItems;
+
+  return (
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
+      <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
+      <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
+      <ThreeItemGridItem size="half" item={thirdProduct} />
+    </section>
+  );
+}

components/grid/tile.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import Label from '../Label';
+
+export function GridTileImage({
+  isInteractive = true,
+  active,
+  label,
+  ...props
+}: {
+  isInteractive?: boolean;
+  active?: boolean;
+  label?: {
+    title: string;
+    amount: string;
+    currencyCode: string;
+    position?: 'bottom' | 'center';
+  };
+} & React.ComponentProps<typeof Image>) {
+  return (
+    <div
+      className={clsx(
+        'group flex h-full w-full items-center justify-center overflow-hidden',
+      )}
+    >
+      {props.src ? (
+        <Image
+          className='relative h-full w-full object-contain'
+          {...props}
+        />
+      ) : null}
+      {label ? (
+        <Label
+          title={label.title}
+          amount={label.amount}
+          currencyCode={label.currencyCode}
+          position={label.position}
+        />
+      ) : null}
+    </div>
+  );
+}