Storage space1%
Current storage space usage
"use client"
import { useEffect, useState } from "react"
import { Description, Label } from "@/components/ui/preskok-ui/field"
import {
Meter,
MeterHeader,
MeterTrack,
MeterValue,
} from "@/components/ui/preskok-ui/meter"
export function Component() {
const [value, setValue] = useState(1)
useEffect(() => {
const interval = setInterval(() => {
setValue((prev) => (prev < 100 ? prev + 1 : 100))
}, 50)
return () => clearInterval(interval)
}, [])
return (
<Meter value={value}>
<MeterHeader>
<Label>Storage space</Label>
<MeterValue />
</MeterHeader>
<MeterTrack />
<Description>Current storage space usage</Description>
</Meter>
)
}
Installation
CLI
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add meter
Usage
import { Meter } from "@/registry/preskok/ui/preskok-ui/meter"
export function MeterDemo() {
return <Meter label="Storage" value={64} minValue={0} maxValue={100} />
}