Implement public audit pages

components/public-audit/public-audit-screenshot.tsx

@@ -0,0 +1,26 @@
+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>
+  );
+}