update profile page

apps/dashboard/src/components/profiles/profile-avatar.tsx

@@ -15,9 +15,10 @@ interface ProfileAvatarProps
   className?: string;
 }
 
-const variants = cva('', {
+const variants = cva('shrink-0', {
   variants: {
     size: {
+      lg: 'h-14 w-14 rounded [&>span]:rounded',
       default: 'h-8 w-8 rounded [&>span]:rounded',
       sm: 'h-6 w-6 rounded [&>span]:rounded',
       xs: 'h-4 w-4 rounded [&>span]:rounded',
@@ -39,11 +40,13 @@ export function ProfileAvatar({
       {avatar && <AvatarImage src={avatar} />}
       <AvatarFallback
         className={cn(
-          size === 'sm'
-            ? 'text-xs'
-            : size === 'xs'
-              ? 'text-[8px]'
-              : 'text-base',
+          size === 'lg'
+            ? 'text-lg'
+            : size === 'sm'
+              ? 'text-xs'
+              : size === 'xs'
+                ? 'text-[8px]'
+                : 'text-base',
           'bg-slate-200 text-slate-800'
         )}
       >

apps/dashboard/src/components/widget.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@/utils/cn';
+import type { LucideIcon } from 'lucide-react';
 
 export interface WidgetHeadProps {
   children: React.ReactNode;
@@ -17,6 +18,34 @@ export function WidgetHead({ children, className }: WidgetHeadProps) {
   );
 }
 
+export interface WidgetTitleProps {
+  children: React.ReactNode;
+  className?: string;
+  icon?: LucideIcon;
+}
+export function WidgetTitle({
+  children,
+  className,
+  icon: Icon,
+}: WidgetTitleProps) {
+  return (
+    <div
+      className={cn(
+        'relative flex items-center gap-4',
+        className,
+        !!Icon && 'pl-12'
+      )}
+    >
+      {Icon && (
+        <div className="absolute left-0 rounded-lg bg-slate-100 p-2">
+          <Icon size={18} />
+        </div>
+      )}
+      <div className="title">{children}</div>
+    </div>
+  );
+}
+
 export interface WidgetBodyProps {
   children: React.ReactNode;
   className?: string;