1
0
mirror of https://github.com/vercel/commerce.git synced 2025-08-04 07:51:24 +00:00
Files
.github
.vscode
app
components
cart
grid
icons
layout
product
carousel.tsx
label.tsx
loading-dots.tsx
logo-square.tsx
opengraph-image.tsx
price.tsx
prose.tsx
e2e
fonts
lib
.env.example
.eslintrc.js
.gitignore
.nvmrc
.prettierignore
README.md
license.md
next.config.js
package.json
playwright.config.ts
pnpm-lock.yaml
postcss.config.js
prettier.config.js
tailwind.config.js
tsconfig.json
commerce/components/label.tsx
2023-07-17 16:40:44 -05:00

49 lines
1.2 KiB
TypeScript

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 w-full px-4 pb-4', {
'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]': position === 'center',
'px-4 pb-4 md:px-8 md:pb-8': size === 'large'
})}
>
<div
className={clsx(
'flex items-center rounded-full border bg-white/80 p-1 text-xs text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/80 dark:text-white',
{
'text-sm': size === 'large'
}
)}
>
<h3
data-testid="product-name"
className="mr-6 inline pl-2 font-semibold leading-none tracking-tight"
>
{title}
</h3>
<Price
className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
amount={amount}
currencyCode={currencyCode}
/>
</div>
</div>
);
};
export default Label;