/
githubmirror
/
ui
Обзор
Документация
Войти
/
githubmirror
/
ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
apps/v4/examples/base/attachment-trigger.tsx
60 строк
2 KB
shadcn
feat: @shadcn/react (#11022)
26 июн 2026, 20:19
Не верифицирован
26 июн 2026, 20:19
18fcf0f
Код
Авторство
О чём код?
import { CopyIcon, FileSearchIcon, XIcon } from "lucide-react" import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, AttachmentTrigger, } from "@/styles/base-rhea/ui/attachment" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/styles/base-rhea/ui/dialog" export function AttachmentTriggerDemo() { return ( <div className="mx-auto w-full max-w-sm py-12"> <Dialog> <Attachment className="w-full"> <AttachmentMedia> <FileSearchIcon /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>research-summary.pdf</AttachmentTitle> <AttachmentDescription>Open preview dialog</AttachmentDescription> </AttachmentContent> <AttachmentActions> <AttachmentAction aria-label="Copy link"> <CopyIcon /> </AttachmentAction> <AttachmentAction aria-label="Remove research-summary.pdf"> <XIcon /> </AttachmentAction> </AttachmentActions> <DialogTrigger render={ <AttachmentTrigger aria-label="Preview research-summary.pdf" /> } /> </Attachment> <DialogContent className="sm:max-w-md"> <DialogHeader> <DialogTitle>research-summary.pdf</DialogTitle> <DialogDescription> The attachment trigger fills the card and opens the dialog, while the actions stay independently clickable above it. </DialogDescription> </DialogHeader> </DialogContent> </Dialog> </div> ) }