mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
StevenandGitHub
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
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import Image from "next/image";
|
|
import getProducts from "../../sfcc.js";
|
|
|
|
export default function Product({ product }) {
|
|
return (
|
|
<div className="flex h-screen flex-col justify-between">
|
|
<div className="mx-auto mt-16 max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
|
<div className="mx-auto flex flex-col sm:flex-row">
|
|
<Image
|
|
alt="coffee"
|
|
className="rounded-lg"
|
|
src={product.imageGroups[0].images[0].link}
|
|
width={560}
|
|
height={640}
|
|
/>
|
|
<div className="mt-10 flex flex-col sm:mt-0 sm:ml-10">
|
|
<h1 className="mt-1 text-4xl font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-5xl">
|
|
{product.name}
|
|
</h1>
|
|
<h1 className="mt-3 text-4xl font-bold text-gray-500 sm:text-3xl sm:tracking-tight lg:text-3xl">
|
|
${product.price}
|
|
</h1>
|
|
<div className="mt-10 mb-5 border-t border-gray-200 pt-10 font-bold">
|
|
Description
|
|
</div>
|
|
<p className="max-w-xl">{product.longDescription}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export async function getStaticProps({ params }) {
|
|
const searchResults = await getProducts(params.slug);
|
|
const coffeeProduct = searchResults[0];
|
|
|
|
return {
|
|
props: {
|
|
product: coffeeProduct,
|
|
},
|
|
};
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
const coffeeProducts = await getProducts("coffee");
|
|
let fullPaths = [];
|
|
|
|
for (let product of coffeeProducts) {
|
|
fullPaths.push({ params: { slug: product.id } });
|
|
}
|
|
|
|
return {
|
|
paths: fullPaths,
|
|
fallback: "blocking",
|
|
};
|
|
}
|