79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { View, Pressable, useColorScheme } from "react-native";
|
|
import { Text } from "@/components/ui/text";
|
|
|
|
interface EmptyStateProps {
|
|
title: string;
|
|
description?: string;
|
|
hint?: string;
|
|
actionLabel?: string;
|
|
onActionPress?: () => void;
|
|
previewLines?: number;
|
|
}
|
|
|
|
export function EmptyState({
|
|
title,
|
|
description,
|
|
hint,
|
|
actionLabel,
|
|
onActionPress,
|
|
previewLines = 3,
|
|
}: EmptyStateProps) {
|
|
const scheme = useColorScheme();
|
|
const isDark = scheme === "dark";
|
|
|
|
const dashColor = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
|
|
const lineFill = isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.08)";
|
|
|
|
return (
|
|
<View className="w-full">
|
|
<View className="bg-card border border-border/20 rounded-2xl p-5">
|
|
<View className="mb-4">
|
|
<Text variant="h3" className="text-foreground font-bold">
|
|
{title}
|
|
</Text>
|
|
{!!description && (
|
|
<Text variant="muted" className="mt-1">
|
|
{description}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
<View
|
|
className="rounded-xl p-4"
|
|
style={{ borderWidth: 1, borderStyle: "dashed", borderColor: dashColor }}
|
|
>
|
|
<View className="gap-3">
|
|
{Array.from({ length: Math.max(1, previewLines) }).map((_, idx) => (
|
|
<View
|
|
key={idx}
|
|
className="rounded-md"
|
|
style={{
|
|
height: 12,
|
|
width: `${idx === 0 ? 90 : idx === 1 ? 72 : 80}%`,
|
|
backgroundColor: lineFill,
|
|
}}
|
|
/>
|
|
))}
|
|
</View>
|
|
|
|
{!!hint && (
|
|
<Text variant="muted" className="mt-4">
|
|
{hint}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
{!!actionLabel && !!onActionPress && (
|
|
<Pressable
|
|
onPress={onActionPress}
|
|
className="mt-5 bg-primary h-10 rounded-[6px] items-center justify-center"
|
|
>
|
|
<Text className="text-white text-sm font-bold">{actionLabel}</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|