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

Adds dynamic product label font size

Browse Source
This commit is contained in:
Michael Novotny 2023-07-24 14:11:34 -05:00
parent 09250eba83
commit bae5bf1912
No known key found for this signature in database
12 changed files with 37 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/product/[handle]/page.tsx
View File

@ -125,8 +125,7 @@ async function RelatedProducts({ id }: { id: string }) {
>
<GridTileImage
alt={product.title}
labels={{
isSmall: true,
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode

2
app/search/[collection]/page.tsx
View File

@ -40,7 +40,7 @@ export default async function CategoryPage({
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
<Grid className="grid-cols-2 lg:grid-cols-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
)}

2
app/search/page.tsx
View File

@ -32,7 +32,7 @@ export default async function SearchPage({
</p>
) : null}
{products.length > 0 ? (
<Grid className="grid-cols-2 lg:grid-cols-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
) : null}

3
components/carousel.tsx
View File

@ -19,8 +19,7 @@ export async function Carousel() {
>
<GridTileImage
alt={product.title}
labels={{
isSmall: true,
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode

4
components/grid/three-items.tsx
View File

@ -13,10 +13,10 @@ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half
src={item.featuredImage.url}
width={size === 'full' ? 1080 : 540}
height={size === 'full' ? 1080 : 540}
labelPosition={size === 'full' ? 'center' : 'bottom'}
priority={true}
alt={item.title}
labels={{
label={{
position: size === 'full' ? 'center' : 'bottom',
title: item.title as string,
amount: item.priceRange.maxVariantPrice.amount,
currencyCode: item.priceRange.maxVariantPrice.currencyCode

21
components/grid/tile.tsx
View File

@ -5,18 +5,16 @@ import Label from '../label';
export function GridTileImage({
isInteractive = true,
active,
labelPosition,
labels,
label,
...props
}: {
isInteractive?: boolean;
active?: boolean;
labelPosition?: 'bottom' | 'center';
labels?: {
label?: {
title: string;
amount: string;
currencyCode: string;
isSmall?: boolean;
position?: 'bottom' | 'center';
};
} & React.ComponentProps<typeof Image>) {
return (
@ -24,7 +22,7 @@ export function GridTileImage({
className={clsx(
'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
{
relative: labels,
relative: label,
'border-2 border-blue-600': active,
'border-neutral-200 dark:border-neutral-800': !active
}
@ -39,13 +37,12 @@ export function GridTileImage({
{...props}
/>
) : null}
{labels ? (
{label ? (
<Label
title={labels.title}
amount={labels.amount}
currencyCode={labels.currencyCode}
size={labels.isSmall ? 'small' : 'large'}
position={labelPosition}
title={label.title}
amount={label.amount}
currencyCode={label.currencyCode}
position={label.position}
/>
) : null}
</div>

25
components/label.tsx
View File

@ -5,38 +5,25 @@ const Label = ({
title,
amount,
currencyCode,
position,
size
position = 'bottom'
}: {
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'
className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
'lg:px-20 lg:pb-[35%]': position === 'center'
})}
>
<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"
>
<div className="flex items-center rounded-full border bg-white/70 p-1 text-[10px] font-semibold text-black backdrop-blur-md @[275px]/label:text-xs dark:border-neutral-800 dark:bg-black/70 dark:text-white">
<h3 data-testid="product-name" className="mr-4 inline pl-2 leading-none tracking-tight">
{title}
</h3>
<Price
className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
className="flex-none rounded-full bg-blue-600 p-2 text-white"
amount={amount}
currencyCode={currencyCode}
/>

3
components/layout/product-grid-items.tsx
View File

@ -11,8 +11,7 @@ export default function ProductGridItems({ products }: { products: Product[] })
<Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
<GridTileImage
alt={product.title}
labels={{
isSmall: true,
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode

3
components/price.tsx
View File

@ -11,7 +11,8 @@ const Price = ({
style: 'currency',
currency: currencyCode,
currencyDisplay: 'narrowSymbol'
}).format(parseFloat(amount))} ${currencyCode}`}
}).format(parseFloat(amount))}`}
<span className="hidden @[275px]/label:inline">{` ${currencyCode}`}</span>
</p>
);

1
package.json
View File

@ -30,6 +30,7 @@
"react-dom": "18.2.0"
},
"devDependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.9",
"@types/node": "20.4.2",
"@types/react": "18.2.15",

11
pnpm-lock.yaml generated
View File

@ -21,6 +21,9 @@ dependencies:
version: 18.2.0(react@18.2.0)
devDependencies:
'@tailwindcss/container-queries':
specifier: ^0.1.1
version: 0.1.1(tailwindcss@3.3.3)
'@tailwindcss/typography':
specifier: ^0.5.9
version: 0.5.9(tailwindcss@3.3.3)
@ -355,6 +358,14 @@ packages:
tslib: 2.6.0
dev: false
/@tailwindcss/container-queries@0.1.1(tailwindcss@3.3.3):
resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
peerDependencies:
tailwindcss: '>=3.2.0'
dependencies:
tailwindcss: 3.3.3
dev: true
/@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
peerDependencies:

2
tailwind.config.js
View File

@ -1,5 +1,4 @@
const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');
/** @type {import('tailwindcss').Config} */
module.exports = {
@ -35,6 +34,7 @@ module.exports = {
hoverOnlyWhenSupported: true
},
plugins: [
require('@tailwindcss/container-queries'),
require('@tailwindcss/typography'),
plugin(({ matchUtilities, theme }) => {
matchUtilities(