<script lang="ts">
	import { buttonVariants } from "@orochibraru/ui/button";
	import { Input } from "@orochibraru/ui/input";
	import { Label } from "@orochibraru/ui/label";
	import * as Popover from "@orochibraru/ui/popover";
</script>

<Popover.Root>
	<Popover.Trigger class={buttonVariants({ variant: "outline" })}>
		Set storage limit
	</Popover.Trigger>
	<Popover.Content>
		<Popover.Header>
			<Popover.Title>Storage limit</Popover.Title>
			<Popover.Description>
				We'll warn the team when the workspace gets close.
			</Popover.Description>
		</Popover.Header>
		<div class="flex flex-col gap-2">
			<Label for="storage-limit">Limit (GB)</Label>
			<Input id="storage-limit" type="number" value="100" />
		</div>
	</Popover.Content>
</Popover.Root>