Big Updated, added some tests, added comments for all functions, I forgot the rest

apps/web/src/components/modals/basic.tsx

@@ -2,10 +2,16 @@ import type { User } from "@tensamin/user/context";
 import { Avatar, AvatarImage, AvatarFallback } from "@tensamin/ui/cmp/avatar";
 import { reduceDisplay } from "./utils";
 import { Card, CardHeader } from "@tensamin/ui/cmp/card";
+import { Skeleton } from "@tensamin/ui/cmp/skeleton";
 
-export default function Basic(props: { user: User }) {
+/**
+ * Executes Basic.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
+export function Basic(props: { user: User }) {
   return (
-    <Card className="animate-in fade-in duration-300 rounded-2xl">
+    <Card className="animate-in fade-in duration-300 rounded-2xl py-0">
       <CardHeader className="flex flex-row gap-2.5 items-center justify-start p-2">
         <Avatar>
           <AvatarImage src={props.user.avatar} />
@@ -18,3 +24,11 @@ export default function Basic(props: { user: User }) {
     </Card>
   );
 }
+
+/**
+ * Executes Loading.
+ * @returns unknown.
+ */
+export function Loading() {
+  return <Skeleton className="h-12 rounded-xl" />;
+}

apps/web/src/components/modals/utils.ts

@@ -1,3 +1,8 @@
+/**
+ * Executes reduceDisplay.
+ * @param display Parameter display.
+ * @returns unknown.
+ */
 export function reduceDisplay(display: string) {
   const words = display.split(" ");
   if (words.length === 1) {