4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
function cn(...classes) {
|
|
return classes.filter(Boolean).join(" ");
|
|
}
|
|
|
|
export default function ProductCard({ product }) {
|
|
const [isLoading, setLoading] = useState(true);
|
|
|
|
return (
|
|
<Link href={`/products/${product.id}`} className="group">
|
|
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
|
|
<Image
|
|
alt="product image"
|
|
src={product.imageGroups[0].images[0].link}
|
|
fill
|
|
className={cn(
|
|
"object-cover duration-700 ease-in-out group-hover:opacity-75 ",
|
|
isLoading
|
|
? "scale-110 blur-2xl grayscale"
|
|
: "scale-100 blur-0 grayscale-0",
|
|
)}
|
|
onLoad={() => setLoading(false)}
|
|
/>
|
|
</div>
|
|
<div className="mt-4 flex items-center justify-between text-base font-medium text-gray-900">
|
|
<h3>{product.name}</h3>
|
|
<p>${product.price}</p>
|
|
</div>
|
|
<p className="mt-1 text-sm italic text-gray-500">
|
|
{product.shortDescription}
|
|
</p>
|
|
</Link>
|
|
);
|
|
}
|