Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.1 kB · 89 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990import { Text, useTheme } from "@streamplace/components";import { ReactNode } from "react";import { View } from "react-native";
/** * A recessed 64px tile holding a lucide icon — the standard illustration for * icon-based empty states (pass as `illustration` to <EmptyState>). */export function EmptyStateTile({ icon: Icon, tone,}: { icon: React.ComponentType<any>; tone?: string;}) { const { theme } = useTheme(); const c = theme.colors; return ( <View style={{ width: 64, height: 64, borderRadius: 16, alignItems: "center", justifyContent: "center", backgroundColor: c.surface1, borderWidth: 1, borderColor: c.borderSubtle, }} > <Icon size={28} color={tone ?? c.text3} /> </View> );}
/** * Shared empty-state layout: a ~64px illustration, a semibold headline, muted * supporting copy, and an optional call to action — centered in the available * space. Used across Home, Videos, and the content hub so they read as one * system. Give it a parent with a flex context (e.g. a flex:1 column or a * flexGrow scroll container) for it to center vertically. */export function EmptyState({ illustration, title, subtitle, action,}: { illustration: ReactNode; title: string; subtitle?: string; action?: ReactNode;}) { return ( <View style={{ flex: 1, minHeight: 320, justifyContent: "center", alignItems: "center", paddingVertical: 48, paddingHorizontal: 24, }} > {illustration} <Text size="xl" weight="semibold" style={{ marginTop: 20, textAlign: "center" }} > {title} </Text> {subtitle ? ( <Text color="muted" style={{ marginTop: 8, textAlign: "center", maxWidth: 380, lineHeight: 21, }} > {subtitle} </Text> ) : null} {action ? <View style={{ marginTop: 24 }}>{action}</View> : null} </View> );}