File size: 2,144 Bytes
fa7b380 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import type { NormalizedPost } from "@/lib/grabber/sites";
export function Lightbox({ post, onClose }: { post: NormalizedPost | null; onClose: () => void }) {
return (
<Dialog open={!!post} onOpenChange={(v) => !v && onClose()}>
<DialogContent className="max-w-5xl max-h-[92vh] overflow-y-auto p-0">
{post && (
<div className="flex flex-col md:flex-row gap-4 p-4">
<div className="flex-1 flex items-center justify-center bg-black rounded">
{/\.(mp4|webm)$/i.test(post.fileUrl) ? (
<video src={post.fileUrl} controls className="max-h-[80vh] max-w-full" />
) : (
<img
src={post.fileUrl}
alt={`post ${post.id}`}
className="max-h-[80vh] max-w-full object-contain"
/>
)}
</div>
<div className="md:w-64 shrink-0 space-y-2 text-sm">
<div className="font-mono text-xs text-muted-foreground">#{post.id}</div>
<div className="flex gap-1 flex-wrap">
{post.rating && <Badge variant="outline">{post.rating}</Badge>}
{post.score !== undefined && <Badge variant="secondary">★ {post.score}</Badge>}
</div>
{post.source && (
<a
href={post.source}
target="_blank"
rel="noreferrer"
className="text-primary underline break-all block"
>
source
</a>
)}
<div className="text-xs text-muted-foreground">tags</div>
<div className="flex gap-1 flex-wrap max-h-96 overflow-y-auto">
{post.tags.map((t) => (
<Badge key={t} variant="outline" className="font-normal">
{t}
</Badge>
))}
</div>
</div>
</div>
)}
</DialogContent>
</Dialog>
);
}
|