crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 06:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

move label ui into own component

Browse Source
This commit is contained in:
StephDietz 2023-07-10 17:32:14 -05:00
parent 08726374f5
commit 2c9a68d1ff
3 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/carousel.tsx
View File

@ -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"
<Label
title={product.title}
amount={product.priceRange.maxVariantPrice.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
/>
</div>
</Link>
))}
</div>

27
components/grid/tile.tsx
View File

@ -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"
<Label
title={labels.title}
amount={labels.amount}
currencyCode={labels.currencyCode}
size="large"
position={labelPosition}
/>
</div>
) : null}
</div>
);

41
components/label.tsx Normal file
View File

@ -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;