Progress

1import { Progress as KobalteProgress } from "@kobalte/core/progress";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6export type ProgressProps = ComponentProps<typeof KobalteProgress> & {
7  label?: string;
8  showValue?: boolean;
9  class?: string;
10};
11 
12export const Progress: Component<ProgressProps> = (props) => {
13  const [local, rest] = splitProps(props, ["class", "label", "showValue"]);
14 
15  return (
16    <KobalteProgress class={cn("flex flex-col gap-2", local.class)} {...rest}>
17      {(local.label || local.showValue) && (
18        <div class="flex justify-between text-sm">
19          {local.label && (
20            <KobalteProgress.Label class="font-medium">{local.label}</KobalteProgress.Label>
21          )}
22          {local.showValue && <KobalteProgress.ValueLabel class="text-muted-foreground" />}
23        </div>
24      )}
25      <KobalteProgress.Track class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
26        <KobalteProgress.Fill class="h-full w-[--kb-progress-fill-width] bg-primary transition-all" />
27      </KobalteProgress.Track>
28    </KobalteProgress>
29  );
30};