Progress

1'use client'
2
3import * as React from 'react'
4
5import { Progress } from '@/components/ui/progress'
6
7export function ProgressDemo() {
8    const [progress, setProgress] = React.useState(13)
9
10    React.useEffect(() => {
11        const timer = setTimeout(() => setProgress(66), 500)
12        return () => clearTimeout(timer)
13    }, [])
14
15    return <Progress value={progress} className="w-[60%]" />
16}
17

1'use client'
2
3import * as React from 'react'
4
5import { Progress } from '@/components/ui/progress'
6
7export function ProgressSizeDemo() {
8    return (
9        <div className="mx-auto max-w-md space-y-4 p-4">
10            <div className="space-y-2">
11                <p className="text-primary text-xl font-semibold">
12                    Different Sizes
13                </p>
14            </div>
15            <div className="space-y-6">
16                <div className="space-y-2">
17                    <p className="text-primary text-sm">Small</p>
18                    <Progress value={45} className="h-1" />
19                </div>
20                <div className="space-y-2">
21                    <p className="text-primary text-sm">Default </p>
22                    <Progress value={65} />
23                </div>
24                <div className="space-y-2">
25                    <p className="text-primary text-sm">Large </p>
26                    <Progress value={80} className="h-3" />
27                </div>
28                <div className="space-y-2">
29                    <p className="text-primary text-sm">Extra Large </p>
30                    <Progress value={90} className="h-4" />
31                </div>
32            </div>
33        </div>
34    )
35}
36

1'use client'
2
3import * as React from 'react'
4
5import { Progress } from '@/components/ui/progress'
6
7export function ProgressIncrementalDemo() {
8    const [progress, setProgress] = React.useState(0)
9
10    React.useEffect(() => {
11        const interval = setInterval(() => {
12            setProgress((prev) => (prev >= 100 ? 0 : prev + 4))
13        }, 700)
14
15        return () => clearInterval(interval)
16    }, [])
17    return (
18        <div className="mx-auto max-w-md space-y-4 p-4">
19            <Progress value={progress} className="mb-1" />
20
21            <div className="text-right text-sm font-medium">
22                {progress}% completed
23            </div>
24        </div>
25    )
26}
27

1'use client'
2
3import * as React from 'react'
4
5import { Progress } from '@/components/ui/progress'
6
7export function ProgressColorDemo() {
8    return (
9        <div className="mx-auto max-w-md space-y-4 p-4">
10            <div className="space-y-2">
11                <p className="text-primary text-sm">Primary Progress</p>
12                <Progress
13                    value={60}
14                    className="h-1"
15                    indicatorColor="bg-secondary"
16                />
17            </div>
18
19            <div className="space-y-2">
20                <p className="text-primary text-sm">Success Progress</p>
21                <Progress
22                    value={70}
23                    className="h-1"
24                    indicatorColor="bg-success"
25                />
26            </div>
27
28            <div className="space-y-2">
29                <p className="text-primary text-sm">Warning Progress</p>
30                <Progress
31                    value={50}
32                    className="h-1"
33                    indicatorColor="bg-warning"
34                />
35            </div>
36
37            <div className="space-y-2">
38                <p className="text-primary text-sm">Error Progress</p>
39                <Progress
40                    value={30}
41                    className="h-1"
42                    indicatorColor="bg-danger"
43                />
44            </div>
45        </div>
46    )
47}
48

1'use client'
2
3import * as React from 'react'
4
5import { Label } from '@/components/ui/label'
6import { Progress } from '@/components/ui/progress'
7
8export function ProgressLabelDemo() {
9    return (
10        <div className="mx-auto max-w-md space-y-4 p-4">
11            <div className="space-y-2">
12                <p className="text-primary text-xl font-semibold">
13                    Event Preparation
14                </p>
15            </div>
16            <div className="space-y-6">
17                <div className="space-y-2">
18                    <Label>Venue Booking</Label>
19                    <Progress value={90} className="h-1" />
20                </div>
21                <div className="space-y-2">
22                    <Label>Invitations</Label>
23                    <Progress value={70} className="h-1" />
24                </div>
25                <div className="space-y-2">
26                    <Label>Decorations</Label>
27                    <Progress value={45} className="h-1" />
28                </div>
29                <div className="space-y-2">
30                    <Label>Catering</Label>
31                    <Progress value={60} className="h-1" />
32                </div>
33            </div>
34        </div>
35    )
36}
37

1'use client'
2
3import * as React from 'react'
4
5import { Progress } from '@/components/ui/progress'
6
7export function ProgressIncrementalDemo() {
8    const [uploadProgress, setUploadProgress] = React.useState(0)
9
10    React.useEffect(() => {
11        const uploadTimer = setInterval(() => {
12            setUploadProgress((prev) => {
13                if (prev >= 100) return 0
14                return prev + 4
15            })
16        }, 800)
17
18        return () => {
19            clearInterval(uploadTimer)
20        }
21    }, [])
22    return (
23        <div className="mx-auto max-w-md space-y-4 p-4">
24            <div className="space-y-2">
25                <p className="text-primary text-xl font-semibold">
26                    File Upload Progress
27                </p>
28                <p className="text-primary text-sm">
29                    Simulates a file upload with auto-incrementing progress
30                </p>
31            </div>
32            <div className="space-y-3">
33                <div className="flex items-center justify-between text-sm">
34                    <span className="text-primary font-medium">
35                        document.pdf
36                    </span>
37                    <span className="text-primary">{uploadProgress}%</span>
38                </div>
39                <Progress value={uploadProgress} />
40                <p className="text-primary text-xs">
41                    {uploadProgress === 100
42                        ? '✓ Upload complete!'
43                        : 'Uploading...'}
44                </p>
45            </div>
46        </div>
47    )
48}
49