mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
## 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
49 lines
874 B
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|