Meter

<script lang="ts">
	import Meter from '@tcpsystems/ui/foundation/Meter';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Grid from '@tcpsystems/ui/foundation/Grid';
</script>

<Stack data-gap="lg">
	<Grid min="sm" gap="lg">
		<Meter label="CPU" value={68} max={100} unit="%" />
		<Meter label="Memory" value={12.4} max={16} unit="GB" />
		<Meter label="Disk" value={480} max={500} unit="GB" />
	</Grid>

	<Grid min="sm" gap="lg">
		<Meter label="API quota" value={8500} max={10000} unit="req" tone="warn" />
		<Meter label="Concurrent builds" value={4} max={5} unit="slots" tone="danger" />
		<Meter label="Cache hit rate" value={92} max={100} unit="%" />
	</Grid>
</Stack>

<script lang="ts">
	import Meter from '@tcpsystems/ui/foundation/Meter';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let storageUsed = $state(320);
	const storageMax = 500;
</script>

<Stack data-gap="lg">
	<Meter label="Project storage" value={storageUsed} max={storageMax} unit="GB" />
	<Cluster>
		<Button variant="ghost" onclick={() => storageUsed = Math.min(storageMax, storageUsed + 25)} disabled={storageUsed >= storageMax}>Add 25 GB</Button>
		<Button variant="ghost" onclick={() => storageUsed = Math.max(0, storageUsed - 25)} disabled={storageUsed <= 0}>Remove 25 GB</Button>
		<Button variant="ghost" onclick={() => storageUsed = 0}>Clear</Button>
	</Cluster>

	<Stack data-gap="sm">
		<Meter label="Build minutes" value={1850} max={2000} unit="min" tone="warn" />
		<Meter label="Team members" value={7} max={10} unit="members" />
	</Stack>
</Stack>