administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-23 15:24:31 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

use mobilepage with create user dialog

Browse Source
This commit is contained in:
Josh Hawkins 2025-09-22 09:06:45 -05:00
parent 0920f3b5e4
commit b148bba637
1 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/overlay/CreateUserDialog.tsx
View File

@ -33,6 +33,15 @@ import {
import { Shield, User } from "lucide-react"; import { Shield, User } from "lucide-react";
import { LuCheck, LuX } from "react-icons/lu"; import { LuCheck, LuX } from "react-icons/lu";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { isDesktop, isMobile } from "react-device-detect";
import { cn } from "@/lib/utils";
import {
MobilePage,
MobilePageContent,
MobilePageDescription,
MobilePageHeader,
MobilePageTitle,
} from "../mobile/MobilePage";
type CreateUserOverlayProps = { type CreateUserOverlayProps = {
show: boolean; show: boolean;
@ -110,15 +119,27 @@ export default function CreateUserDialog({
onCancel(); onCancel();
}; };
const Overlay = isDesktop ? Dialog : MobilePage;
const Content = isDesktop ? DialogContent : MobilePageContent;
const Header = isDesktop ? DialogHeader : MobilePageHeader;
const Description = isDesktop ? DialogDescription : MobilePageDescription;
const Title = isDesktop ? DialogTitle : MobilePageTitle;
return ( return (
<Dialog open={show} onOpenChange={onCancel}> <Overlay open={show} onOpenChange={onCancel}>
<DialogContent className="sm:max-w-[425px]"> <Content
<DialogHeader> className={cn(
<DialogTitle>{t("users.dialog.createUser.title")}</DialogTitle> "scrollbar-container overflow-y-auto",
<DialogDescription> isDesktop && "my-4 flex max-h-dvh flex-col sm:max-w-[425px]",
isMobile && "px-4",
)}
>
<Header className="mt-2" onClose={onCancel}>
<Title>{t("users.dialog.createUser.title")}</Title>
<Description className={cn(!isDesktop && "sr-only")}>
{t("users.dialog.createUser.desc")} {t("users.dialog.createUser.desc")}
</DialogDescription> </Description>
</DialogHeader> </Header>
<Form {...form}> <Form {...form}>
<form <form
@ -286,7 +307,7 @@ export default function CreateUserDialog({
</DialogFooter> </DialogFooter>
</form> </form>
</Form> </Form>
</DialogContent> </Content>
</Dialog> </Overlay>
); );
} }