diff --git a/web/src/components/card/EmptyCard.tsx b/web/src/components/card/EmptyCard.tsx
new file mode 100644
index 000000000..671262994
--- /dev/null
+++ b/web/src/components/card/EmptyCard.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Button } from "../ui/button";
+import Heading from "../ui/heading";
+
+type EmptyCardProps = {
+ icon: React.ReactNode;
+ title: string;
+ description: string;
+ buttonText?: string;
+};
+export function EmptyCard({
+ icon,
+ title,
+ description,
+ buttonText,
+}: EmptyCardProps) {
+ return (
+
+ {icon}
+
{title}
+
{description}
+ {buttonText?.length && (
+
+ )}
+
+ );
+}
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 69f4c0d53..4b7ef9730 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -44,6 +44,8 @@ import { useResizeObserver } from "@/hooks/resize-observer";
import LiveContextMenu from "@/components/menu/LiveContextMenu";
import { useStreamingSettings } from "@/context/streaming-settings-provider";
import { useTranslation } from "react-i18next";
+import { EmptyCard } from "@/components/card/EmptyCard";
+import { BsFillCameraVideoOffFill } from "react-icons/bs";
type LiveDashboardViewProps = {
cameras: CameraConfig[];
@@ -352,6 +354,10 @@ export default function LiveDashboardView({
onSaveMuting(true);
};
+ if (cameras.length == 0) {
+ return ;
+ }
+
return (
);
}
+
+function NoCameraView() {
+ return (
+
+ }
+ title="No Cameras Set Up"
+ description="Get started by connecting a camera."
+ buttonText="Add Camera"
+ />
+
+ );
+}