mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 21:49:40 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
98 lines
2 KiB
TypeScript
98 lines
2 KiB
TypeScript
import { View, ViewStyle } from 'react-native';
|
|
import { Text } from '../Text/Text';
|
|
import { Icon } from '../Icon/Icon';
|
|
|
|
export type EmptyStateProps = {
|
|
/** Icon name (Ionicons/SF Symbol) or emoji */
|
|
icon?: string;
|
|
/** Emoji to display instead of icon */
|
|
emoji?: string;
|
|
/** Icon size */
|
|
iconSize?: number;
|
|
/** Icon color */
|
|
iconColor?: string;
|
|
/** Title text */
|
|
title: string;
|
|
/** Description text */
|
|
description: string;
|
|
/** Title color */
|
|
titleColor?: string;
|
|
/** Description color */
|
|
descriptionColor?: string;
|
|
/** Container padding */
|
|
padding?: number;
|
|
/** Additional container styles */
|
|
style?: ViewStyle;
|
|
/** Additional content below description */
|
|
children?: React.ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Empty state component for displaying when there's no content.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <EmptyState
|
|
* icon="images"
|
|
* title="No images yet"
|
|
* description="Start creating to see your images here"
|
|
* />
|
|
*
|
|
* <EmptyState
|
|
* emoji="📸"
|
|
* title="No photos"
|
|
* description="Take your first photo to get started"
|
|
* />
|
|
* ```
|
|
*/
|
|
export function EmptyState({
|
|
icon,
|
|
emoji,
|
|
iconSize = 60,
|
|
iconColor = '#9CA3AF',
|
|
title,
|
|
description,
|
|
titleColor = '#1F2937',
|
|
descriptionColor = '#6B7280',
|
|
padding = 32,
|
|
style,
|
|
children,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding,
|
|
...style,
|
|
}}
|
|
>
|
|
{/* Icon or Emoji */}
|
|
{emoji ? (
|
|
<Text style={{ fontSize: iconSize, marginBottom: 16 }}>{emoji}</Text>
|
|
) : icon ? (
|
|
<Icon name={icon} size={iconSize} color={iconColor} style={{ marginBottom: 16 }} />
|
|
) : null}
|
|
|
|
{/* Title */}
|
|
<Text
|
|
variant="h3"
|
|
weight="semibold"
|
|
align="center"
|
|
color={titleColor}
|
|
style={{ marginBottom: 8 }}
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
{/* Description */}
|
|
<Text variant="body" align="center" color={descriptionColor}>
|
|
{description}
|
|
</Text>
|
|
|
|
{/* Optional children (e.g., action button) */}
|
|
{children && <View style={{ marginTop: 24 }}>{children}</View>}
|
|
</View>
|
|
);
|
|
}
|