@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.30 → 0.2.32

package/src/components/ui/navigation/subscription-badge.tsx

@@ -0,0 +1,110 @@
+/**
+ * SubscriptionBadge Component
+ * Displays subscription tier with appropriate styling
+ */
+
+'use client'
+
+import * as React from 'react';
+import { SubscriptionBadgeProps } from './user-menu-types.js';
+import { Badge } from '../badge.js';
+
+// Default icons for subscription tiers
+const StarIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="0"
+  >
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+  </svg>
+);
+
+// const CrownIcon = () => (
+//   <svg
+//     width="12"
+//     height="12"
+//     viewBox="0 0 24 24"
+//     fill="currentColor"
+//     strokeWidth="0"
+//   >
+//     <path d="M3 18h18l-2-12-4 6-3-6-3 6-4-6-2 12z"/>
+//   </svg>
+// );
+
+const DiamondIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="0"
+  >
+    <path d="M6 3h12l4 6-10 12L2 9l4-6z"/>
+  </svg>
+);
+
+export const SubscriptionBadge: React.FC<SubscriptionBadgeProps> = ({
+  subscription,
+  size = 'sm',
+  variant = 'default',
+  showIcon = true,
+  className = ''
+}) => {
+  const getDefaultIcon = () => {
+    switch (subscription.tier) {
+      case 'pro':
+        return <StarIcon />;
+      case 'enterprise':
+        return <DiamondIcon />;
+      case 'free':
+      default:
+        return null;
+    }
+  };
+
+  const getBadgeVariant = () => {
+    switch (subscription.tier) {
+      case 'pro':
+        return 'default' as const;
+      case 'enterprise':
+        return 'secondary' as const;
+      case 'free':
+      default:
+        return 'outline' as const;
+    }
+  };
+
+  const getSizeClass = () => {
+    switch (size) {
+      case 'sm':
+        return 'subscription-badge--sm';
+      case 'lg':
+        return 'subscription-badge--lg';
+      default: // md
+        return 'subscription-badge--md';
+    }
+  };
+
+  const icon = subscription.icon || (showIcon ? getDefaultIcon() : null);
+
+  return (
+    <Badge
+      variant={variant === 'default' ? getBadgeVariant() : variant}
+      className={`subscription-badge ${getSizeClass()} ${className}`}
+    >
+      {icon && (
+        <span className="subscription-badge__icon">
+          {icon}
+        </span>
+      )}
+      <span className="subscription-badge__label">
+        {subscription.label}
+      </span>
+    </Badge>
+  );
+};
+
+export default SubscriptionBadge;

package/src/components/ui/navigation/types.ts

@@ -5,6 +5,20 @@
 
 import { ReactNode } from 'react';
 
+// ============================================================================
+// USER MENU EXPORTS
+// ============================================================================
+
+export type {
+  UserMenuProps,
+  UserMenuUser,
+  UserMenuSubscription,
+  UserMenuItem,
+  UserMenuGroup,
+  UserAvatarProps,
+  SubscriptionBadgeProps
+} from './user-menu-types.js';
+
 // ============================================================================
 // COMMON NAVIGATION TYPES
 // ============================================================================

package/src/components/ui/navigation/user-avatar.tsx

@@ -0,0 +1,111 @@
+/**
+ * UserAvatar Component
+ * Displays user avatar with fallback to initials
+ */
+
+'use client'
+
+import * as React from 'react';
+import { UserAvatarProps } from './user-menu-types.js';
+
+const UserIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+    <circle cx="12" cy="7" r="4"/>
+  </svg>
+);
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({
+  user,
+  size = 'md',
+  className = '',
+  fallbackClassName = ''
+}) => {
+  const [imageError, setImageError] = React.useState(false);
+  const [imageLoading, setImageLoading] = React.useState(true);
+
+  const handleImageError = () => {
+    setImageError(true);
+    setImageLoading(false);
+  };
+
+  const handleImageLoad = () => {
+    setImageLoading(false);
+  };
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs':
+        return 'user-avatar--xs';
+      case 'sm':
+        return 'user-avatar--sm';
+      case 'lg':
+        return 'user-avatar--lg';
+      case 'xl':
+        return 'user-avatar--xl';
+      default: // md
+        return 'user-avatar--md';
+    }
+  };
+
+  const getInitials = () => {
+    if (user.fullName) {
+      return user.fullName
+        .split(' ')
+        .map(name => name.charAt(0))
+        .join('')
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    if (user.firstName) {
+      return user.firstName.charAt(0).toUpperCase();
+    }
+    if (user.email) {
+      return user.email.charAt(0).toUpperCase();
+    }
+    return '?';
+  };
+
+  const hasValidImage = user.avatar && !imageError;
+
+  return (
+    <div className={`user-avatar ${getSizeClasses()} ${className}`}>
+      {hasValidImage ? (
+        <>
+          <img
+            src={user.avatar}
+            alt={user.fullName || user.firstName || 'User avatar'}
+            className="user-avatar__image"
+            onError={handleImageError}
+            onLoad={handleImageLoad}
+            style={{
+              display: imageLoading ? 'none' : 'block'
+            }}
+          />
+          {imageLoading && (
+            <div className={`user-avatar__fallback ${fallbackClassName}`}>
+              <UserIcon />
+            </div>
+          )}
+        </>
+      ) : (
+        <div className={`user-avatar__fallback ${fallbackClassName}`}>
+          <span className="user-avatar__initials">
+            {getInitials()}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserAvatar;