푸시 알림 성과 대시보드

KPI Ingredients

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

const metrics = [
  { label: "발송", value: "128K", change: "+22.0%" },
  { label: "오픈율", value: "18.4%", change: "+3.2%p" },
  { label: "전환율", value: "2.1%", change: "+0.4%p" },
];

const chartData = [
  { name: "월", value: 42 },
  { name: "화", value: 58 },
  { name: "수", value: 51 },
  { name: "목", value: 66 },
  { name: "금", value: 72 },
];

export function PushNotificationDashboardPreview() {
  return (
    <section className="rounded-2xl border border-zinc-200 bg-white p-5 text-zinc-950">
      <div className="grid gap-3 md:grid-cols-3">
        {metrics.map((metric) => (
          <article key={metric.label} className="rounded-xl border border-zinc-200 p-4">
            <p className="text-xs font-bold text-zinc-500">{metric.label}</p>
            <strong className="mt-1 block text-2xl font-black">{metric.value}</strong>
            <span className="text-xs font-black text-emerald-600">{metric.change}</span>
          </article>
        ))}
      </div>
      <div className="mt-5 h-64">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={chartData}>
            <CartesianGrid vertical={false} stroke="rgba(0,0,0,0.08)" />
            <XAxis dataKey="name" tickLine={false} axisLine={false} />
            <YAxis tickLine={false} axisLine={false} />
            <Tooltip />
            <Bar dataKey="value" fill="#e84b2a" radius={[10, 10, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </section>
  );
}