diff --git a/frontend/src/components/common/EmptyState.tsx b/frontend/src/components/common/EmptyState.tsx index 22e4a266..b917eb6b 100644 --- a/frontend/src/components/common/EmptyState.tsx +++ b/frontend/src/components/common/EmptyState.tsx @@ -1,23 +1,51 @@ import type { ReactNode } from 'react' +import { Link } from 'react-router-dom' import { cn } from '@/lib/utils' interface EmptyStateProps { icon?: ReactNode + illustration?: ReactNode title: string description?: string action?: ReactNode + learnMoreLink?: string + learnMoreText?: string className?: string } -export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) { +export function EmptyState({ + icon, + illustration, + title, + description, + action, + learnMoreLink, + learnMoreText = 'Learn more', + className, +}: EmptyStateProps) { return (
- {icon &&
{icon}
} + {illustration && ( +
+ {illustration} +
+ )} + {!illustration && icon && ( +
{icon}
+ )}

{title}

{description && ( -

{description}

+

{description}

)} {action &&
{action}
} + {learnMoreLink && ( + + {learnMoreText} → + + )}
) } diff --git a/frontend/src/components/common/EmptyStateIllustrations.tsx b/frontend/src/components/common/EmptyStateIllustrations.tsx new file mode 100644 index 00000000..5ea17830 --- /dev/null +++ b/frontend/src/components/common/EmptyStateIllustrations.tsx @@ -0,0 +1,130 @@ +/** + * SVG illustrations for EmptyState components. + * Each uses the brand cyan palette (#06b6d4 / #22d3ee) at low opacity. + * ViewBox: 80x60, simple line art style. + */ + +export function FlowIllustration() { + return ( + + {/* Root node */} + + {/* Branches */} + + + {/* Left child */} + + {/* Right child */} + + {/* Leaf branches */} + + + + + + ) +} + +export function AnalyticsIllustration() { + return ( + + {/* Bars */} + + + + + {/* Baseline */} + + + ) +} + +export function SessionIllustration() { + return ( + + {/* Card 1 */} + + + + {/* Card 2 */} + + + + {/* Card 3 */} + + + + + ) +} + +export function IntegrationIllustration() { + return ( + + {/* Left box */} + + + + {/* Right box */} + + + + {/* Dashed arrows */} + + + {/* Arrow tips */} + + + + ) +} + +export function StepLibraryIllustration() { + return ( + + {/* List items */} + + + + + + + + + + ) +} + +export function ScriptIllustration() { + return ( + + {/* Terminal window */} + + {/* Title bar */} + + + + {/* Code lines */} + + + + + + ) +} + +export function ShareIllustration() { + return ( + + {/* Center node */} + + {/* Top-right node */} + + {/* Bottom-right node */} + + {/* Connecting lines */} + + + + ) +}