Add icons to detail tabs

This commit is contained in:
Nicolas Mowen 2024-09-11 12:31:32 -06:00
parent 3300b8afb9
commit 630bdfb8ea

View File

@ -34,8 +34,10 @@ import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record"; import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { FaRegListAlt, FaVideo } from "react-icons/fa";
import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
const SEARCH_TABS = ["details", "Frigate+", "video"] as const; const SEARCH_TABS = ["details", "frigate+", "video"] as const;
type SearchTab = (typeof SEARCH_TABS)[number]; type SearchTab = (typeof SEARCH_TABS)[number];
type SearchDetailDialogProps = { type SearchDetailDialogProps = {
@ -65,7 +67,7 @@ export default function SearchDetailDialog({
const views = [...SEARCH_TABS]; const views = [...SEARCH_TABS];
if (!config.plus.enabled || !search.has_snapshot) { if (!config.plus.enabled || !search.has_snapshot) {
const index = views.indexOf("Frigate+"); const index = views.indexOf("frigate+");
views.splice(index, 1); views.splice(index, 1);
} }
@ -133,6 +135,9 @@ export default function SearchDetailDialog({
data-nav-item={item} data-nav-item={item}
aria-label={`Select ${item}`} aria-label={`Select ${item}`}
> >
{item == "details" && <FaRegListAlt className="size-4" />}
{item == "frigate+" && <FrigatePlusIcon className="size-4" />}
{item == "video" && <FaVideo className="size-4" />}
<div className="capitalize">{item}</div> <div className="capitalize">{item}</div>
</ToggleGroupItem> </ToggleGroupItem>
))} ))}
@ -148,7 +153,7 @@ export default function SearchDetailDialog({
setSimilarity={setSimilarity} setSimilarity={setSimilarity}
/> />
)} )}
{page == "Frigate+" && ( {page == "frigate+" && (
<FrigatePlusDialog <FrigatePlusDialog
upload={search as unknown as Event} upload={search as unknown as Event}
dialog={false} dialog={false}