implement basic filter

web/src/components/filter/ExportFilterGroup.tsx

@@ -1,4 +1,14 @@
-import { ExportFilter, ExportFilters } from "@/types/export";
+import { cn } from "@/lib/utils";
+import {
+  DEFAULT_EXPORT_FILTERS,
+  ExportFilter,
+  ExportFilters,
+} from "@/types/export";
+import { CamerasFilterButton } from "./CamerasFilterButton";
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
+import { useMemo } from "react";
+import { FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
 
 type ExportFilterGroupProps = {
   className: string;
@@ -9,8 +19,49 @@ type ExportFilterGroupProps = {
 export default function ExportFilterGroup({
   className,
   filter,
-  filters,
+  filters = DEFAULT_EXPORT_FILTERS,
   onUpdateFilter,
 }: ExportFilterGroupProps) {
-  return <div></div>;
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+  const allowedCameras = useAllowedCameras();
+
+  const filterValues = useMemo(
+    () => ({
+      cameras: allowedCameras,
+    }),
+    [allowedCameras],
+  );
+
+  const groups = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.entries(config.camera_groups).sort(
+      (a, b) => a[1].order - b[1].order,
+    );
+  }, [config]);
+
+  return (
+    <div
+      className={cn(
+        "scrollbar-container flex justify-center gap-2 overflow-x-auto",
+        className,
+      )}
+    >
+      {filters.includes("cameras") && (
+        <CamerasFilterButton
+          allCameras={filterValues.cameras}
+          groups={groups}
+          selectedCameras={filter?.cameras}
+          hideText={false}
+          updateCameraFilter={(newCameras) => {
+            onUpdateFilter({ ...filter, cameras: newCameras });
+          }}
+        />
+      )}
+    </div>
+  );
 }

web/src/pages/Exports.tsx

@@ -35,6 +35,7 @@ import { useTranslation } from "react-i18next";
 import { LuFolderX } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";
+import ExportFilterGroup from "@/components/filter/ExportFilterGroup";
 
 function Exports() {
   const { t } = useTranslation(["views/exports"]);
@@ -246,7 +247,12 @@ function Exports() {
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-        <div></div>
+        <ExportFilterGroup
+          filter={{}}
+          filters={["cameras"]}
+          className=""
+          onUpdateFilter={() => {}}
+        />
       </div>
 
       {selectedCase ? (

web/vite.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
-const proxyHost = process.env.PROXY_HOST || "192.168.50.106:5002";
+const proxyHost = process.env.PROXY_HOST || "1ocalhost:5000";
 
 // https://vitejs.dev/config/
 export default defineConfig({