feat: add support for react 19 (#264)

Co-authored-by: Valerio Ageno <valerioageno@yahoo.it>
This commit is contained in:
Marco Pasqualetti
2025-01-03 11:00:44 +01:00
committed by GitHub
parent 1dc77fc473
commit 592f402ffd
24 changed files with 329 additions and 426 deletions
@@ -5,5 +5,11 @@ interface RootRouteProps {
}
export default function RootRoute({ children }: RootRouteProps): JSX.Element {
return <main className="main">{children}</main>
return (
<html>
<body>
<main>{children}</main>
</body>
</html>
)
}
+18 -12
View File
@@ -1,6 +1,6 @@
// src/routes/index.tsx
import type { JSX } from 'react'
import { Head, type TuonoProps } from 'tuono'
import type { TuonoProps } from 'tuono'
import PokemonLink from '@/components/PokemonLink'
@@ -15,20 +15,25 @@ interface IndexProps {
export default function IndexPage({
data,
}: TuonoProps<IndexProps>): JSX.Element | null {
if (!data?.results) {
return null
}
if (!data?.results) return null
return (
<>
<Head>
<title>Tuono tutorial</title>
</Head>
<title>Tuono tutorial</title>
<header className="header">
<a href="https://crates.io/crates/tuono" target="_blank">
<a
href="https://crates.io/crates/tuono"
target="_blank"
rel="noreferrer"
>
Crates
</a>
<a href="https://www.npmjs.com/package/tuono" target="_blank">
<a
href="https://www.npmjs.com/package/tuono"
target="_blank"
rel="noreferrer"
>
Npm
</a>
</header>
@@ -43,9 +48,10 @@ export default function IndexPage({
</div>
<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
<PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
{data.results.map((pokemon, i) => {
return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
})}
{data.results.map((pokemon, i) => (
<PokemonLink key={i} pokemon={pokemon} id={i + 1} />
))}
</ul>
</>
)
@@ -1,5 +1,5 @@
import type { JSX } from 'react'
import { Head, type TuonoProps } from 'tuono'
import type { TuonoProps } from 'tuono'
import PokemonView from '@/components/PokemonView'
@@ -15,9 +15,8 @@ export default function PokemonPage({
}: TuonoProps<Pokemon>): JSX.Element {
return (
<>
<Head>
<title>{`Pokemon: ${data?.name}`}</title>
</Head>
<title>{`Pokemon: ${data?.name ?? ''}`}</title>
<PokemonView pokemon={data} />
</>
)
@@ -4,6 +4,7 @@
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}