Uncontrolled Dialog
import { h } from "preact"
import { Dialog } from "@/comps/echo/dialog"
export const UncontrolledDemo = () => {
return (
<div class="echo-theme p-[24px]">
<Dialog
trigger={() => <button class="mb-2">Open plain Dialog</button>}
title="Hello traveller!"
description="Put anything you want here - even <Slider /> or <VirtualList />."
footer={() => (
<button onClick={(/* e */) => console.log("dismissed!")}>
Got it
</button>
)}
>
<div>{`(っ◕‿◕)っ`}</div>
</Dialog>
</div>
)
}
Controlled Dialog
import { h } from "preact"
import { useState } from "preact/hooks"
import { Dialog } from "@/comps/echo/dialog"
export const ControlledDemo = () => {
const [open, setOpen] = useState(false)
return (
<div class="echo-theme p-[24px]">
<Dialog
open={open}
onOpenChange={setOpen}
trigger={() => (
<button onClick={() => setOpen(true)} class="mb-2">
Open plain Dialog
</button>
)}
title="Hello traveller!"
description="Put anything you want here – even <Slider /> or <VirtualList />."
footer={() => (
<button onClick={() => setOpen(false)}>
Got it
</button>
)}
>
<div>{`=^..^=`}</div>
</Dialog>
</div>
)
}
Confirmation Dialog
import { h } from "preact"
import { useState } from "preact/hooks"
import { ConfirmDialog } from "@/comps/echo/dialog"
export const ConfirmDemo = () => {
const [showConfirm, setShowConfirm] = useState(false)
return (
<div class="echo-theme p-[24px]">
<button class="mb-2" onClick={() => setShowConfirm(true)}>Confirm…</button>
<ConfirmDialog
open={showConfirm}
onOpenChange={setShowConfirm}
title="Delete Object?"
description="This cannot be undone."
onConfirm={() => console.log("DELETE!")}
onCancel={() => console.log("phew… safe!")}
confirmLabel="Yes, delete"
cancelLabel="No, keep it"
/>
</div>
)
}
Prompt Dialog
import { h } from "preact"
import { useState } from "preact/hooks"
import { PromptDialog } from "@/comps/echo/dialog"
export const PromptDemo = () => {
const [showPrompt, setShowPrompt] = useState(false)
return (
<div class="echo-theme p-[24px]">
<button class="mb-2" onClick={() => setShowPrompt(true)}>Prompt…</button>
<PromptDialog
open={showPrompt}
onOpenChange={setShowPrompt}
title="Give it a name"
defaultValue="Untitled"
onSubmit={val => console.log("user typed:", val)}
/>
</div>
)
}
Info Dialog
import { h } from "preact"
import { useState } from "preact/hooks"
import { InfoDialog } from "@/comps/echo/dialog"
export const InfoDemo = () => {
const [showInfo, setShowInfo] = useState(false)
return (
<div class="echo-theme p-[24px]">
<button onClick={() => setShowInfo(true)}>Info…</button>
<InfoDialog
open={showInfo}
onOpenChange={setShowInfo}
title="Heads-up"
description="All systems nominal."
onAction={() => console.log("closed info")}
/>
</div>
)
}