Progress

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/radix-sera/components/example"
9import { Field, FieldLabel } from "@/registry/radix-sera/ui/field"
10import {
11  Item,
12  ItemActions,
13  ItemContent,
14  ItemGroup,
15  ItemMedia,
16  ItemTitle,
17} from "@/registry/radix-sera/ui/item"
18import { Progress } from "@/registry/radix-sera/ui/progress"
19import { Slider } from "@/registry/radix-sera/ui/slider"
20import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
21 
22export default function ProgressExample() {
23  return (
24    <ExampleWrapper>
25      <ProgressValues />
26      <ProgressWithLabel />
27      <ProgressControlled />
28      <FileUploadList />
29    </ExampleWrapper>
30  )
31}
32 
33function ProgressValues() {
34  return (
35    <Example title="Progress Bar">
36      <div className="flex w-full flex-col gap-4">
37        <Progress value={0} />
38        <Progress value={25} className="w-full" />
39        <Progress value={50} />
40        <Progress value={75} />
41        <Progress value={100} />
42      </div>
43    </Example>
44  )
45}
46 
47function ProgressWithLabel() {
48  return (
49    <Example title="With Label">
50      <Field>
51        <FieldLabel htmlFor="progress-upload">
52          <span>Upload progress</span>
53          <span className="ml-auto">66%</span>
54        </FieldLabel>
55        <Progress value={66} className="w-full" id="progress-upload" />
56      </Field>
57    </Example>
58  )
59}
60 
61function ProgressControlled() {
62  const [value, setValue] = React.useState([50])
63 
64  return (
65    <Example title="Controlled">
66      <div className="flex w-full flex-col gap-4">
67        <Progress value={value[0]} className="w-full" />
68        <Slider
69          value={value}
70          onValueChange={setValue}
71          min={0}
72          max={100}
73          step={1}
74        />
75      </div>
76    </Example>
77  )
78}
79 
80function FileUploadList() {
81  const files = React.useMemo(
82    () => [
83      {
84        id: "1",
85        name: "document.pdf",
86        progress: 45,
87        timeRemaining: "2m 30s",
88      },
89      {
90        id: "2",
91        name: "presentation.pptx",
92        progress: 78,
93        timeRemaining: "45s",
94      },
95      {
96        id: "3",
97        name: "spreadsheet.xlsx",
98        progress: 12,
99        timeRemaining: "5m 12s",
100      },
101      {
102        id: "4",
103        name: "image.jpg",
104        progress: 100,
105        timeRemaining: "Complete",
106      },
107    ],
108    []
109  )
110 
111  return (
112    <Example title="File Upload List">
113      <ItemGroup>
114// … truncated