mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
7474f10c96
This PR updates the with-styled-components example to use the App Router. Here are the changes that have been made: - Renamed the `pages` folder to the `app` folder. - Updated the routing for `/` & `/about` files to align with the App Router. - Added the `layout.tsx` file as part of the App Router. - 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]>
62 lines
1.1 KiB
TypeScript
62 lines
1.1 KiB
TypeScript
import styled from "styled-components";
|
|
|
|
const Container = styled.div`
|
|
padding: 0 0.5rem;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
min-height: 100vh;
|
|
`;
|
|
const Main = styled.main`
|
|
padding: 5rem 0;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`;
|
|
|
|
const Title = styled.h1`
|
|
margin: 0;
|
|
line-height: 1.15;
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
a {
|
|
color: ${({ theme }) => theme.colors.secondary};
|
|
text-decoration: none;
|
|
&:hover,
|
|
:focus,
|
|
:active {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Description = styled.p`
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
font-size: 1.5rem;
|
|
`;
|
|
const CodeTag = styled.code`
|
|
background: #fafafa;
|
|
border-radius: 5px;
|
|
margin: 0 0.75rem;
|
|
padding: 0.75rem;
|
|
font-size: 1.1rem;
|
|
font-family:
|
|
Menlo,
|
|
Monaco,
|
|
Lucida Console,
|
|
Liberation Mono,
|
|
DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono,
|
|
Courier New,
|
|
monospace;
|
|
`;
|
|
|
|
export { Container, Main, Title, Description, CodeTag };
|