From be474003ad58645a60c2665fb5083f892499ba21 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:29:12 -0500
Subject: [PATCH] add card footer

---
 web/src/components/card/SearchThumbnail.tsx | 76 ++++++++++++++++++---
 1 file changed, 66 insertions(+), 10 deletions(-)

diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
index 4133c0e1e..3128a3b3e 100644
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -15,6 +15,21 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  LuActivity,
+  LuCamera,
+  LuDownload,
+  LuMoreVertical,
+  LuSearch,
+  LuTrash2,
+} from "react-icons/lu";
+import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -98,16 +113,57 @@ export default function SearchThumbnail({
           </Tooltip>
         </div>
         <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[20%] w-full bg-gradient-to-t from-black/60 to-transparent">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white">
-            {searchResult.end_time ? (
-              <TimeAgo time={searchResult.start_time * 1000} dense />
-            ) : (
-              <div>
-                <ActivityIndicator size={24} />
-              </div>
-            )}
-            {formattedDate}
+        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 z-10 flex h-[20%] items-end bg-gradient-to-t from-black/60 to-transparent">
+          <div className="flex w-full items-center justify-between bg-black/50 px-2 py-2 text-sm text-white">
+            <div className="flex flex-col items-start">
+              {searchResult.end_time ? (
+                <TimeAgo time={searchResult.start_time * 1000} dense />
+              ) : (
+                <div>
+                  <ActivityIndicator size={24} />
+                </div>
+              )}
+              {formattedDate}
+            </div>
+            <div className="flex flex-row items-center justify-end gap-4">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <FrigatePlusIcon className="size-5 cursor-pointer text-white" />
+                </TooltipTrigger>
+                <TooltipContent>Submit to Frigate+</TooltipContent>
+              </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger>
+                  <LuSearch className="size-5 cursor-pointer text-white" />
+                </TooltipTrigger>
+                <TooltipContent>Find similar</TooltipContent>
+              </Tooltip>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <LuMoreVertical className="size-5 cursor-pointer text-white" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem>
+                    <LuDownload className="mr-2 size-4" />
+                    <span>Download video</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <LuCamera className="mr-2 size-4" />
+                    <span>Download snapshot</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <LuActivity className="mr-2 size-4" />
+                    <span>View object lifecycle</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <LuTrash2 className="mr-2 size-4" />
+                    <span>Delete</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
       </div>