init: Initial commit

components/core/loading.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+};