15 lines
1.2 KiB
TypeScript
15 lines
1.2 KiB
TypeScript
import { useId, useState } from "react"
|
|
import { Card, CardContent, Button, Label, Input, Checkbox, Switch } from "@hm-design/ui"
|
|
import { Heading } from "./Heading"
|
|
|
|
export function Permissions() {
|
|
const id = useId()
|
|
const [edit, setEdit] = useState(false)
|
|
const [notice, setNotice] = useState(true)
|
|
const [status, setStatus] = useState("")
|
|
return <><Heading title="권한 설정" description="편집 권한과 알림 설정을 저장합니다."/><Card><CardContent><div className="quality-fields"><Label htmlFor={`${id}-account`}>계정</Label><Input id={`${id}-account`} readOnly value="hm-design"/>
|
|
<div className="flex items-center gap-2"><Checkbox id={`${id}-edit`} checked={edit} onCheckedChange={v => setEdit(v === true)}/><Label htmlFor={`${id}-edit`}>편집 권한</Label></div>
|
|
<div className="flex items-center gap-2"><Switch id={`${id}-notice`} checked={notice} onCheckedChange={setNotice}/><Label htmlFor={`${id}-notice`}>알림 수신</Label></div><Button onClick={() => setStatus(`저장 완료 · 편집 ${edit ? "허용" : "불가"} · 알림 ${notice ? "켜짐" : "꺼짐"}`)}>저장</Button><p role="status">{status}</p>
|
|
</div></CardContent></Card></>
|
|
}
|