Add empty card component and use for camera view

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 (
+    <div className="flex flex-col items-center gap-2">
+      {icon}
+      <Heading as="h4">{title}</Heading>
+      <div className="text-secondary-foreground">{description}</div>
+      {buttonText?.length && (
+        <Button size="sm" variant="select">
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  );
+}

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 <NoCameraView />;
+  }
+
   return (
     <div
       className="scrollbar-container size-full select-none overflow-y-auto px-1 pt-2 md:p-2"
@@ -608,3 +614,16 @@ export default function LiveDashboardView({
     </div>
   );
 }
+
+function NoCameraView() {
+  return (
+    <div className="flex size-full items-center justify-center">
+      <EmptyCard
+        icon={<BsFillCameraVideoOffFill className="size-8" />}
+        title="No Cameras Set Up"
+        description="Get started by connecting a camera."
+        buttonText="Add Camera"
+      />
+    </div>
+  );
+}