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