Template
40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import { Label, RadioGroup } from 'radix-ui'
|
|
import { Button } from '../ui/Button'
|
|
|
|
const envs = [
|
|
{ value: 'production', note: 'Borlänge DC' },
|
|
{ value: 'staging', note: 'Falun edge' },
|
|
]
|
|
|
|
const field =
|
|
'h-10 w-full rounded-md border border-border bg-input px-3 text-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-3 focus:ring-primary/15'
|
|
|
|
export default function FormDemo() {
|
|
return (
|
|
<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
|
|
<div>
|
|
<Label.Root htmlFor="app-name" className="text-sm font-medium">
|
|
App name
|
|
</Label.Root>
|
|
<input id="app-name" className={`${field} mt-1.5 font-mono`} placeholder="case-intake-web" />
|
|
<p className="mt-1.5 text-xs text-muted-foreground">Lowercase letters, digits and dashes.</p>
|
|
</div>
|
|
<RadioGroup.Root defaultValue="production" aria-label="Environment" className="grid grid-cols-2 gap-3">
|
|
{envs.map(({ value, note }) => (
|
|
<RadioGroup.Item
|
|
key={value}
|
|
value={value}
|
|
className="rounded-lg border border-border p-3 text-left transition-colors duration-200 hover:border-foreground/25 data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
|
>
|
|
<span className="block text-sm font-medium capitalize">{value}</span>
|
|
<span className="block text-xs text-muted-foreground">{note}</span>
|
|
</RadioGroup.Item>
|
|
))}
|
|
</RadioGroup.Root>
|
|
<Button type="submit" variant="gradient" className="w-full">
|
|
Create app
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|