refactor: better 'Code' template schema and description
This commit is contained in:
Suraj Jha
parent
679ae31a4e
commit
c6dd188753
11 changed files with 105 additions and 97 deletions
|
|
@ -1,16 +1,16 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-roadmap-cover-slide";
|
||||
export const slideLayoutName = "Code Roadmap Cover Slide";
|
||||
export const slideLayoutId = "cover-slide";
|
||||
export const slideLayoutName = "Cover Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A centered opening slide with company name, roadmap title, and supporting subtitle.";
|
||||
"Opening/cover/intro slide with organization/institution/presenter, presentation title/heading , and supporting subtitle.";
|
||||
|
||||
export const Schema = z.object({
|
||||
companyName: z.string().min(2).max(18).default("COMPANY NAME").meta({
|
||||
description: "Organization name shown above the slide title.",
|
||||
companyName: z.string().min(2).max(18).optional().default("COMPANY NAME").meta({
|
||||
description: "Optional organization/institution/presenter name shown above the slide title.",
|
||||
}),
|
||||
title: z.string().min(8).max(28).default("Development Roadmap").meta({
|
||||
description: "Primary slide heading.",
|
||||
description: "Title/heading of the slide.",
|
||||
}),
|
||||
subtitle: z
|
||||
.string()
|
||||
|
|
@ -22,8 +22,8 @@ export const Schema = z.object({
|
|||
.meta({
|
||||
description: "Supporting subtitle shown under the heading.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("1 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
pageLabel: z.string().min(3).max(8).optional().default("1 / 11").meta({
|
||||
description: "",
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -4,16 +4,22 @@ import * as z from "zod";
|
|||
export const slideLayoutId = "code-explanation-split-slide";
|
||||
export const slideLayoutName = "Code Explanation Split Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A two-column slide with a code panel on the left and descriptive explanation on the right.";
|
||||
"A two-column slide with a code panel on the left and description on the right.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(24).default("Code + Explanation").meta({
|
||||
description: "Slide heading shown at the top-left.",
|
||||
}),
|
||||
codeSnippet: z.object({
|
||||
language: z.string().min(2).max(10),
|
||||
fileName: z.string().min(3).max(30),
|
||||
content: z.string().min(20).max(520),
|
||||
language: z.string().min(2).max(10).meta({
|
||||
description: "Programming language of the snippet",
|
||||
}),
|
||||
fileName: z.string().min(3).max(30).meta({
|
||||
description: "File name label shown above the code snippet.",
|
||||
}),
|
||||
content: z.string().min(20).max(520).meta({
|
||||
description: "The actual code content to be displayed.",
|
||||
}),
|
||||
}).default({
|
||||
language: "tsx",
|
||||
fileName: "components/UserAuth.tsx",
|
||||
|
|
@ -37,10 +43,10 @@ export function UserAuth() {
|
|||
}).meta({
|
||||
description: "Code sample shown in the left panel.",
|
||||
}),
|
||||
explanationTitle: z.string().min(4).max(20).default("Explanation").meta({
|
||||
description: "Heading shown above the explanatory paragraph.",
|
||||
descriptionTitle: z.string().min(4).max(20).default("Description").meta({
|
||||
description: "Heading shown above the paragraph.",
|
||||
}),
|
||||
explanation: z
|
||||
description: z
|
||||
.string()
|
||||
.min(40)
|
||||
.max(360)
|
||||
|
|
@ -48,9 +54,9 @@ export function UserAuth() {
|
|||
"This component manages credentials as local state and submits them through an async handler. The login utility abstracts network details while the handler keeps the UI flow predictable. Keep validation and side effects isolated so changes remain safe when authentication requirements evolve. "
|
||||
)
|
||||
.meta({
|
||||
description: "Explanation paragraph shown in the right column.",
|
||||
description: "Description paragraph shown in the right column.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("2 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("2 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -104,9 +110,9 @@ const CodeSlide02CodeExplanationSplit = ({
|
|||
</div>
|
||||
|
||||
<div className=" ">
|
||||
<h3 className="text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
|
||||
<h3 className="text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.descriptionTitle}</h3>
|
||||
<p className="mt-[18px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>
|
||||
{data.explanation}
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import * as z from "zod";
|
||||
|
||||
|
||||
export const slideLayoutId = "code-api-request-response-slide";
|
||||
export const slideLayoutName = "Code API Request Response Slide";
|
||||
export const slideLayoutId = "api-request-response-slide";
|
||||
export const slideLayoutName = "API Request Response Slide";
|
||||
export const slideLayoutDescription =
|
||||
"An API-focused slide with endpoint metadata, request payload, and response payload.";
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ export const Schema = z.object({
|
|||
}).meta({
|
||||
description: "Response payload example.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("3 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("3 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ import * as z from "zod";
|
|||
|
||||
const FeatureCardSchema = z.object({
|
||||
title: z.string().min(3).max(17).meta({
|
||||
description: "Feature title shown on each card.",
|
||||
description: "Title shown on each card.",
|
||||
}),
|
||||
description: z.string().min(18).max(80).meta({
|
||||
description: "Supporting feature description.",
|
||||
description: "Description shown on each card.",
|
||||
}),
|
||||
icon: z.object({
|
||||
__icon_url__: z.string().meta({
|
||||
|
|
@ -18,14 +18,14 @@ const FeatureCardSchema = z.object({
|
|||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
}).meta({
|
||||
description: "Icon used for each feature bullet in plan cards.",
|
||||
description: "Suiting icon used for each bullet in plan cards.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-feature-grid-slide";
|
||||
export const slideLayoutName = "Code Feature Grid Slide";
|
||||
export const slideLayoutId = "cards-grid-slide";
|
||||
export const slideLayoutName = "Cards Grid Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A six-card feature summary grid with icon badges and compact descriptions.";
|
||||
"A list of cards in grid with title, icon and compact description in each.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(20).default("Feature Grid").meta({
|
||||
|
|
@ -33,7 +33,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
features: z
|
||||
.array(FeatureCardSchema)
|
||||
.min(3)
|
||||
.min(1)
|
||||
.max(6)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -88,7 +88,7 @@ export const Schema = z.object({
|
|||
.meta({
|
||||
description: "Six feature cards displayed in a 3x2 grid.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("4 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("4 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ const ComparisonRowSchema = z.object({
|
|||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-comparison-table-slide";
|
||||
export const slideLayoutName = "Code Comparison Table Slide";
|
||||
export const slideLayoutId = "table-slide";
|
||||
export const slideLayoutName = "Table Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A framework comparison table with feature rows and highlighted compatibility marks.";
|
||||
"A slide with title and a table.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(18).default("Comparison").meta({
|
||||
|
|
@ -29,7 +29,7 @@ export const Schema = z.object({
|
|||
}).default(["Feature", "Column 1", "Column 2", "Column 3"]),
|
||||
rows: z
|
||||
.array(ComparisonRowSchema)
|
||||
.min(6)
|
||||
.min(1)
|
||||
.max(6)
|
||||
.default([
|
||||
{ feature: "Component-based", column1: "check", column2: "check", column3: "check" },
|
||||
|
|
@ -42,7 +42,7 @@ export const Schema = z.object({
|
|||
.meta({
|
||||
description: "Six comparison rows shown in the table.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("5 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("5 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@ const WorkflowStepSchema = z.object({
|
|||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-workflow-slide";
|
||||
export const slideLayoutName = "Code Workflow Slide";
|
||||
export const slideLayoutId = "workflow-slide";
|
||||
export const slideLayoutName = "Workflow Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A four-step workflow slide with cards and directional arrows between steps.";
|
||||
"A workflow slide with cards and directional arrows between steps.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(16).default("Workflow").meta({
|
||||
|
|
@ -32,7 +32,7 @@ export const Schema = z.object({
|
|||
}),
|
||||
steps: z
|
||||
.array(WorkflowStepSchema)
|
||||
.min(4)
|
||||
.min(1)
|
||||
.max(4)
|
||||
.default([
|
||||
{
|
||||
|
|
@ -69,9 +69,9 @@ export const Schema = z.object({
|
|||
},
|
||||
])
|
||||
.meta({
|
||||
description: "Four workflow steps shown in sequence.",
|
||||
description: "Workflow steps shown in sequence.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("6 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("6 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-use-case-list-slide";
|
||||
export const slideLayoutName = "Code Use Case List Slide";
|
||||
export const slideLayoutId = "bullet-list-slide";
|
||||
export const slideLayoutName = "Two Column Bullet List Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A two-column numbered use-case list with eight compact items.";
|
||||
"A two-column numbered string list with items.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(30).default("Usecase").meta({
|
||||
description: "Slide title shown above the numbered list.",
|
||||
}),
|
||||
items: z
|
||||
.array(z.string().min(4).max(8))
|
||||
.min(4)
|
||||
.array(z.string().min(1).max(200))
|
||||
.min(1)
|
||||
.max(8)
|
||||
.default([
|
||||
"Use pre-built component library for UI consistency",
|
||||
|
|
@ -26,7 +26,7 @@ export const Schema = z.object({
|
|||
.meta({
|
||||
description: "Eight use-case items shown in two columns.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("7 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("7 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-explanation-text-slide";
|
||||
export const slideLayoutName = "Code Explanation Text Slide";
|
||||
export const slideLayoutId = "description-text-slide";
|
||||
export const slideLayoutName = "Description Text Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A text-only explanation slide with generous whitespace for narrative documentation.";
|
||||
"A text-only description slide tihe title/heading.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(30).default("Code + Explanation").meta({
|
||||
description: "Main slide title shown at the top-left.",
|
||||
}),
|
||||
explanationTitle: z.string().min(4).max(20).default("Explanation").meta({
|
||||
descriptionTitle: z.string().min(4).max(20).default("Explanation").meta({
|
||||
description: "Subheading above the paragraph body.",
|
||||
}),
|
||||
explanation: z
|
||||
description: z
|
||||
.string()
|
||||
|
||||
.max(360)
|
||||
|
|
@ -22,7 +22,7 @@ export const Schema = z.object({
|
|||
.meta({
|
||||
description: "Long-form explanation body.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("8 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("8 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -45,8 +45,8 @@ const CodeSlide08CodeExplanationText = ({ data }: { data: Partial<SchemaType> })
|
|||
|
||||
<h2 className="text-[64px] font-medium" style={{ color: "var(--background-text,#f2f4ff)" }}>{data.title}</h2>
|
||||
<div className="relative z-10 h-full max-w-[560px]">
|
||||
<h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.explanation}</p>
|
||||
<h3 className="mt-[34px] text-[24px] font-medium" style={{ color: "var(--background-text,#f1f4ff)" }}>{data.descriptionTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%]" style={{ color: "var(--background-text,#d2d9ff)" }}>{data.description}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-table-of-content-slide";
|
||||
export const slideLayoutName = "Code Table Of Content Slide";
|
||||
export const slideLayoutId = "table-of-content-slide";
|
||||
export const slideLayoutName = "Table Of Content Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A two-column table of contents with numbered entries and folder-style bullets.";
|
||||
"A two-column table of contents with numbered entries, labels and description.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(24).default("Table of Content").meta({
|
||||
|
|
@ -11,18 +11,18 @@ export const Schema = z.object({
|
|||
}),
|
||||
items: z
|
||||
.array(z.object({
|
||||
number: z.string().min(2).max(2),
|
||||
label: z.string().min(3).max(16),
|
||||
description: z.string().min(3).max(18),
|
||||
number: z.string().min(2).max(2).meta({"description": "Bullet Serial Number"}),
|
||||
label: z.string().min(3).max(30).meta({"description": "Page/Content Name"}),
|
||||
description: z.string().min(3).max(100).optional().meta({"description": "Short description for the content section."}),
|
||||
}))
|
||||
.min(12)
|
||||
.max(12)
|
||||
.default([
|
||||
{ number: "01", label: "Content 1", description: "Section summary" },
|
||||
{ number: "02", label: "Content 2", description: "Section summary" },
|
||||
{ number: "03", label: "Content 3", description: "Section summary" },
|
||||
{ number: "04", label: "Content 4", description: "Section summary" },
|
||||
{ number: "05", label: "Content 5", description: "Section summary" },
|
||||
{ number: "01", label: "Content Section summary", description: "A quick brown fox jumps over a lazy dog." },
|
||||
{ number: "01", label: "Content Section summary", description: "A quick brown fox jumps over a lazy dog." },
|
||||
{ number: "01", label: "Content Section summary", description: "A quick brown fox jumps over a lazy dog." },
|
||||
{ number: "01", label: "Content Section summary", description: "A quick brown fox jumps over a lazy dog." },
|
||||
{ number: "01", label: "Content Section summary", description: "A quick brown fox jumps over a lazy dog." },
|
||||
{ number: "06", label: "Content 6", description: "Section summary" },
|
||||
{ number: "07", label: "Content 7", description: "Section summary" },
|
||||
{ number: "08", label: "Content 8", description: "Section summary" },
|
||||
|
|
@ -32,10 +32,10 @@ export const Schema = z.object({
|
|||
{ number: "12", label: "Content 12", description: "Section summary" },
|
||||
])
|
||||
.meta({
|
||||
description: "Left-column table of contents entries.",
|
||||
description: "Table of contents entries.",
|
||||
}),
|
||||
|
||||
pageLabel: z.string().min(3).max(8).default("9 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("9 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@ const MetricSchema = z.object({
|
|||
value: z.string().min(2).max(6).meta({
|
||||
description: "Primary metric value.",
|
||||
}),
|
||||
label: z.string().min(3).max(14).meta({
|
||||
label: z.string().min(3).max(15).meta({
|
||||
description: "Metric label text.",
|
||||
}),
|
||||
period: z.string().min(3).max(16).meta({
|
||||
description: "Metric period text.",
|
||||
subtext: z.string().min(3).max(30).meta({
|
||||
description: "Metric subtext/description.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-metrics-split-slide";
|
||||
export const slideLayoutName = "Code Metrics Split Slide";
|
||||
export const slideLayoutId = "description-and-metrics-slide";
|
||||
export const slideLayoutName = "Description and Metrics Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A metrics slide with narrative text on the left and two stat cards on the right.";
|
||||
"A metrics slide with description text on the left and metric cards on the right.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(18).default("Metrics").meta({
|
||||
|
|
@ -35,16 +35,18 @@ export const Schema = z.object({
|
|||
}),
|
||||
metrics: z
|
||||
.array(MetricSchema)
|
||||
.min(2)
|
||||
.max(2)
|
||||
.min(0)
|
||||
.max(4)
|
||||
.default([
|
||||
{ value: "50k+", label: "Active Users", period: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", period: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", subtext: "Last 12 months" }
|
||||
])
|
||||
.meta({
|
||||
description: "Two metric cards shown in the right column.",
|
||||
description: "Metric cards shown in the right column.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("10 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("10 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -86,7 +88,7 @@ const CodeSlide10MetricsSplit = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
>
|
||||
<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.period}</p>
|
||||
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.subtext}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@ const MetricSchema = z.object({
|
|||
value: z.string().min(2).max(6).meta({
|
||||
description: "Primary metric value.",
|
||||
}),
|
||||
label: z.string().min(3).max(14).meta({
|
||||
label: z.string().min(3).max(15).meta({
|
||||
description: "Metric label text.",
|
||||
}),
|
||||
period: z.string().min(3).max(16).meta({
|
||||
description: "Metric period text.",
|
||||
subtext: z.string().min(3).max(30).meta({
|
||||
description: "Metric subtext/description.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-metrics-grid-slide";
|
||||
export const slideLayoutName = "Code Metrics Grid Slide";
|
||||
export const slideLayoutId = "metrics-grid-slide";
|
||||
export const slideLayoutName = "Metrics Grid Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A six-card metrics grid for KPI overviews in code-focused decks.";
|
||||
"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({
|
||||
|
|
@ -23,20 +23,20 @@ export const Schema = z.object({
|
|||
}),
|
||||
metrics: z
|
||||
.array(MetricSchema)
|
||||
.min(3)
|
||||
.min(1)
|
||||
.max(6)
|
||||
.default([
|
||||
{ value: "99.9%", label: "Uptime", period: "Last 12 months" },
|
||||
{ value: "<100ms", label: "Response Time", period: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", period: "Last 12 months" },
|
||||
{ value: "99.9%", label: "Uptime", period: "Last 12 months" },
|
||||
{ value: "<100ms", label: "Response Time", period: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", period: "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" },
|
||||
{ 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: "Six KPI cards in a 3x2 grid.",
|
||||
description: "Metrics cards in a grid.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("11 / 11").meta({
|
||||
pageLabel: z.string().min(3).max(8).optional().default("11 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
|
@ -74,7 +74,7 @@ const CodeSlide11MetricsGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
>
|
||||
<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.period}</p>
|
||||
<p className="mt-[13px] text-[18px]" style={{ color: "var(--background-text,#8fa2d8)" }}>{metric.subtext}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue