Progress

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/base-vega/components/example"
9import {
10  Item,
11  ItemActions,
12  ItemContent,
13  ItemGroup,
14  ItemMedia,
15  ItemTitle,
16} from "@/registry/base-vega/ui/item"
17import {
18  Progress,
19  ProgressLabel,
20  ProgressValue,
21} from "@/registry/base-vega/ui/progress"
22import { Slider } from "@/registry/base-vega/ui/slider"
23import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
24 
25export default function ProgressExample() {
26  return (
27    <ExampleWrapper>
28      <ProgressValues />
29      <ProgressWithLabel />
30      <ProgressControlled />
31      <FileUploadList />
32    </ExampleWrapper>
33  )
34}
35 
36function ProgressValues() {
37  return (
38    <Example title="Progress Bar">
39      <div className="flex w-full flex-col gap-4">
40        <Progress value={0} />
41        <Progress value={25} className="w-full" />
42        <Progress value={50} />
43        <Progress value={75} />
44        <Progress value={100} />
45      </div>
46    </Example>
47  )
48}
49 
50function ProgressWithLabel() {
51  return (
52    <Example title="With Label">
53      <Progress value={56}>
54        <ProgressLabel>Upload progress</ProgressLabel>
55        <ProgressValue />
56      </Progress>
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} className="w-full" />
68        <Slider
69          value={value}
70          onValueChange={(value) => setValue(value as number)}
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        {files.map((file) => (
115          <Item key={file.id} size="xs" className="px-0">
116            <ItemMedia variant="icon">
117              <IconPlaceholder
118// … truncated