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>);
}