mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Button } from "@/examples/radix/ui/button"
|
|
import { ButtonGroup } from "@/examples/radix/ui/button-group"
|
|
import {
|
|
Field,
|
|
FieldContent,
|
|
FieldDescription,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldLegend,
|
|
FieldSeparator,
|
|
FieldSet,
|
|
FieldTitle,
|
|
} from "@/examples/radix/ui/field"
|
|
import { Input } from "@/examples/radix/ui/input"
|
|
import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
|
|
import { Switch } from "@/examples/radix/ui/switch"
|
|
import { IconMinus, IconPlus } from "@tabler/icons-react"
|
|
|
|
export function AppearanceSettings() {
|
|
const [gpuCount, setGpuCount] = React.useState(8)
|
|
|
|
const handleGpuAdjustment = React.useCallback((adjustment: number) => {
|
|
setGpuCount((prevCount) =>
|
|
Math.max(1, Math.min(99, prevCount + adjustment))
|
|
)
|
|
}, [])
|
|
|
|
const handleGpuInputChange = React.useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = parseInt(e.target.value, 10)
|
|
if (!isNaN(value) && value >= 1 && value <= 99) {
|
|
setGpuCount(value)
|
|
}
|
|
},
|
|
[]
|
|
)
|
|
|
|
return (
|
|
<FieldSet>
|
|
<FieldGroup>
|
|
<FieldSet>
|
|
<FieldLegend>Compute Environment</FieldLegend>
|
|
<FieldDescription>
|
|
Select the compute environment for your cluster.
|
|
</FieldDescription>
|
|
<RadioGroup defaultValue="kubernetes">
|
|
<FieldLabel htmlFor="kubernetes-r2h">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Kubernetes</FieldTitle>
|
|
<FieldDescription>
|
|
Run GPU workloads on a K8s configured cluster. This is the
|
|
default.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="kubernetes"
|
|
id="kubernetes-r2h"
|
|
aria-label="Kubernetes"
|
|
/>
|
|
</Field>
|
|
</FieldLabel>
|
|
<FieldLabel htmlFor="vm-z4k">
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldTitle>Virtual Machine</FieldTitle>
|
|
<FieldDescription>
|
|
Access a VM configured cluster to run workloads. (Coming
|
|
soon)
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<RadioGroupItem
|
|
value="vm"
|
|
id="vm-z4k"
|
|
aria-label="Virtual Machine"
|
|
/>
|
|
</Field>
|
|
</FieldLabel>
|
|
</RadioGroup>
|
|
</FieldSet>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
|
|
<FieldDescription>You can add more later.</FieldDescription>
|
|
</FieldContent>
|
|
<ButtonGroup>
|
|
<Input
|
|
id="number-of-gpus-f6l"
|
|
value={gpuCount}
|
|
onChange={handleGpuInputChange}
|
|
size={3}
|
|
className="h-7 w-14! font-mono"
|
|
maxLength={3}
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
size="icon-sm"
|
|
type="button"
|
|
aria-label="Decrement"
|
|
onClick={() => handleGpuAdjustment(-1)}
|
|
disabled={gpuCount <= 1}
|
|
>
|
|
<IconMinus />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon-sm"
|
|
type="button"
|
|
aria-label="Increment"
|
|
onClick={() => handleGpuAdjustment(1)}
|
|
disabled={gpuCount >= 99}
|
|
>
|
|
<IconPlus />
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Field>
|
|
<FieldSeparator />
|
|
<Field orientation="horizontal">
|
|
<FieldContent>
|
|
<FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
|
|
<FieldDescription>
|
|
Allow the wallpaper to be tinted.
|
|
</FieldDescription>
|
|
</FieldContent>
|
|
<Switch id="tinting" defaultChecked />
|
|
</Field>
|
|
</FieldGroup>
|
|
</FieldSet>
|
|
)
|
|
}
|