Update typography UI styles + loading /dashboard + fix update name sc…

…hema

src/app/dashboard/loading.tsx

@@ -1,7 +1,12 @@
-import React from "react";
+import { LoaderIcon } from "lucide-react";
 
 const Loading = () => {
-  return <div>Loading</div>;
+  return (
+    <div className="mt-14 flex flex-col items-center text-neutral-500 dark:text-neutral-400 animate-in fade-in-20 duration-100">
+      <LoaderIcon size={20} className="animate-spin" />
+      <p className="mt-2">Loading...</p>
+    </div>
+  );
 };
 
 export default Loading;

src/components/change-theme.tsx

@@ -9,6 +9,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/ui/dropdown-menu";
 
@@ -32,6 +34,12 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
+        <DropdownMenuLabel className="font-normal">
+          <p className="text-sm font-medium leading-none">
+            Theme
+          </p>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
         <DropdownMenuItem
           className="flex items-center space-x-3"
           onClick={() => setTheme("light")}

src/server/schemas/index.ts

@@ -55,7 +55,9 @@ export const getSingleLinkSchema = z.object({
 });
 
 export const UpdateProfileSchema = z.object({
-  name: z.string().min(1, { message: "Name is required." }),
+  name: z.string().min(1, { message: "Name is required." }).max(40, {
+    message: "Name must be less than 40 characters.",
+  }),
   username: z.string().optional(),
   email: z.string().email({ message: "Invalid email address." }),
 });

src/ui/typography.tsx

@@ -80,10 +80,41 @@ export const TypographyP = forwardRef<
   return (
     <p
       ref={ref}
-      className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+      className={cn(
+        "text-pretty leading-7 [&:not(:first-child)]:mt-4",
+        className,
+      )}
       {...props}
     />
   );
 });
 
 TypographyP.displayName = "TypographyP";
+
+export const TypographyListUl = forwardRef<
+  HTMLUListElement,
+  React.ComponentPropsWithoutRef<"ul">
+>(({ className, ...props }, ref) => {
+  return (
+    <ul
+      ref={ref}
+      className={cn("my-6 list-disc [&>li]:mt-2", className)}
+      {...props}
+    />
+  );
+});
+
+TypographyListUl.displayName = "TypographyListUl";
+
+export const TypographyListOl = forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => {
+  return (
+    <ol
+      ref={ref}
+      className={cn("my-6 list-decimal [&>li]:mt-2", className)}
+      {...props}
+    />
+  );
+});