frigate/web/src/components/card/EmptyCard.tsx
Josh Hawkins d633c7d966
Some checks failed
CI / AMD64 Build (push) Has been cancelled
CI / ARM Build (push) Has been cancelled
CI / Jetson Jetpack 6 (push) Has been cancelled
CI / AMD64 Extra Build (push) Has been cancelled
CI / ARM Extra Build (push) Has been cancelled
CI / Synaptics Build (push) Has been cancelled
CI / Assemble and push default build (push) Has been cancelled
Miscellaneous fixes (0.17 beta) (#21699)
* tracking details tweaks

- fix 4:3 layout
- get and use aspect of record stream if different from detect stream

* aspect ratio docs tip

* spacing

* fix

* i18n fix

* additional logs on ffmpeg exit

* improve no camera view

instead of showing an "add camera" message, show a specific message for empty camera groups when frigate already has cameras added

* add note about separate onvif accounts in some camera firmware

* clarify review summary report docs

* review settings tweaks

- remove horizontal divider
- update description language for switches
- keep save button disabled until review classification settings change

* use correct Toaster component from shadcn

* clarify support for intel b-series (battlemage) gpus

* add clarifying comment to dummy camera docs
2026-01-20 08:17:58 -07:00

50 lines
1.1 KiB
TypeScript

import React from "react";
import { Button } from "../ui/button";
import Heading from "../ui/heading";
import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";
type EmptyCardProps = {
className?: string;
icon: React.ReactNode;
title: string;
titleHeading?: boolean;
description?: string;
buttonText?: string;
link?: string;
};
export function EmptyCard({
className,
icon,
title,
titleHeading = true,
description,
buttonText,
link,
}: EmptyCardProps) {
let TitleComponent;
if (titleHeading) {
TitleComponent = <Heading as="h4">{title}</Heading>;
} else {
TitleComponent = <div>{title}</div>;
}
return (
<div className={cn("flex flex-col items-center gap-2", className)}>
{icon}
{TitleComponent}
{description && (
<div className="mb-3 text-center text-secondary-foreground">
{description}
</div>
)}
{buttonText?.length && (
<Button size="sm" variant="select">
<Link to={link ?? "#"}>{buttonText}</Link>
</Button>
)}
</div>
);
}