60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { twMerge } from "tailwind-merge";
|
|
import Tag from "../twui/elements/Tag";
|
|
import Row from "../twui/layout/Row";
|
|
import { TriangleAlert, CircleCheck } from "lucide-react";
|
|
import type { PropsWithChildren } from "react";
|
|
import type { TWUIStatusType } from "../twui/hooks/useStatus";
|
|
import Paper from "../twui/elements/Paper";
|
|
import Center from "../twui/layout/Center";
|
|
import Stack from "../twui/layout/Stack";
|
|
import Border from "../twui/elements/Border";
|
|
import Logo from "./logo";
|
|
|
|
type Props = PropsWithChildren & {
|
|
title?: string;
|
|
className?: string;
|
|
status?: TWUIStatusType;
|
|
};
|
|
|
|
export default function LoginShell({ children, className, status }: Props) {
|
|
return (
|
|
<Stack className="w-screen h-screen justify-center! items-center! overflow-x-hidden overflow-y-auto">
|
|
<Logo />
|
|
|
|
<Border
|
|
className={twMerge(
|
|
"w-full lg:w-[600px] flex-col items-center",
|
|
"px-4 sm:px-6 py-8 shadow-md relative",
|
|
className,
|
|
)}
|
|
>
|
|
{status?.error && status.msg ? (
|
|
<Tag
|
|
variant="outlined"
|
|
color="error"
|
|
className="w-full py-1.5 outline-error/50 bg-error/5!"
|
|
>
|
|
<Row>
|
|
<TriangleAlert size={15} />
|
|
<span>{status.msg}</span>
|
|
</Row>
|
|
</Tag>
|
|
) : null}
|
|
{status?.success && status.msg ? (
|
|
<Tag
|
|
variant="outlined"
|
|
color="success"
|
|
className="w-full py-1.5 outline-success/50 bg-success/5!"
|
|
>
|
|
<Row>
|
|
<CircleCheck size={15} />
|
|
<span>{status.msg}</span>
|
|
</Row>
|
|
</Tag>
|
|
) : null}
|
|
{children}
|
|
</Border>
|
|
</Stack>
|
|
);
|
|
}
|