mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
143 lines
3.2 KiB
TypeScript
143 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import {
|
|
Item,
|
|
ItemActions,
|
|
ItemContent,
|
|
ItemGroup,
|
|
ItemMedia,
|
|
ItemTitle,
|
|
} from "@/registry/bases/base/ui/item"
|
|
import {
|
|
Progress,
|
|
ProgressLabel,
|
|
ProgressValue,
|
|
} from "@/registry/bases/base/ui/progress"
|
|
import { Slider } from "@/registry/bases/base/ui/slider"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function ProgressExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<ProgressValues />
|
|
<ProgressWithLabel />
|
|
<ProgressControlled />
|
|
<FileUploadList />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function ProgressValues() {
|
|
return (
|
|
<Example title="Progress Bar">
|
|
<div className="flex w-full flex-col gap-4">
|
|
<Progress value={0} />
|
|
<Progress value={25} className="w-full" />
|
|
<Progress value={50} />
|
|
<Progress value={75} />
|
|
<Progress value={100} />
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ProgressWithLabel() {
|
|
return (
|
|
<Example title="With Label">
|
|
<Progress value={56}>
|
|
<ProgressLabel>Upload progress</ProgressLabel>
|
|
<ProgressValue />
|
|
</Progress>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function ProgressControlled() {
|
|
const [value, setValue] = React.useState(50)
|
|
|
|
return (
|
|
<Example title="Controlled">
|
|
<div className="flex w-full flex-col gap-4">
|
|
<Progress value={value} className="w-full" />
|
|
<Slider
|
|
value={value}
|
|
onValueChange={(value) => setValue(value as number)}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
/>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function FileUploadList() {
|
|
const files = React.useMemo(
|
|
() => [
|
|
{
|
|
id: "1",
|
|
name: "document.pdf",
|
|
progress: 45,
|
|
timeRemaining: "2m 30s",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "presentation.pptx",
|
|
progress: 78,
|
|
timeRemaining: "45s",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "spreadsheet.xlsx",
|
|
progress: 12,
|
|
timeRemaining: "5m 12s",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "image.jpg",
|
|
progress: 100,
|
|
timeRemaining: "Complete",
|
|
},
|
|
],
|
|
[]
|
|
)
|
|
|
|
return (
|
|
<Example title="File Upload List">
|
|
<ItemGroup>
|
|
{files.map((file) => (
|
|
<Item key={file.id} size="xs" className="px-0">
|
|
<ItemMedia variant="icon">
|
|
<IconPlaceholder
|
|
lucide="FileIcon"
|
|
tabler="IconFile"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileIcon"
|
|
remixicon="RiFileLine"
|
|
className="size-5"
|
|
/>
|
|
</ItemMedia>
|
|
<ItemContent className="inline-block truncate">
|
|
<ItemTitle className="inline">{file.name}</ItemTitle>
|
|
</ItemContent>
|
|
<ItemContent>
|
|
<Progress value={file.progress} className="w-32" />
|
|
</ItemContent>
|
|
<ItemActions className="w-16 justify-end">
|
|
<span className="text-sm text-muted-foreground">
|
|
{file.timeRemaining}
|
|
</span>
|
|
</ItemActions>
|
|
</Item>
|
|
))}
|
|
</ItemGroup>
|
|
</Example>
|
|
)
|
|
}
|