Inital template

src/components/gallery/FormDemo.tsx

@@ -0,0 +1,39 @@
+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>
+  )
+}