mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
a1dbc073e4
This PR updates the `with-goober` example to use the App Router. Here
are the changes that have been made:
- Renamed the `pages` folder to the` app` folder.
- Converted the `index.tsx` to ` page.tsx ` file as part of the App
Router.
- Created a new `layout.tsx` file in the app directory.
- Merged functionality from both `_app.tsx` and `_document.tsx` into
`layout.tsx`:
- Goober setup from `_app.tsx`
- CSS extraction and injection from `_document.tsx`
- Updated the `package.json` file.
The following actions were performed as part of this PR:
- Ran `pnpm prettier-check` with no issues found.
- Executed the `pnpm check-examples` script.
**CC:** @samcx
---------
Co-authored-by: samcx <[email protected]>
29 lines
472 B
TypeScript
29 lines
472 B
TypeScript
import { styled } from "goober";
|
|
|
|
const Title = styled("h1")`
|
|
padding: 0;
|
|
margin: 0;
|
|
color: tomato;
|
|
`;
|
|
|
|
const SmallTitle = styled("p")`
|
|
font-size: 1em;
|
|
color: dodgerblue;
|
|
transition: padding 200ms ease-in-out;
|
|
padding: 1em;
|
|
|
|
&:hover {
|
|
padding-left: 2em;
|
|
color: darkseagreen;
|
|
}
|
|
`;
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Title>You are using 🥜 goober! Yay!</Title>
|
|
<SmallTitle>Go on, try it!</SmallTitle>
|
|
</>
|
|
);
|
|
}
|