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

49 lines
874 B
TypeScript

import { css } from "cssed/macro";
import Head from "next/head";
import { useState } from "react";
import { dark, light } from "../lib/theme";
const styles = css`
.box {
height: 200px;
width: 200px;
margin: 0 auto;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.dark {
background-color: ${dark};
}
.dark::before {
content: "🌚";
}
.light {
background-color: ${light};
}
.light::before {
content: "🌞";
}
`;
export default function Home() {
const [isDark, setDark] = useState(false);
return (
<>
<Head>
<title>With cssed</title>
</Head>
<div
onClick={() => setDark((prevState) => !prevState)}
className={styles.box + " " + (isDark ? styles.dark : styles.light)}
>
Cssed demo
</div>
</>
);
}