5dd4999b64
Strategized with @balazsorban44 to open one larger PR, with changes to individual examples as separate commits. For each example, I researched how multiple realworld codebases use the featured technology with TypeScript, to thoughtfully convert them by hand - nothing automated whatsoever. ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
40 lines
802 B
TypeScript
40 lines
802 B
TypeScript
import { useState } from 'react'
|
|
|
|
function ClientSideComponent() {
|
|
return (
|
|
<>
|
|
<style jsx>
|
|
{`
|
|
.title {
|
|
font-size: 24px;
|
|
color: green;
|
|
}
|
|
`}
|
|
</style>
|
|
<p className="title">This is rendered on client-side</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function Home() {
|
|
const [isVisible, setVisibility] = useState(false)
|
|
|
|
const toggleVisibility = () => {
|
|
setVisibility((prevState) => !prevState)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<style jsx>
|
|
{`
|
|
.title {
|
|
font-size: 24px;
|
|
}
|
|
`}
|
|
</style>
|
|
<p className="title">Styled-JSX with Content Security Policy</p>
|
|
<button onClick={toggleVisibility}>Toggle</button>
|
|
{isVisible ? <ClientSideComponent /> : null}
|
|
</>
|
|
)
|
|
}
|