33 lines
992 B
TypeScript
33 lines
992 B
TypeScript
import { Dialog as Kobalte } from "@kobalte/core/dialog"
|
|
import { useI18n } from "../context/i18n"
|
|
import { IconButton } from "./icon-button"
|
|
|
|
export interface ImagePreviewProps {
|
|
src: string
|
|
alt?: string
|
|
}
|
|
|
|
export function ImagePreview(props: ImagePreviewProps) {
|
|
const i18n = useI18n()
|
|
return (
|
|
<div data-component="image-preview">
|
|
<div data-slot="image-preview-container">
|
|
<Kobalte.Content data-slot="image-preview-content">
|
|
<div data-slot="image-preview-header">
|
|
<Kobalte.CloseButton
|
|
data-slot="image-preview-close"
|
|
as={IconButton}
|
|
icon="close"
|
|
variant="ghost"
|
|
aria-label={i18n.t("ui.common.close")}
|
|
/>
|
|
</div>
|
|
<div data-slot="image-preview-body">
|
|
<img src={props.src} alt={props.alt ?? i18n.t("ui.imagePreview.alt")} data-slot="image-preview-image" />
|
|
</div>
|
|
</Kobalte.Content>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|