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" + /> +
+ ); +}