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

Added prettier plugin tailwindcss to project

Browse Source
This commit is contained in:
Henrik Larsson 2023-05-22 09:15:53 +02:00
parent 716b33823b
commit 05c6a4d71f
4 changed files with 33 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/ui/product-card/product-card.tsx
View File

@ -1,35 +1,25 @@
'use client' 'use client';
import Price from 'components/product/price' import Price from 'components/product/price';
import Text from 'components/ui/text' import Text from 'components/ui/text';
import type { Product } from 'lib/storm/types/product' import type { Product } from 'lib/storm/types/product';
import { cn } from 'lib/utils' import { cn } from 'lib/utils';
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic';
import Link from 'next/link' import Link from 'next/link';
import { FC } from 'react' import { FC } from 'react';
const WishlistButton = dynamic( const WishlistButton = dynamic(() => import('components/ui/wishlist-button'));
() => import('components/ui/wishlist-button')
)
const SanityImage = dynamic(() => import('components/ui/sanity-image')) const SanityImage = dynamic(() => import('components/ui/sanity-image'));
interface Props { interface Props {
className?: string className?: string;
product: Product product: Product;
variant?: 'default' variant?: 'default';
} }
const ProductCard: FC<Props> = ({ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) => {
product, const rootClassName = cn('w-full group relative overflow-hidden', className);
className,
variant = 'default',
}) => {
const rootClassName = cn(
'w-full group relative overflow-hidden',
className
)
return ( return (
<Link <Link
@ -39,16 +29,13 @@ const ProductCard: FC<Props> = ({
locale={product.locale} locale={product.locale}
> >
{variant === 'default' && ( {variant === 'default' && (
<div className={'flex flex-col relative justify-center w-full h-full'}> <div className={'relative flex h-full w-full flex-col justify-center'}>
<WishlistButton <WishlistButton
className={'top-4 right-4 z-10 absolute'} className={'absolute right-4 top-4 z-10'}
productId={product.id} productId={product.id}
variant={ variant={product?.variants ? (product.variants[0] as any) : null}
product?.variants ? (product.variants[0] as any) : null
}
/> />
<div className="w-full h-full overflow-hidden relative"> <div className="relative h-full w-full overflow-hidden">
{product?.images && ( {product?.images && (
<SanityImage <SanityImage
image={product?.images[0]} image={product?.images[0]}
@ -58,25 +45,20 @@ const ProductCard: FC<Props> = ({
)} )}
</div> </div>
<div <div className={cn('flex flex-col items-start text-high-contrast', className)}>
className={cn('text-high-contrast flex items-start flex-col', className)} <Text className="mt-2 lg:mt-3" variant="listChildHeading">
>
<Text
className="mt-2 lg:mt-3"
variant='listChildHeading'
>
{product.title} {product.title}
</Text> </Text>
<Price <Price
className='text-sm font-medium leading-tight lg:text-base' className="text-sm font-medium leading-tight lg:text-base"
amount={`${product.price.value}`} amount={`${product.price.value}`}
currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'} currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
/> />
</div> </div>
</div> </div>
)} )}
</Link> </Link>
) );
} };
export default ProductCard export default ProductCard;

4
package.json
View File

@ -67,8 +67,8 @@
"eslint-plugin-unicorn": "^45.0.2", "eslint-plugin-unicorn": "^45.0.2",
"lint-staged": "^13.1.1", "lint-staged": "^13.1.1",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.4", "prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.2", "prettier-plugin-tailwindcss": "^0.2.7",
"tailwindcss": "^3.2.6", "tailwindcss": "^3.2.6",
"typescript": "4.9.5" "typescript": "4.9.5"
} }

4
pnpm-lock.yaml generated
View File

@ -35,8 +35,8 @@ specifiers:
next-intl: ^2.13.1 next-intl: ^2.13.1
next-sanity: ^4.2.0 next-sanity: ^4.2.0
postcss: ^8.4.21 postcss: ^8.4.21
prettier: ^2.8.4 prettier: ^2.8.7
prettier-plugin-tailwindcss: ^0.2.2 prettier-plugin-tailwindcss: ^0.2.7
react: 18.2.0 react: 18.2.0
react-cookie: ^4.1.1 react-cookie: ^4.1.1
react-dom: 18.2.0 react-dom: 18.2.0

4
prettier.config.js
View File

@ -6,5 +6,7 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
// pnpm doesn't support plugin autoloading // pnpm doesn't support plugin autoloading
// https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
plugins: [require('prettier-plugin-tailwindcss')] plugins: [require('prettier-plugin-tailwindcss')],
pluginSearchDirs: ["."],
tailwindConfig: './tailwind.config.js',
}; };