ui: Update empty states

This commit is contained in:
Dries Augustyns
2026-04-21 10:24:35 +02:00
parent 3d9b4e4eb3
commit ecaf99665a
+13 -16
View File
@@ -18,6 +18,7 @@ import {
SelectValue, SelectValue,
} from '@plunk/ui'; } from '@plunk/ui';
import {DashboardLayout} from '../../components/DashboardLayout'; import {DashboardLayout} from '../../components/DashboardLayout';
import {EmptyState} from '../../components/EmptyState';
import {useAnalytics} from '../../lib/hooks/useAnalytics'; import {useAnalytics} from '../../lib/hooks/useAnalytics';
import useSWR from 'swr'; import useSWR from 'swr';
import { import {
@@ -270,13 +271,12 @@ export default function AnalyticsPage() {
<CardContent> <CardContent>
{!hasData ? ( {!hasData ? (
<div className="flex h-[400px] w-full items-center justify-center"> <div className="flex h-[400px] w-full items-center justify-center">
<div className="text-center"> <EmptyState
<div className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 bg-neutral-50 mb-4"> className="py-0"
<Mail className="h-5 w-5 text-neutral-400" /> icon={Mail}
</div> title="No email data yet"
<h3 className="text-sm font-semibold text-neutral-900 mb-1">No email data yet</h3> description="Send your first email to see analytics here."
<p className="text-sm text-neutral-500">Send your first email to see analytics here.</p> />
</div>
</div> </div>
) : ( ) : (
<ChartContainer config={volumeChartConfig} className="h-[400px] w-full"> <ChartContainer config={volumeChartConfig} className="h-[400px] w-full">
@@ -381,15 +381,12 @@ export default function AnalyticsPage() {
<CardContent> <CardContent>
{!hasData ? ( {!hasData ? (
<div className="flex h-[300px] w-full items-center justify-center"> <div className="flex h-[300px] w-full items-center justify-center">
<div className="text-center"> <EmptyState
<div className="inline-flex items-center justify-center w-10 h-10 rounded-md border border-neutral-200 bg-neutral-50 mb-4"> className="py-0"
<Eye className="h-5 w-5 text-neutral-400" /> icon={Eye}
</div> title="No engagement data"
<h3 className="text-sm font-semibold text-neutral-900 mb-1">No engagement data</h3> description="Engagement metrics will appear once emails are opened."
<p className="text-sm text-neutral-500"> />
Engagement metrics will appear once emails are opened.
</p>
</div>
</div> </div>
) : ( ) : (
<ChartContainer config={engagementChartConfig} className="h-[300px] w-full"> <ChartContainer config={engagementChartConfig} className="h-[300px] w-full">