frontend first version
This commit is contained in:
Ada
169
src/components/common/Icons.tsx
Normal file
169
src/components/common/Icons.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import React from 'react';
|
||||
import { ViewStyle, TextStyle } from 'react-native';
|
||||
import { Feather, Ionicons, MaterialCommunityIcons, FontAwesome5 } from '@expo/vector-icons';
|
||||
|
||||
interface IconProps {
|
||||
name: string;
|
||||
size?: number;
|
||||
color?: string;
|
||||
style?: ViewStyle | TextStyle;
|
||||
}
|
||||
|
||||
// Icon component with unified interface
|
||||
export const Icon: React.FC<IconProps> = ({
|
||||
name,
|
||||
size = 24,
|
||||
color = '#000',
|
||||
style
|
||||
}) => {
|
||||
// Map custom names to actual icon library icons
|
||||
switch (name) {
|
||||
// Tab icons
|
||||
case 'flow':
|
||||
return <Ionicons name="water-outline" size={size} color={color} style={style} />;
|
||||
case 'vault':
|
||||
return <MaterialCommunityIcons name="safe-square-outline" size={size} color={color} style={style} />;
|
||||
case 'sentinel':
|
||||
return <Ionicons name="shield-checkmark-outline" size={size} color={color} style={style} />;
|
||||
case 'heritage':
|
||||
return <MaterialCommunityIcons name="file-document-outline" size={size} color={color} style={style} />;
|
||||
case 'me':
|
||||
return <Feather name="user" size={size} color={color} style={style} />;
|
||||
|
||||
// Asset type icons
|
||||
case 'game':
|
||||
return <Ionicons name="game-controller-outline" size={size} color={color} style={style} />;
|
||||
case 'key':
|
||||
return <Feather name="key" size={size} color={color} style={style} />;
|
||||
case 'document':
|
||||
return <Ionicons name="document-text-outline" size={size} color={color} style={style} />;
|
||||
case 'photo':
|
||||
return <Ionicons name="image-outline" size={size} color={color} style={style} />;
|
||||
case 'will':
|
||||
return <MaterialCommunityIcons name="script-text-outline" size={size} color={color} style={style} />;
|
||||
case 'custom':
|
||||
return <Feather name="package" size={size} color={color} style={style} />;
|
||||
|
||||
// Action icons
|
||||
case 'add':
|
||||
return <Feather name="plus" size={size} color={color} style={style} />;
|
||||
case 'check':
|
||||
return <Feather name="check" size={size} color={color} style={style} />;
|
||||
case 'lock':
|
||||
return <Feather name="lock" size={size} color={color} style={style} />;
|
||||
case 'unlock':
|
||||
return <Feather name="unlock" size={size} color={color} style={style} />;
|
||||
case 'shield':
|
||||
return <Ionicons name="shield-checkmark" size={size} color={color} style={style} />;
|
||||
case 'fingerprint':
|
||||
return <Ionicons name="finger-print" size={size} color={color} style={style} />;
|
||||
case 'encrypted':
|
||||
return <MaterialCommunityIcons name="lock-check" size={size} color={color} style={style} />;
|
||||
|
||||
// Input type icons
|
||||
case 'text':
|
||||
return <MaterialCommunityIcons name="format-text" size={size} color={color} style={style} />;
|
||||
case 'voice':
|
||||
return <Ionicons name="mic-outline" size={size} color={color} style={style} />;
|
||||
case 'image':
|
||||
return <Ionicons name="camera-outline" size={size} color={color} style={style} />;
|
||||
|
||||
// Status icons
|
||||
case 'statusnormal':
|
||||
return <Ionicons name="checkmark-circle" size={size} color={color} style={style} />;
|
||||
case 'statuswarning':
|
||||
return <Ionicons name="warning" size={size} color={color} style={style} />;
|
||||
case 'statusreleasing':
|
||||
return <Ionicons name="alert-circle" size={size} color={color} style={style} />;
|
||||
|
||||
// Navigation icons
|
||||
case 'arrowRight':
|
||||
return <Feather name="arrow-right" size={size} color={color} style={style} />;
|
||||
case 'arrowUp':
|
||||
return <Feather name="arrow-up-right" size={size} color={color} style={style} />;
|
||||
case 'chevronRight':
|
||||
return <Feather name="chevron-right" size={size} color={color} style={style} />;
|
||||
case 'close':
|
||||
return <Feather name="x" size={size} color={color} style={style} />;
|
||||
|
||||
// Other icons
|
||||
case 'heartbeat':
|
||||
return <MaterialCommunityIcons name="heart-pulse" size={size} color={color} style={style} />;
|
||||
case 'warningSign':
|
||||
return <Ionicons name="warning-outline" size={size} color={color} style={style} />;
|
||||
case 'info':
|
||||
return <Feather name="info" size={size} color={color} style={style} />;
|
||||
case 'settings':
|
||||
return <Feather name="settings" size={size} color={color} style={style} />;
|
||||
case 'clock':
|
||||
return <Feather name="clock" size={size} color={color} style={style} />;
|
||||
case 'calendar':
|
||||
return <Feather name="calendar" size={size} color={color} style={style} />;
|
||||
case 'link':
|
||||
return <Feather name="external-link" size={size} color={color} style={style} />;
|
||||
case 'github':
|
||||
return <Feather name="github" size={size} color={color} style={style} />;
|
||||
case 'mail':
|
||||
return <Feather name="mail" size={size} color={color} style={style} />;
|
||||
case 'privacy':
|
||||
return <Feather name="eye-off" size={size} color={color} style={style} />;
|
||||
case 'terms':
|
||||
return <MaterialCommunityIcons name="file-sign" size={size} color={color} style={style} />;
|
||||
case 'wave':
|
||||
return <MaterialCommunityIcons name="wave" size={size} color={color} style={style} />;
|
||||
case 'palm':
|
||||
return <FontAwesome5 name="tree" size={size} color={color} style={style} />;
|
||||
case 'sun':
|
||||
return <Feather name="sun" size={size} color={color} style={style} />;
|
||||
case 'star':
|
||||
return <Feather name="star" size={size} color={color} style={style} />;
|
||||
case 'heart':
|
||||
return <Feather name="heart" size={size} color={color} style={style} />;
|
||||
case 'users':
|
||||
return <Feather name="users" size={size} color={color} style={style} />;
|
||||
case 'gift':
|
||||
return <Feather name="gift" size={size} color={color} style={style} />;
|
||||
case 'zap':
|
||||
return <Feather name="zap" size={size} color={color} style={style} />;
|
||||
|
||||
default:
|
||||
return <Feather name="circle" size={size} color={color} style={style} />;
|
||||
}
|
||||
};
|
||||
|
||||
// Predefined icon components for common use cases
|
||||
export const GameIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="game" {...props} />
|
||||
);
|
||||
|
||||
export const KeyIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="key" {...props} />
|
||||
);
|
||||
|
||||
export const DocumentIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="document" {...props} />
|
||||
);
|
||||
|
||||
export const PhotoIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="photo" {...props} />
|
||||
);
|
||||
|
||||
export const WillIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="will" {...props} />
|
||||
);
|
||||
|
||||
export const CustomIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="custom" {...props} />
|
||||
);
|
||||
|
||||
export const CheckIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="check" {...props} />
|
||||
);
|
||||
|
||||
export const LockIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="lock" {...props} />
|
||||
);
|
||||
|
||||
export const ShieldIcon = (props: Omit<IconProps, 'name'>) => (
|
||||
<Icon name="shield" {...props} />
|
||||
);
|
||||
Reference in New Issue
Block a user