Progress , shadcn/ui components例

id: 147, 2024-09-09

概要

shadcn/ui , Progress 実装例になります。
まとめリンクは、下記になります。
https://knakatech-blog.pages.dev/books/12

関連

https://ui.shadcn.com/docs/components/progress

src/client/Progress.tsx
https://github.com/kuc-arc-f/express_49preact/blob/main/src/client/Progress.tsx

const [progress, setProgress] = useState(13)

useEffect(() => {
const timer = setTimeout(() => setProgress(95), 500)
return () => clearTimeout(timer)
}, [])

return(
<div className="container mx-auto my-2 px-8 bg-white">
    <Head />
    <h1 className="text-4xl font-bold">Progress</h1>
    <hr className="my-2" />
    <Progress value={progress} className="w-[60%]" />
</div>
);