File size: 3,218 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | "use client";
import { useTranslations } from "next-intl";
/**
* EmptyState — FASE-07 UX
*
* Reusable empty state component for dashboard sections when no data
* is available. Provides visual feedback and optional action button.
*
* Usage:
* <EmptyState
* icon="📡"
* title="No providers yet"
* description="Add your first API provider to get started."
* actionLabel="Add Provider"
* onAction={() => router.push('/providers/add')}
* />
*/
interface EmptyStateProps {
icon?: string;
title?: string;
description?: string;
actionLabel?: string;
onAction?: (() => void) | null;
}
export default function EmptyState({
icon = "📭",
title,
description = "",
actionLabel = "",
onAction = null,
}: EmptyStateProps) {
const t = useTranslations("common");
const resolvedTitle = title ?? t("nothingHere");
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "48px 24px",
textAlign: "center",
minHeight: "200px",
}}
>
<div
style={{
fontSize: "48px",
marginBottom: "16px",
opacity: 0.8,
animation: "emptyBounce 2s ease-in-out infinite",
}}
role="img"
aria-hidden="true"
>
{icon}
</div>
<h3
style={{
fontSize: "18px",
fontWeight: 600,
color: "var(--text-primary, #e0e0e0)",
marginBottom: "8px",
margin: 0,
}}
>
{resolvedTitle}
</h3>
{description && (
<p
style={{
fontSize: "14px",
color: "var(--text-secondary, #888)",
maxWidth: "320px",
lineHeight: 1.5,
marginTop: "8px",
}}
>
{description}
</p>
)}
{actionLabel && onAction && (
<button
onClick={onAction}
style={{
marginTop: "20px",
padding: "10px 24px",
borderRadius: "8px",
border: "1px solid rgba(99, 102, 241, 0.4)",
background: "rgba(99, 102, 241, 0.15)",
color: "#818cf8",
fontSize: "14px",
fontWeight: 500,
cursor: "pointer",
transition: "all 0.2s ease",
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(99, 102, 241, 0.25)";
(e.currentTarget as HTMLElement).style.transform = "translateY(-1px)";
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLElement).style.background = "rgba(99, 102, 241, 0.15)";
(e.currentTarget as HTMLElement).style.transform = "translateY(0)";
}}
>
{actionLabel}
</button>
)}
<style>{`
@keyframes emptyBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
`}</style>
</div>
);
}
|