move label ui into own component

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">
+            <Label
-              <h3 data-testid="product-name" className="mr-6 inline pl-2 text-xs font-semibold">
+              title={product.title}
-                {product.title}
+              amount={product.priceRange.maxVariantPrice.amount}
-              </h3>
+              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-              <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>
           </Link>
         ))}
       </div>

components/grid/tile.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import Image from 'next/image';
-
+import Label from '../label';
-import Price from 'components/price';
 
 export function GridTileImage({
   isInteractive = true,
@@ -42,29 +41,13 @@ export function GridTileImage({
         />
       ) : null}
       {labels ? (
-        <div
+        <Label
-          className={clsx(
+          title={labels.title}
-            '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',
+          amount={labels.amount}
-            labelPosition === 'center'
+          currencyCode={labels.currencyCode}
-              ? 'mb-2 ml-2 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
+          size="large"
-              : 'mb-2 ml-2 md:mb-8 md:ml-8'
+          position={labelPosition}
-          )}
+        />
-        >
-          <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>
       ) : null}
     </div>
   );

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;