public-ui-kolibri

import React from 'react';

import { KolProgress } from '@public-ui/react-v19';

import type { FC } from 'react';
import { SampleDescription } from '../SampleDescription';

export const ProgressBasic: FC = () => (
	<>
		<SampleDescription>
			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
		</SampleDescription>

		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
			<fieldset title="Percentages" className="flex flex-col gap-4">
				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
			</fieldset>
			<fieldset title="Custom units" className="flex flex-col gap-4">
				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
			</fieldset>
		</div>
	</>
);