Files
lume/src/shared/notes/preview/image.tsx
2023-07-19 17:07:25 +07:00

23 lines
735 B
TypeScript

import { Image } from '@shared/image';
export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
return (
<div className="mb-2 mt-3 max-w-[420px] overflow-hidden">
<div className="flex flex-col gap-2">
{urls.map((url) => (
<div key={url} className="relative min-w-0 shrink-0 grow-0 basis-full">
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className={`${
truncate ? 'h-auto max-h-[300px]' : 'h-auto'
} w-full rounded-lg border border-zinc-800/50 object-cover`}
/>
</div>
))}
</div>
</div>
);
}