Progress

1"use client"23import { createSignal, createMemo, createEffect, onCleanup } from "@barefootjs/dom"4import { Progress } from "@/components/ui/progress"56export function ProgressPreviewDemo() {7  const [progress, setProgress] = createSignal(0)89  createEffect(() => {10    const timer = setInterval(() => {11      setProgress((prev: number) => {12        if (prev >= 100) {13          clearInterval(timer)14          return 10015        }16        return prev + 217      })18    }, 100)19    onCleanup(() => clearInterval(timer))20  })2122  const label = createMemo(() =>23    progress() >= 100 ? "Upload complete" : "Uploading..."24  )2526  return (27    <div className="space-y-3 w-full max-w-sm">28      <div className="flex items-center justify-between">29        <span className="text-sm font-medium leading-none">{label()}</span>30        <span className="text-sm text-muted-foreground tabular-nums">{progress()}%</span>31      </div>32      <Progress value={progress()} />33    </div>34  )35}

1import { Progress } from "@/components/ui/progress"23export function ProgressBasicDemo() {4  return (5    <div className="space-y-6 w-full max-w-sm">6      <div className="space-y-2">7        <div className="flex items-center justify-between">8          <span className="text-sm font-medium leading-none">Empty</span>9          <span className="text-sm text-muted-foreground tabular-nums">0%</span>10        </div>11        <Progress value={0} />12      </div>13      <div className="space-y-2">14        <div className="flex items-center justify-between">15          <span className="text-sm font-medium leading-none">Half</span>16          <span className="text-sm text-muted-foreground tabular-nums">50%</span>17        </div>18        <Progress value={50} />19      </div>20      <div className="space-y-2">21        <div className="flex items-center justify-between">22          <span className="text-sm font-medium leading-none">Complete</span>23          <span className="text-sm text-muted-foreground tabular-nums">100%</span>24        </div>25        <Progress value={100} />26      </div>27    </div>28  )29}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { Progress } from "@/components/ui/progress"56export function ProgressFormDemo() {7  const totalSteps = 48  const [step, setStep] = createSignal(1)910  const progressValue = createMemo(() =>11    Math.round(((step() - 1) / (totalSteps - 1)) * 100)12  )1314  const stepLabels = ["Account", "Profile", "Preferences", "Review"]1516  const goBack = () => setStep((s: number) => Math.max(1, s - 1))17  const goNext = () => setStep((s: number) => Math.min(totalSteps, s + 1))1819  return (20    <div className="space-y-6 w-full max-w-sm">21      <div className="space-y-1">22        <h4 className="text-sm font-medium leading-none">Setup Wizard</h4>23        <p className="text-sm text-muted-foreground">24          Step {step()} of {totalSteps}: {stepLabels[step() - 1]}25        </p>26      </div>27      <Progress value={progressValue()} />28      <div className="flex items-center justify-between">29        <button30          className="... border border-input bg-background ..."31          disabled={step() <= 1}32          onClick={goBack}33        >34          Back35        </button>36        <span className="text-sm text-muted-foreground tabular-nums">37          {progressValue()}%38        </span>39        <button40          className="... bg-primary text-primary-foreground ..."41          disabled={step() >= totalSteps}42          onClick={goNext}43        >44          Next45        </button>46      </div>47    </div>48  )49}