From 992742f60294722628c31963e433802b7013f242 Mon Sep 17 00:00:00 2001
From: Leon Jacobs <leonja511@gmail.com>
Date: Wed, 2 Oct 2024 19:14:17 +0200
Subject: [PATCH] (feat/ui) add overlay with url and capture time

---
 web/ui/src/pages/detail/Detail.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/ui/src/pages/detail/Detail.tsx b/web/ui/src/pages/detail/Detail.tsx
index bcf8d877..179fbf1f 100644
--- a/web/ui/src/pages/detail/Detail.tsx
+++ b/web/ui/src/pages/detail/Detail.tsx
@@ -174,9 +174,24 @@ const ScreenshotDetailPage = () => {
                   alt={detail.title}
                   className="w-full h-full object-contain"
                 />
+                <div className="absolute top-0 left-0 right-0 bg-gradient-to-b from-black/100 to-transparent p-4 text-white">
+                  <a
+                    href={detail.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-lg font-semibold hover:underline flex items-center mb-2"
+                  >
+                    {detail.url}
+                    <ExternalLink className="ml-2 h-4 w-4" />
+                  </a>
+                  <div className="flex items-center text-sm opacity-80">
+                    <ClockIcon className="mr-2 h-4 w-4" />
+                    Captured on {format(new Date(detail.probed_at), "PPpp")}
+                  </div>
+                </div>
                 <button
                   onClick={() => setIsModalOpen(false)}
-                  className="absolute top-4 right-4 p-2 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-75 transition-all"
+                  className="absolute top-4 right-4 p-2 bg-black/50 rounded-full text-white hover:bg-black/75 transition-all"
                 >
                 </button>
               </div>