Toggle Group

"use client";

import * as React from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export default function Example() {
  const text = {"open":"通知設定","title":"通知を調整","body":"重要な更新だけを受け取り、集中を保ちます。","close":"閉じる","discard":"下書きを削除","confirm":"下書きを削除しますか？","warning":"この操作は取り消せません。確認してから続行してください。","cancel":"戻る","done":"下書きを削除しました。","profile":"プロフィールを確認","person":"プロダクトデザイナー · ソウル","details":"詳細設定","detailBody":"初期設定を変更せずに追加の設定を表示します。","pin":"固定","locked":"無効","align":"配置","left":"左","center":"中央","right":"右","tools":"文書ツール","undo":"元に戻す","redo":"やり直す","save":"変更を保存","saved":"ローカル例を保存しました。","name":"表示名","hint":"プロフィールに表示する名前を入力してください。","required":"名前を入力してください。","settings":"プロフィール設定","quantity":"座席数","increase":"座席を増やす","decrease":"座席を減らす","storage":"ストレージ使用量","city":"都市を検索","empty":"一致する都市はありません。","reset":"リセット","editing":"未保存の変更","quiet":"保存済み"};
  const [alignment, setAlignment] = React.useState<string[]>(["left"]);
  return (<div className="grid gap-3"><ToggleGroup aria-label={"配置"} value={alignment} onValueChange={setAlignment}><ToggleGroupItem value="left">{"左"}</ToggleGroupItem><ToggleGroupItem value="center">{"中央"}</ToggleGroupItem><ToggleGroupItem value="right">{"右"}</ToggleGroupItem></ToggleGroup><output className="text-sm text-[var(--muted-foreground)]">{alignment.map(value => text[value as "left" | "center" | "right"]).join(", ")}</output></div>);
}