入力

import { useState } from "react";
import {
    Button,
    Checkbox,
    Form,
    FormControl,
    FormField,
    FormLabel,
    FormMessage,
    Input,
    NumberInput,
    RadioGroup,
    RadioGroupItem,
    Select,
    Slider,
    Switch,
    Textarea,
} from "@gunjo/ui";

const PLANS = [
    { value: "starter", label: "スターター", description: "1案件・レビュー担当1人。" },
    { value: "team", label: "チーム", description: "レビュー一覧と権限を共有。" },
    { value: "scale", label: "スケール", description: "操作の記録と社内アカウント連携。" },
];

const REGIONS = [
    { value: "tokyo", label: "東京" },
    { value: "osaka", label: "大阪" },
    { value: "fukuoka", label: "福岡" },
];

export function WorkspaceSettingsForm() {
    const [name, setName] = useState("ブランド制作");
    const [plan, setPlan] = useState("team");
    const [region, setRegion] = useState("tokyo");
    const [seats, setSeats] = useState(8);
    const [threshold, setThreshold] = useState(60);
    const [digest, setDigest] = useState(true);
    const [agreed, setAgreed] = useState(false);
    const [note, setNote] = useState("");

    const nameError = name.trim() === "" ? "ワークスペース名を入力してください。" : undefined;

    return (
        <Form
            className="max-w-2xl"
            onSubmit={(event) => {
                event.preventDefault();
            }}
        >
            <FormField error={nameError} required>
                <FormLabel>ワークスペース名</FormLabel>
                <FormControl>
                    <Input
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                        placeholder="ブランド制作"
                    />
                </FormControl>
                <FormMessage />
            </FormField>

            <Select
                label="データの保存先"
                description="レビューの記録を置く場所です。"
                value={region}
                onChange={(event) => setRegion(event.target.value)}
            >
                {REGIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </Select>

            <fieldset className="space-y-3">
                <legend className="text-sm font-medium">契約プラン</legend>
                <RadioGroup value={plan} onValueChange={setPlan}>
                    {PLANS.map((option) => (
                        <RadioGroupItem
                            key={option.value}
                            value={option.value}
                            label={option.label}
                            description={option.description}
                        />
                    ))}
                </RadioGroup>
            </fieldset>

            <NumberInput
                value={seats}
                onValueChange={setSeats}
                min={1}
                max={200}
                aria-label="席数"
            />

            <Slider
                label="この点数を下回れば自動で承認する"
                value={threshold}
                onValueChange={setThreshold}
                min={0}
                max={100}
                showValue
            />

            <Switch
                checked={digest}
                onCheckedChange={setDigest}
                label="週次のまとめ"
                description="毎週月曜に1通だけ送ります。"
            />

            <Textarea
                label="レビュー担当へのメモ"
                description="一覧を開いた人に見えます。"
                value={note}
                onChange={(event) => setNote(event.target.value)}
                maxLength={200}
                showCount
            />

            <Checkbox
                checked={agreed}
                onCheckedChange={setAgreed}
                label="この設定はすべての案件に適用されます。"
            />

            <div className="flex gap-3">
                <Button type="submit" disabled={!agreed || Boolean(nameError)}>
                    設定を保存
                </Button>
                <Button type="button" variant="outline">
                    やめる
                </Button>
            </div>
        </Form>
    );
}