import { proxy, useSnapshot } from 'valtio'
const state = proxy({ number: 0 })
state.nested = { ticks: 0 }
setInterval(() => state.nested.ticks++, 200)
const Figure = () => {
const snap = useSnapshot(state)
return <div className="figure">{snap.number}</div>
}
const Ticks = () => {
const snap = useSnapshot(state)
return <div className="ticks">{snap.nested.ticks} —</div>
}
const Controls = () => {
return (
<div className="logo">
<ButtonUp onClick={() => state.number++} />
<ButtonDown onClick={() => state.number--} />
</div>
)
}
const ButtonUp = ({ onClick }) => (
<svg viewBox="0 0 430 452" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
onClick={onClick}
d="M214.83 0.95459C82.4432 0.95459 0.0568237 91.2955 0.0568237 226.523C0.0568237 272.651 9.76549 313.624 27.8727 347.545L340.5 36.3569C306.7 13.5435 264.249 0.95459 214.83 0.95459Z"
fill="#A5FFCE"
/>
</svg>
)
const ButtonDown = ({ onClick }) => (
<svg viewBox="0 0 430 452" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
onClick={onClick}
d="M214.83 451.523C347.216 451.523 429.602 360.898 429.602 226.523C429.602 187.816 422.852 152.786 410.112 122.5L106 426.214C136.689 442.604 173.299 451.523 214.83 451.523Z"
fill="#FFBEC2"
/>
</svg>
)