feat(ui:profile) add profile card (#5948)

ui/components/users/profile/index.ts

@@ -0,0 +1,2 @@
+export * from "./skeleton-user-info";
+export * from "./user-info";

ui/components/users/profile/skeleton-user-info.tsx

@@ -0,0 +1,64 @@
+import { Card, CardBody, CardHeader, Skeleton } from "@nextui-org/react";
+
+export const SkeletonUserInfo = () => {
+  const rows = 4;
+
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-1/3 rounded-lg">
+          <div className="h-6 bg-default-200"></div>
+        </Skeleton>
+      </CardHeader>
+      <CardBody>
+        <div className="grid grid-cols-1 gap-4">
+          {/* Header Skeleton */}
+          <div className="grid grid-cols-4 border-b pb-2 text-sm font-semibold">
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+            <Skeleton className="h-5 w-full rounded-lg">
+              <div className="h-5 bg-default-200"></div>
+            </Skeleton>
+          </div>
+
+          {/* Row Skeletons */}
+          {Array.from({ length: rows }).map((_, index) => (
+            <div
+              key={index}
+              className="grid grid-cols-4 items-center border-b py-2 text-sm"
+            >
+              {/* Provider Name */}
+              <div className="flex items-center space-x-2">
+                <Skeleton className="h-5 w-5 rounded-lg">
+                  <div className="h-5 w-5 bg-default-200"></div>
+                </Skeleton>
+                <Skeleton className="h-5 w-1/3 rounded-lg">
+                  <div className="h-5 bg-default-200"></div>
+                </Skeleton>
+              </div>
+              {/* Percent Passing */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+              {/* Failing Checks */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+              {/* Total Resources */}
+              <Skeleton className="h-5 w-1/4 rounded-lg">
+                <div className="h-5 bg-default-200"></div>
+              </Skeleton>
+            </div>
+          ))}
+        </div>
+      </CardBody>
+    </Card>
+  );
+};

ui/components/users/profile/user-info.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Card, CardBody } from "@nextui-org/react";
+
+import { DateWithTime } from "@/components/ui/entities";
+import { UserProfileProps } from "@/types";
+
+export const UserInfo = ({
+  user,
+}: {
+  user: UserProfileProps["data"] | null;
+}) => {
+  if (!user || !user.attributes) {
+    return (
+      <Card className="dark:bg-prowler-blue-400">
+        <CardBody>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Name:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Email:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">Company:</p>
+              <span className="text-sm">-</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-semibold text-default-600">
+                Date Joined:
+              </p>
+              <span className="text-sm">-</span>
+            </div>
+          </div>
+          <div className="mt-4 text-center text-sm text-red-600">
+            Unable to load user information.
+            <br />
+            Please check your API connection.
+          </div>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const { name, email, company_name, date_joined } = user.attributes;
+
+  return (
+    <Card className="dark:bg-prowler-blue-400">
+      <CardBody>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Name:</p>
+            <span className="text-sm">{name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Email:</p>
+            <span className="text-sm">{email}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">Company:</p>
+            <span className="text-sm">{company_name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-semibold text-default-600">
+              Date Joined:
+            </p>
+            <span className="text-sm">
+              <DateWithTime inline dateTime={date_joined} />
+            </span>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+};