35 lines
988 B
TypeScript
35 lines
988 B
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog"
|
|
import { Button } from "./button"
|
|
import { Eye } from "lucide-react"
|
|
|
|
interface PreviewDialogProps {
|
|
children: React.ReactNode
|
|
title?: string
|
|
}
|
|
|
|
export function PreviewDialog({ children, title = "预览效果" }: PreviewDialogProps) {
|
|
const [open, setOpen] = React.useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button variant="outline" size="sm" onClick={() => setOpen(true)}>
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
预览
|
|
</Button>
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogContent className="max-w-[360px] p-0">
|
|
<DialogHeader className="p-4 border-b">
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="relative bg-gray-50">
|
|
<div className="w-full overflow-hidden">{children}</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|