administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add icons and frigate logo

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-04 09:28:44 -06:00
parent 972aee6a55
commit d4a56f9352
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/settings/GeneralSettings.tsx
View File

@ -1,6 +1,6 @@
import {
LuActivity,
LuGithub,
LuHardDrive,
LuLifeBuoy,
LuList,
LuMoon,
@ -137,7 +137,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/storage">
<Link to="/system">
<MenuItem
className={
isDesktop
@ -145,8 +145,8 @@ export default function GeneralSettings({ className }: GeneralSettings) {
: "p-2 flex items-center text-sm"
}
>
<LuHardDrive className="mr-2 size-4" />
<span>Storage</span>
<LuActivity className="mr-2 size-4" />
<span>System metrics</span>
</MenuItem>
</Link>
<Link to="/logs">

17
web/src/pages/System.tsx
View File

@ -3,9 +3,12 @@ import { FrigateStats } from "@/types/stats";
import { useState } from "react";
import TimeAgo from "@/components/dynamic/TimeAgo";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { isDesktop } from "react-device-detect";
import { isDesktop, isMobile } from "react-device-detect";
import GeneralMetrics from "@/views/system/GeneralMetrics";
import StorageMetrics from "@/views/system/StorageMetrics";
import { LuActivity, LuHardDrive } from "react-icons/lu";
import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo";
const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number];
@ -24,7 +27,10 @@ function System() {
return (
<div className="size-full p-2 flex flex-col">
<div className="w-full h-8 flex justify-between items-center">
<div className="w-full h-11 relative flex justify-between items-center">
{isMobile && (
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
)}
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
type="single"
@ -39,11 +45,14 @@ function System() {
{Object.values(metrics).map((item) => (
<ToggleGroupItem
key={item}
className={`flex items-center justify-between gap-2 ${page == item ? "" : "text-gray-500"}`}
className={`flex items-center justify-between gap-2 ${page == item ? "" : "*:text-gray-500"}`}
value={item}
aria-label={`Select ${item}`}
>
<div className="capitalize">{item}</div>
{item == "general" && <LuActivity className="size-4" />}
{item == "storage" && <LuHardDrive className="size-4" />}
{item == "cameras" && <FaVideo className="size-4" />}
{isDesktop && <div className="capitalize">{item}</div>}
</ToggleGroupItem>
))}
</ToggleGroup>