From 2c9a68d1ffd0f3d813475719862209e2e40278de Mon Sep 17 00:00:00 2001
From: StephDietz <steph.dietz@vercel.com>
Date: Mon, 10 Jul 2023 17:32:14 -0500
Subject: [PATCH] move label ui into own component

---
 components/carousel.tsx  | 17 ++++++-----------
 components/grid/tile.tsx | 33 ++++++++------------------------
 components/label.tsx     | 41 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 36 deletions(-)
 create mode 100644 components/label.tsx

diff --git a/components/carousel.tsx b/components/carousel.tsx
index 78254d05b..fe1c244d9 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -1,7 +1,7 @@
 import { getCollectionProducts } from 'lib/shopify';
 import Image from 'next/image';
 import Link from 'next/link';
-import Price from './price';
+import Label from './label';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
@@ -27,16 +27,11 @@ export async function Carousel() {
                 src={product.featuredImage.url}
               />
             ) : null}
-            <div className="absolute bottom-0 left-0 mb-4 ml-4 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white">
-              <h3 data-testid="product-name" className="mr-6 inline pl-2 text-xs font-semibold">
-                {product.title}
-              </h3>
-              <Price
-                className="flex-none rounded-full bg-blue-600 p-2 text-xs font-semibold text-white"
-                amount={product.priceRange.maxVariantPrice.amount}
-                currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-              />
-            </div>
+            <Label
+              title={product.title}
+              amount={product.priceRange.maxVariantPrice.amount}
+              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            />
           </Link>
         ))}
       </div>
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index 12f696fbe..6ddb31a65 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import Image from 'next/image';
-
-import Price from 'components/price';
+import Label from '../label';
 
 export function GridTileImage({
   isInteractive = true,
@@ -42,29 +41,13 @@ export function GridTileImage({
         />
       ) : null}
       {labels ? (
-        <div
-          className={clsx(
-            'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
-            labelPosition === 'center'
-              ? 'mb-2 ml-2 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
-              : 'mb-2 ml-2 md:mb-8 md:ml-8'
-          )}
-        >
-          <h3
-            data-testid="product-name"
-            className={clsx(
-              'mr-6 inline pl-2 font-semibold',
-              !labels.isSmall ? 'text-sm' : 'text-sm'
-            )}
-          >
-            {labels.title}
-          </h3>
-          <Price
-            className="flex-none rounded-full bg-blue-600 p-2 text-sm font-semibold text-white"
-            amount={labels.amount}
-            currencyCode={labels.currencyCode}
-          />
-        </div>
+        <Label
+          title={labels.title}
+          amount={labels.amount}
+          currencyCode={labels.currencyCode}
+          size="large"
+          position={labelPosition}
+        />
       ) : null}
     </div>
   );
diff --git a/components/label.tsx b/components/label.tsx
new file mode 100644
index 000000000..4fadc0480
--- /dev/null
+++ b/components/label.tsx
@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import Price from './price';
+
+const Label = ({
+  title,
+  amount,
+  currencyCode,
+  position,
+  size
+}: {
+  title: string;
+  amount: string;
+  currencyCode: string;
+  position?: 'bottom' | 'center';
+  size?: 'large' | 'small';
+}) => {
+  return (
+    <div
+      className={clsx(
+        'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
+        size === 'large' ? 'text-sm' : 'text-xs',
+        position === 'center'
+          ? 'mb-4 ml-4 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
+          : size === 'large'
+          ? 'mb-4 ml-4 md:mb-8 md:ml-8'
+          : 'mb-4 ml-4'
+      )}
+    >
+      <h3 data-testid="product-name" className="mr-6 inline pl-2 font-semibold">
+        {title}
+      </h3>
+      <Price
+        className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
+        amount={amount}
+        currencyCode={currencyCode}
+      />
+    </div>
+  );
+};
+
+export default Label;