Files
StevenandGitHub 4466ba436b chore(examples): use default prettier for examples/templates (#60530)
## 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
2024-01-11 16:01:44 -07:00

54 lines
1.0 KiB
TypeScript

import Head from "next/head";
import StitchesLogo from "../components/StitchesLogo";
import { styled } from "../stitches.config";
const Box = styled("div", {});
const Text = styled("p", {
fontFamily: "$system",
color: "$hiContrast",
});
const Link = styled("a", {
fontFamily: "$system",
textDecoration: "none",
color: "$purple600",
});
const Container = styled("div", {
marginX: "auto",
paddingX: "$3",
variants: {
size: {
1: {
maxWidth: "300px",
},
2: {
maxWidth: "585px",
},
3: {
maxWidth: "865px",
},
},
},
});
export default function Home() {
return (
<Box css={{ paddingY: "$6" }}>
<Head>
<title>Use Stitches with Next.js</title>
</Head>
<Container size={{ "@initial": "1", "@bp1": "2" }}>
<StitchesLogo />
<Text as="h1">Hello, from Stitches.</Text>
<Text>
For full documentation, visit{" "}
<Link href="https://stitches.dev">stitches.dev</Link>.
</Text>
</Container>
</Box>
);
}