98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import * as z from "zod";
|
|
|
|
const MetricSchema = z.object({
|
|
value: z.string().min(2).max(6).meta({
|
|
description: "Primary metric value.",
|
|
}),
|
|
label: z.string().min(3).max(15).meta({
|
|
description: "Metric label text.",
|
|
}),
|
|
subtext: z.string().min(3).max(30).meta({
|
|
description: "Metric subtext/description.",
|
|
}),
|
|
});
|
|
|
|
export const slideLayoutId = "metrics-grid-slide";
|
|
export const slideLayoutName = "Metrics Grid Slide";
|
|
export const slideLayoutDescription =
|
|
"A slide with metrics card grid and title at the top.";
|
|
|
|
export const Schema = z.object({
|
|
title: z.string().min(6).max(18).default("Metrics").meta({
|
|
description: "Slide heading shown above the KPI cards.",
|
|
}),
|
|
metrics: z
|
|
.array(MetricSchema)
|
|
.min(1)
|
|
.max(6)
|
|
.default([
|
|
{ value: "99.9%", label: "Uptime", subtext: "Last 12 months" },
|
|
{ value: "<100ms", label: "Response Time", subtext: "Last 12 months" },
|
|
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" },
|
|
{ value: "99.9%", label: "Uptime", subtext: "Last 12 months" },
|
|
{ value: "<100ms", label: "Response Time", subtext: "Last 12 months" },
|
|
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" },
|
|
])
|
|
.meta({
|
|
description: "Metrics cards in a grid.",
|
|
}),
|
|
pageLabel: z.string().min(3).max(8).optional().default("11 / 11").meta({
|
|
description: "Bottom pagination label.",
|
|
}),
|
|
});
|
|
|
|
export type SchemaType = z.infer<typeof Schema>;
|
|
|
|
const CodeSlide11MetricsGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
|
|
|
return (
|
|
<>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" />
|
|
<div
|
|
className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border p-[40px]"
|
|
style={{
|
|
borderColor: "var(--stroke,#243272)",
|
|
backgroundColor: "var(--background-color,#101B37)",
|
|
color: "var(--background-text,#edf1ff)",
|
|
fontFamily: "var(--body-font-family,Nunito Sans)",
|
|
}}
|
|
>
|
|
|
|
|
|
|
|
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#ffffff)" }}>{data.title}</h2>
|
|
|
|
<div className="mt-[53px] grid flex-1 grid-cols-3 gap-[14px]">
|
|
{data?.metrics?.map((metric, index) => (
|
|
<div
|
|
key={`metric-grid-${index}`}
|
|
className="rounded-[16px] border pt-[26px] px-[26px] pb-[16px] text-center"
|
|
style={{
|
|
borderColor: "var(--stroke,#1D293D80)",
|
|
backgroundColor: "var(--card-color,#0F172B80)",
|
|
}}
|
|
>
|
|
<p className="text-[64px] font-semibold leading-none" style={{ color: "var(--graph-0,#8bb4ff)" }}>{metric.value}</p>
|
|
<p className="mt-[13px] text-[26px]" style={{ color: "var(--background-text,#edf1ff)" }}>{metric.label}</p>
|
|
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.subtext}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
|
|
<div
|
|
className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border px-[22px] py-[8px] text-[14px]"
|
|
style={{
|
|
borderColor: "var(--stroke,#31415880)",
|
|
backgroundColor: "var(--card-color,#1D293DCC)",
|
|
color: "var(--background-text,#CAD5E2)",
|
|
}}
|
|
>
|
|
{data.pageLabel}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CodeSlide11MetricsGrid;
|