use badges and camera name label component

This commit is contained in:
Josh Hawkins 2025-09-11 09:19:23 -05:00
parent fe9368d288
commit 3e24d37d74

View File

@ -36,6 +36,7 @@ import EditRoleCamerasDialog from "@/components/overlay/EditRoleCamerasDialog";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import DeleteRoleDialog from "@/components/overlay/DeleteRoleDialog"; import DeleteRoleDialog from "@/components/overlay/DeleteRoleDialog";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
export default function AuthenticationView() { export default function AuthenticationView() {
const { t } = useTranslation("views/settings"); const { t } = useTranslation("views/settings");
@ -607,12 +608,22 @@ export default function AuthenticationView() {
{roleData.name} {roleData.name}
</TableCell> </TableCell>
<TableCell> <TableCell>
{roleData.cameras.length > 0 ? ( {roleData.cameras.length > 5 ? (
roleData.cameras.join(", ") <Badge variant="outline" className="text-xs">
{roleData.cameras.length} cameras
</Badge>
) : ( ) : (
<span className="text-muted-foreground"> <div className="flex flex-wrap gap-1">
{t("menu.live.allCameras", { ns: "common" })} {roleData.cameras.map((camera) => (
</span> <Badge variant="outline" className="text-xs">
<CameraNameLabel
key={camera}
camera={camera}
className="text-xs smart-capitalize"
/>
</Badge>
))}
</div>
)} )}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-right">