36 lines
1.7 KiB
TypeScript
36 lines
1.7 KiB
TypeScript
import { IconHomeFilled } from "@tabler/icons-react";
|
|
import { Card, CardContent, CardTitle, CardHeader } from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { Separator } from "@/components/ui/separator";
|
|
|
|
export const LoadingContainer = () => {
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 w-full max-w-md">
|
|
<Card className="flex flex-col p-0">
|
|
<CardHeader className="flex flex-col gap-4 justify-center items-center pt-6">
|
|
<CardTitle className="flex flex-row items-center justify-center gap-1 text-2xl font-bold text-center">
|
|
<IconHomeFilled className="w-6 h-6" />
|
|
<Label className="text-2xl font-bold text-center">SecNex</Label>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-6 px-0 pt-6">
|
|
<div className="flex flex-col gap-6 px-6">
|
|
<div className="flex justify-center items-center gap-6 pb-4">
|
|
<div className="flex flex-col gap-2 bg-violet-200 rounded-full p-4">
|
|
<div className="flex justify-center items-center gap-6 border-2 border-violet-900 rounded-full">
|
|
<Spinner className="size-8 animate-spin text-violet-900" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className="w-full" />
|
|
<div className="flex flex-col gap-4 items-center justify-center w-full px-6 pb-6">
|
|
<Label className="text-zinc-700 dark:text-zinc-300 font-medium text-xs text-center">Secured by SecNex</Label>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}; |