13 lines
1.1 KiB
TypeScript
13 lines
1.1 KiB
TypeScript
import { useState } from "react"
|
|
import { Card, CardContent, Button, Alert, AlertTitle, AlertDescription, Skeleton } from "@hm-design/ui"
|
|
import { Heading } from "./Heading"
|
|
|
|
export function StateWorkflow() {
|
|
const [state, setState] = useState("loading")
|
|
return <><Heading title="처리 상태" description="로딩, 오류, 빈 결과를 확인하는 작업입니다."/><Card><CardContent><div className="grid gap-4"><div className="flex flex-wrap gap-2"><Button onClick={() => setState("loading")}>로딩</Button><Button onClick={() => setState("error")}>오류</Button><Button onClick={() => setState("empty")}>빈 결과</Button></div>
|
|
{state === "loading" && <div role="status" aria-label="처리 중"><Skeleton className="h-10 w-full"/></div>}
|
|
{state === "error" && <Alert variant="destructive"><AlertTitle>처리 실패</AlertTitle><AlertDescription>다시 시도하세요.</AlertDescription><Button onClick={() => setState("empty")}>다시 시도</Button></Alert>}
|
|
{state === "empty" && <p role="status">등록된 항목이 없습니다.</p>}
|
|
</div></CardContent></Card></>
|
|
}
|