31 lines
769 B
TypeScript
31 lines
769 B
TypeScript
import { useEffect, useState } from 'react'
|
|
import { Button } from './ui/button'
|
|
import { createClientOnlyFn } from '@tanstack/react-start'
|
|
import { ClientOnly } from '@tanstack/react-router'
|
|
|
|
export function LocalCountButton() {
|
|
return (
|
|
<ClientOnly fallback="sdfsdfsdfsdf">
|
|
<ClientSection />
|
|
</ClientOnly>
|
|
)
|
|
}
|
|
|
|
function ClientSection() {
|
|
const [count, setCount] = useState(loadCount)
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('count', count.toString())
|
|
}, [count])
|
|
|
|
return (
|
|
<Button variant="outline" size="sm" onClick={() => setCount((c) => c + 1)}>
|
|
{count}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const loadCount = createClientOnlyFn(() => {
|
|
const storedCount = localStorage.getItem('count')
|
|
return storedCount ? parseInt(storedCount) : 0
|
|
})
|