255 lines
7.4 KiB
TypeScript
255 lines
7.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { cn } from '../../lib/utils';
|
|
import * as LucideIcons from 'lucide-react';
|
|
|
|
// Supported icon types
|
|
export type IconName =
|
|
// Lucide icons (primary)
|
|
| 'star' | 'check' | 'x' | 'arrow-left' | 'arrow-right' | 'chevron-left' | 'chevron-right'
|
|
| 'quote' | 'phone' | 'mail' | 'map-pin' | 'clock' | 'calendar' | 'user' | 'users'
|
|
| 'award' | 'briefcase' | 'building' | 'globe' | 'settings' | 'tool' | 'wrench'
|
|
| 'shield' | 'lock' | 'key' | 'heart' | 'thumbs-up' | 'message-circle' | 'phone-call'
|
|
| 'mail-open' | 'map' | 'navigation' | 'home' | 'info' | 'alert-circle' | 'check-circle'
|
|
| 'x-circle' | 'plus' | 'minus' | 'search' | 'filter' | 'download' | 'upload'
|
|
| 'share-2' | 'link' | 'external-link' | 'file-text' | 'file' | 'folder'
|
|
// Font Awesome style aliases (for WP compatibility)
|
|
| 'fa-star' | 'fa-check' | 'fa-times' | 'fa-arrow-left' | 'fa-arrow-right'
|
|
| 'fa-quote-left' | 'fa-phone' | 'fa-envelope' | 'fa-map-marker' | 'fa-clock-o'
|
|
| 'fa-calendar' | 'fa-user' | 'fa-users' | 'fa-trophy' | 'fa-briefcase'
|
|
| 'fa-building' | 'fa-globe' | 'fa-cog' | 'fa-wrench' | 'fa-shield'
|
|
| 'fa-lock' | 'fa-key' | 'fa-heart' | 'fa-thumbs-up' | 'fa-comment'
|
|
| 'fa-phone-square' | 'fa-envelope-open' | 'fa-map' | 'fa-compass'
|
|
| 'fa-home' | 'fa-info-circle' | 'fa-check-circle' | 'fa-times-circle'
|
|
| 'fa-plus' | 'fa-minus' | 'fa-search' | 'fa-filter' | 'fa-download'
|
|
| 'fa-upload' | 'fa-share-alt' | 'fa-link' | 'fa-external-link'
|
|
| 'fa-file-text' | 'fa-file' | 'fa-folder';
|
|
|
|
export interface IconProps {
|
|
name: IconName;
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
className?: string;
|
|
color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted' | 'current';
|
|
strokeWidth?: number;
|
|
onClick?: () => void;
|
|
ariaLabel?: string;
|
|
}
|
|
|
|
/**
|
|
* Icon Component
|
|
* Universal icon component supporting Lucide icons and Font Awesome aliases
|
|
* Maps WPBakery vc_icon patterns to modern React icons
|
|
*/
|
|
export const Icon: React.FC<IconProps> = ({
|
|
name,
|
|
size = 'md',
|
|
className = '',
|
|
color = 'current',
|
|
strokeWidth = 2,
|
|
onClick,
|
|
ariaLabel
|
|
}) => {
|
|
// Map size to actual dimensions
|
|
const sizeMap = {
|
|
xs: 'w-3 h-3',
|
|
sm: 'w-4 h-4',
|
|
md: 'w-5 h-5',
|
|
lg: 'w-6 h-6',
|
|
xl: 'w-8 h-8',
|
|
'2xl': 'w-10 h-10'
|
|
};
|
|
|
|
// Map color to Tailwind classes
|
|
const colorMap = {
|
|
primary: 'text-primary',
|
|
secondary: 'text-secondary',
|
|
success: 'text-green-600',
|
|
warning: 'text-yellow-600',
|
|
error: 'text-red-600',
|
|
muted: 'text-gray-500',
|
|
current: 'text-current'
|
|
};
|
|
|
|
// Normalize icon name (remove fa- prefix and map to Lucide)
|
|
const normalizeIconName = (iconName: string): string => {
|
|
// Remove fa- prefix if present
|
|
const cleanName = iconName.replace(/^fa-/, '');
|
|
|
|
// Map common Font Awesome names to Lucide
|
|
const faToLucide: Record<string, string> = {
|
|
'star': 'star',
|
|
'check': 'check',
|
|
'times': 'x',
|
|
'arrow-left': 'arrow-left',
|
|
'arrow-right': 'arrow-right',
|
|
'quote-left': 'quote',
|
|
'phone': 'phone',
|
|
'envelope': 'mail',
|
|
'map-marker': 'map-pin',
|
|
'clock-o': 'clock',
|
|
'calendar': 'calendar',
|
|
'user': 'user',
|
|
'users': 'users',
|
|
'trophy': 'award',
|
|
'briefcase': 'briefcase',
|
|
'building': 'building',
|
|
'globe': 'globe',
|
|
'cog': 'settings',
|
|
'wrench': 'wrench',
|
|
'shield': 'shield',
|
|
'lock': 'lock',
|
|
'key': 'key',
|
|
'heart': 'heart',
|
|
'thumbs-up': 'thumbs-up',
|
|
'comment': 'message-circle',
|
|
'phone-square': 'phone',
|
|
'envelope-open': 'mail-open',
|
|
'map': 'map',
|
|
'compass': 'navigation',
|
|
'home': 'home',
|
|
'info-circle': 'info',
|
|
'check-circle': 'check-circle',
|
|
'times-circle': 'x-circle',
|
|
'plus': 'plus',
|
|
'minus': 'minus',
|
|
'search': 'search',
|
|
'filter': 'filter',
|
|
'download': 'download',
|
|
'upload': 'upload',
|
|
'share-alt': 'share-2',
|
|
'link': 'link',
|
|
'external-link': 'external-link',
|
|
'file-text': 'file-text',
|
|
'file': 'file',
|
|
'folder': 'folder'
|
|
};
|
|
|
|
return faToLucide[cleanName] || cleanName;
|
|
};
|
|
|
|
const iconName = normalizeIconName(name);
|
|
const IconComponent = (LucideIcons as any)[iconName];
|
|
|
|
if (!IconComponent) {
|
|
console.warn(`Icon "${name}" (normalized: "${iconName}") not found in Lucide icons`);
|
|
return (
|
|
<span className={cn(
|
|
'inline-flex items-center justify-center',
|
|
sizeMap[size],
|
|
colorMap[color],
|
|
'bg-gray-200 rounded',
|
|
className
|
|
)}>
|
|
?
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<IconComponent
|
|
className={cn(
|
|
'inline-block',
|
|
sizeMap[size],
|
|
colorMap[color],
|
|
'transition-transform duration-150',
|
|
onClick ? 'cursor-pointer hover:scale-110' : '',
|
|
className
|
|
)}
|
|
strokeWidth={strokeWidth}
|
|
onClick={onClick}
|
|
role={onClick ? 'button' : 'img'}
|
|
aria-label={ariaLabel || name}
|
|
tabIndex={onClick ? 0 : undefined}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// Helper component for icon buttons
|
|
export const IconButton: React.FC<IconProps & { label?: string }> = ({
|
|
name,
|
|
size = 'md',
|
|
className = '',
|
|
color = 'primary',
|
|
onClick,
|
|
label,
|
|
ariaLabel
|
|
}) => {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
'inline-flex items-center justify-center gap-2',
|
|
'rounded-lg transition-all duration-200',
|
|
'hover:bg-primary/10 active:scale-95',
|
|
'focus:outline-none focus:ring-2 focus:ring-primary/50',
|
|
className
|
|
)}
|
|
aria-label={ariaLabel || label || name}
|
|
>
|
|
<Icon name={name} size={size} color={color} />
|
|
{label && <span className="text-sm font-medium">{label}</span>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
// Helper function to parse WPBakery vc_icon attributes
|
|
export function parseWpIcon(iconClass: string): IconProps {
|
|
// Parse classes like "vc_icon fa fa-star" or "vc_icon lucide-star"
|
|
const parts = iconClass.split(/\s+/);
|
|
let name: IconName = 'star';
|
|
let size: IconProps['size'] = 'md';
|
|
|
|
// Find icon name
|
|
const iconPart = parts.find(p => p.includes('fa-') || p.includes('lucide-') || p === 'fa');
|
|
if (iconPart) {
|
|
if (iconPart.includes('fa-')) {
|
|
name = iconPart.replace('fa-', '') as IconName;
|
|
} else if (iconPart.includes('lucide-')) {
|
|
name = iconPart.replace('lucide-', '') as IconName;
|
|
}
|
|
}
|
|
|
|
// Find size
|
|
if (parts.includes('fa-lg') || parts.includes('text-xl')) size = 'lg';
|
|
if (parts.includes('fa-2x')) size = 'xl';
|
|
if (parts.includes('fa-3x')) size = '2xl';
|
|
if (parts.includes('fa-xs')) size = 'xs';
|
|
if (parts.includes('fa-sm')) size = 'sm';
|
|
|
|
return { name, size };
|
|
}
|
|
|
|
// Icon wrapper for feature lists
|
|
export const IconFeature: React.FC<{
|
|
icon: IconName;
|
|
title: string;
|
|
description?: string;
|
|
iconPosition?: 'top' | 'left';
|
|
className?: string;
|
|
}> = ({ icon, title, description, iconPosition = 'left', className = '' }) => {
|
|
const isLeft = iconPosition === 'left';
|
|
|
|
return (
|
|
<div className={cn(
|
|
'flex gap-4',
|
|
isLeft ? 'flex-row items-start' : 'flex-col items-center text-center',
|
|
className
|
|
)}>
|
|
<Icon
|
|
name={icon}
|
|
size="xl"
|
|
color="primary"
|
|
className={cn(isLeft ? 'mt-1' : '')}
|
|
/>
|
|
<div className="flex-1">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">{title}</h3>
|
|
{description && (
|
|
<p className="text-gray-600 text-sm leading-relaxed">{description}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Icon; |