Files
webdev-pipeline/components/public-audit/public-audit-screenshot.tsx
2026-06-05 14:14:07 +02:00

27 lines
1.0 KiB
TypeScript

import type { PublicAuditScreenshot as PublicAuditScreenshotData } from "@/lib/audits/public-audit-types";
type PublicAuditScreenshotProps = {
screenshot: PublicAuditScreenshotData;
};
export function PublicAuditScreenshot({ screenshot }: PublicAuditScreenshotProps) {
return (
<figure className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={screenshot.url}
alt={screenshot.alt}
width={screenshot.width}
height={screenshot.height}
className="aspect-[16/10] w-full object-cover"
/>
<figcaption className="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-xs text-slate-600">
<span className="font-medium uppercase tracking-normal text-slate-700">
{screenshot.viewport === "desktop" ? "Desktop" : "Mobil"}
</span>
<span className="truncate">{screenshot.sourceUrl}</span>
</figcaption>
</figure>
);
}