feat: Code template added
This commit is contained in:
shiva raj badu
parent
787fe55937
commit
974abecbc3
13 changed files with 1056 additions and 3 deletions
|
|
@ -0,0 +1,51 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-roadmap-cover-slide";
|
||||
export const slideLayoutName = "Code Roadmap Cover Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A centered opening slide with company name, roadmap title, and supporting subtitle.";
|
||||
|
||||
export const Schema = z.object({
|
||||
companyName: z.string().min(2).max(28).default("COMPANY NAME").meta({
|
||||
description: "Organization name shown above the slide title.",
|
||||
}),
|
||||
title: z.string().min(8).max(28).default("Development Roadmap").meta({
|
||||
description: "Primary slide heading.",
|
||||
}),
|
||||
subtitle: z
|
||||
.string()
|
||||
.min(24)
|
||||
.max(92)
|
||||
.default(
|
||||
"We transform ideas into market-ready solutions through systematic development processes."
|
||||
)
|
||||
.meta({
|
||||
description: "Supporting subtitle shown under the heading.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("1 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide01RoadmapCover = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
<div className="relative z-10 flex h-full flex-col items-center justify-center px-[200px] text-center">
|
||||
<p className="text-[22px] text-[#d7dcff]">{data.companyName}</p>
|
||||
<h2 className="mt-[10px] text-[64px] font-medium text-white">
|
||||
{data.title}
|
||||
</h2>
|
||||
<p className="mt-[35px] text-[26px] leading-[132%] text-[#d8ddff]">{data.subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide01RoadmapCover;
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
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.";
|
||||
|
||||
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),
|
||||
}).default({
|
||||
language: "tsx",
|
||||
fileName: "components/UserAuth.tsx",
|
||||
content: `import { useState } from "react";
|
||||
import { login } from "@/lib/auth";
|
||||
|
||||
export function UserAuth() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
const user = await login(email, password);
|
||||
console.log("Logged in:", user);
|
||||
};
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
`,
|
||||
}).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.",
|
||||
}),
|
||||
explanation: z
|
||||
.string()
|
||||
.min(40)
|
||||
.max(360)
|
||||
.default(
|
||||
"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.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("2 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide02CodeExplanationSplit = ({
|
||||
data,
|
||||
}: {
|
||||
data: Partial<SchemaType>;
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] grid min-h-0 flex-1 grid-cols-2 gap-[34px]">
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#0F172BCC] rounded-t-[18px] border border-[#1D293D80] px-[26px] py-3">{data.codeSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[32px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
|
||||
<code className="w-full ">
|
||||
{data.codeSnippet?.content}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className=" ">
|
||||
<h3 className="text-[24px] font-medium text-[#f1f4ff]">{data.explanationTitle}</h3>
|
||||
<p className="mt-[18px] text-[22px] leading-[145%] text-[#d2d9ff]">
|
||||
{data.explanation}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide02CodeExplanationSplit;
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
import * as z from "zod";
|
||||
|
||||
|
||||
export const slideLayoutId = "code-api-request-response-slide";
|
||||
export const slideLayoutName = "Code API Request Response Slide";
|
||||
export const slideLayoutDescription =
|
||||
"An API-focused slide with endpoint metadata, request payload, and response payload.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(26).default("API Request / Response").meta({
|
||||
description: "Main heading shown at the top-left.",
|
||||
}),
|
||||
method: z.enum(["GET", "POST", "PATCH", "DELETE"]).default("POST").meta({
|
||||
description: "HTTP method badge text.",
|
||||
}),
|
||||
endpoint: z.string().min(8).max(48).default("/api/v1/users/authenticate").meta({
|
||||
description: "Endpoint path text.",
|
||||
}),
|
||||
headers: z
|
||||
.array(z.string().min(12).max(44))
|
||||
.min(2)
|
||||
.max(2)
|
||||
.default(["Content-Type: application/json", "Authorization: Bearer <token>"])
|
||||
.meta({
|
||||
description: "Two header lines shown in the endpoint card.",
|
||||
}),
|
||||
requestSnippet: z.object({
|
||||
language: z.string().min(2).max(10),
|
||||
fileName: z.string().min(3).max(24),
|
||||
content: z.string().min(20).max(220),
|
||||
}).default({
|
||||
language: "json",
|
||||
fileName: "request.json",
|
||||
content: `{
|
||||
"email": "user@example.com user@example.com user@example.com user@example.com user@example.com" ,
|
||||
"password": "securepassword123"
|
||||
}`,
|
||||
}).meta({
|
||||
description: "Request payload example.",
|
||||
}),
|
||||
responseSnippet: z.object({
|
||||
language: z.string().min(2).max(10),
|
||||
fileName: z.string().min(3).max(24),
|
||||
content: z.string().min(20).max(620),
|
||||
}).default({
|
||||
language: "json",
|
||||
fileName: "response.json",
|
||||
content: `{
|
||||
"success": true,
|
||||
"user": {
|
||||
"id": "usr_1234567890",
|
||||
"email": "user@example.com",
|
||||
"name": "John Doe",
|
||||
"role": "admin"
|
||||
},
|
||||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||||
"expiresIn": 3600
|
||||
}`,
|
||||
}).meta({
|
||||
description: "Response payload example.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("3 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide03ApiRequestResponse = ({
|
||||
data,
|
||||
}: {
|
||||
data: Partial<SchemaType>;
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] grid flex-1 grid-cols-2 gap-[22px]">
|
||||
<div className="flex flex-col gap-[12px] ">
|
||||
<div className="rounded-[14px] border border-[#1D293D80] bg-[#0F172B80] p-[14px]">
|
||||
<div className="flex items-center gap-5 pb-[14px] border-b border-[#1D293D80]">
|
||||
<p className="rounded-[12px] bg-[#2B7FFF33] px-[23px] py-[10px] text-[14px] uppercase tracking-[0.06em] text-[#51A2FF]">
|
||||
{data.method}
|
||||
</p>
|
||||
<p className="text-[23px] text-[#dde5ff]">{data.endpoint}</p>
|
||||
</div>
|
||||
<p className="mt-[21px] text-[18px] uppercase tracking-[0.08em] text-[#90a1d8]">Headers</p>
|
||||
<div className="mt-[15px] space-y-[4px] text-[24px] text-[#cbd4f8]">
|
||||
{data.headers?.map((item) => (
|
||||
<p key={item} className="text-[18px] text-[#CAD5E2]">{item}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#1D293D80] rounded-t-[18px] border border-[#1D293D80] p-[14px]">{data.requestSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
|
||||
<code className="w-full ">
|
||||
{data.requestSnippet?.content}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" flex-1 bg-[#0F172B80] border border-[#1D293D80] rounded-[18px] ">
|
||||
<p className="text-[18px] text-[#CAD5E2] capitalize bg-[#1D293D80] rounded-t-[18px] border border-[#1D293D80] p-[14px]">{data.responseSnippet?.fileName}</p>
|
||||
<pre className=" w-full px-[14px] py-[20px] text-[#ffffff] whitespace-pre-wrap break-words overflow-hidden">
|
||||
|
||||
<code className="w-full ">
|
||||
{data.responseSnippet?.content}
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide03ApiRequestResponse;
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
import * as z from "zod";
|
||||
|
||||
const FeatureCardSchema = z.object({
|
||||
title: z.string().min(3).max(20).meta({
|
||||
description: "Feature title shown on each card.",
|
||||
}),
|
||||
description: z.string().min(18).max(82).meta({
|
||||
description: "Supporting feature description.",
|
||||
}),
|
||||
icon: z.object({
|
||||
__icon_url__: z.string().min(10).max(180).meta({
|
||||
description: "URL to icon",
|
||||
}),
|
||||
__icon_query__: z.string().min(3).max(28).meta({
|
||||
description: "Query used to search the icon",
|
||||
}),
|
||||
}).default({
|
||||
__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.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-feature-grid-slide";
|
||||
export const slideLayoutName = "Code Feature Grid Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A six-card feature summary grid with icon badges and compact descriptions.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(20).default("Feature Grid").meta({
|
||||
description: "Slide title shown above the grid.",
|
||||
}),
|
||||
features: z
|
||||
.array(FeatureCardSchema)
|
||||
.min(3)
|
||||
.max(6)
|
||||
.default([
|
||||
{
|
||||
title: "Modern Stack",
|
||||
description: "Built with React, TypeScript, and Tailwind CSS for maximum developer experience.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Component Library",
|
||||
description: "Reusable UI components with consistent design patterns.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "CLI Tools",
|
||||
description: "Command-line utilities for scaffolding and automation.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Analytics",
|
||||
description: "Built-in tracking and performance monitoring.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Version Control",
|
||||
description: "Git-based workflow with automated deployments.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Best Practices",
|
||||
description: "Following industry standards and modern development patterns.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
])
|
||||
.meta({
|
||||
description: "Six feature cards displayed in a 3x2 grid.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("4 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide04FeatureGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em] text-[#f2f4ff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[26px] grid flex-1 grid-cols-3 items-center h-fit gap-[26px]">
|
||||
{data?.features?.map((feature) => (
|
||||
<div
|
||||
key={feature.title}
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
|
||||
}}
|
||||
className="rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[26px]"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-[8px]">
|
||||
<h3 className="text-[26px] font-medium text-[#ffffff]">{feature.title}</h3>
|
||||
<span className="flex h-[52px] w-[52px] items-center justify-center rounded-full border border-[#2B7FFF4D] bg-[#2B7FFF33] text-[18px] ">
|
||||
<img src={feature.icon.__icon_url__} alt={feature.icon.__icon_query__} className="h-[24px] w-[24px] object-contain"
|
||||
style={{
|
||||
filter: "invert(1)",
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-[12px] text-[18px] leading-[136%] text-[#90A1B9]">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide04FeatureGrid;
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import * as z from "zod";
|
||||
|
||||
const ComparisonRowSchema = z.object({
|
||||
feature: z.string().min(4).max(20).meta({
|
||||
description: "Feature label shown in the first column.",
|
||||
}),
|
||||
react: z.string().min(1).max(12).meta({
|
||||
description: "React cell value.",
|
||||
}),
|
||||
vue: z.string().min(1).max(12).meta({
|
||||
description: "Vue cell value.",
|
||||
}),
|
||||
angular: z.string().min(1).max(12).meta({
|
||||
description: "Angular cell value.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-comparison-table-slide";
|
||||
export const slideLayoutName = "Code Comparison Table Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A framework comparison table with feature rows and highlighted compatibility marks.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(18).default("Comparison").meta({
|
||||
description: "Slide title shown above the table.",
|
||||
}),
|
||||
rows: z
|
||||
.array(ComparisonRowSchema)
|
||||
.min(6)
|
||||
.max(6)
|
||||
.default([
|
||||
{ feature: "Component-based", react: "check", vue: "check", angular: "check" },
|
||||
{ feature: "TypeScript Support", react: "check", vue: "check", angular: "check" },
|
||||
{ feature: "Learning Curve", react: "Medium", vue: "Easy", angular: "Steep" },
|
||||
{ feature: "Bundle Size", react: "40KB", vue: "34KB", angular: "167KB" },
|
||||
{ feature: "Performance", react: "Excellent", vue: "Excellent", angular: "Good" },
|
||||
{ feature: "Community Size", react: "Huge", vue: "Large", angular: "Large" },
|
||||
])
|
||||
.meta({
|
||||
description: "Six comparison rows shown in the table.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("5 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
function renderCell(value: string) {
|
||||
if (value.toLowerCase() === "check") {
|
||||
return <span className="text-[26px] px-[32px] text-[#37f08e]">✓</span>;
|
||||
}
|
||||
|
||||
return <span className="text-[18px] px-[32px] text-[#CAD5E2]">{value}</span>;
|
||||
}
|
||||
|
||||
const CodeSlide05ComparisonTable = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[22px] min-h-0 flex-1 rounded-[16px] bg-[#0F172BCC] border border-[#1D293D80]">
|
||||
<div className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] items-center text-[#8ea1da]">
|
||||
<p className="px-[32px] py-[16px] text-[18px] text-center border-b border-r border-[#1D293D80]">Feature</p>
|
||||
<p className="px-[32px] py-[16px] text-[18px] text-center text-[#ffffff] border-b border-r border-[#1D293D80]">React</p>
|
||||
<p className="px-[32px] py-[16px] text-[18px] text-center text-[#ffffff] border-b border-r border-[#1D293D80]">Vue</p>
|
||||
<p className="px-[32px] py-[16px] text-[18px] text-center text-[#ffffff] border-b border-r border-[#1D293D80]">Angular</p>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
{data?.rows?.map((row) => (
|
||||
<div
|
||||
key={row.feature}
|
||||
className="grid grid-cols-[0.4fr_0.20fr_0.20fr_0.20fr] "
|
||||
>
|
||||
<p className="px-[32px] py-[20px] text-center text-[18px] text-[#d5dcff] border-b border-r border-[#1D293D80]">{row.feature}</p>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.react)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.vue)}</div>
|
||||
<div className="flex justify-center items-center text-[18px] border-b border-r border-[#1D293D80] ">{renderCell(row.angular)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide05ComparisonTable;
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import { Fragment } from "react";
|
||||
import * as z from "zod";
|
||||
|
||||
const WorkflowStepSchema = z.object({
|
||||
title: z.string().min(3).max(12).meta({
|
||||
description: "Step title shown in each workflow card.",
|
||||
}),
|
||||
description: z.string().min(18).max(58).meta({
|
||||
description: "Short step description text.",
|
||||
}),
|
||||
icon: z.object({
|
||||
__icon_url__: z.string().min(10).max(180),
|
||||
__icon_query__: z.string().min(3).max(28),
|
||||
}).default({
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-workflow-slide";
|
||||
export const slideLayoutName = "Code Workflow Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A four-step workflow slide with cards and directional arrows between steps.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(16).default("Workflow").meta({
|
||||
description: "Slide title shown above the workflow row.",
|
||||
}),
|
||||
steps: z
|
||||
.array(WorkflowStepSchema)
|
||||
.min(4)
|
||||
.max(4)
|
||||
.default([
|
||||
{
|
||||
title: "Design",
|
||||
description: "Create wireframes and design system components.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Develop",
|
||||
description: "Build features using modern frameworks and best practices.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Test & QA",
|
||||
description: "Run automated tests and quality assurance checks.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Deploy",
|
||||
description: "Ship to production with CI and CD pipeline automation.",
|
||||
icon: {
|
||||
__icon_url__: "https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/icons/placeholder.svg",
|
||||
__icon_query__: "check icon",
|
||||
},
|
||||
},
|
||||
])
|
||||
.meta({
|
||||
description: "Four workflow steps shown in sequence.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("6 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide06Workflow = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#ffffff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[52px] grid flex-1 grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-center gap-[12px]">
|
||||
{data?.steps?.map((step, index) => (
|
||||
<Fragment key={`${step.title}-${index}`}>
|
||||
<div
|
||||
className="rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[21px] text-center"
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto flex h-[75px] w-[75px] items-center justify-center rounded-full border border-[#2B7FFF80] bg-[#2B7FFF33]">
|
||||
<img src={step.icon.__icon_url__} alt={step.icon.__icon_query__} className="h-[37px] w-[37px] object-contain"
|
||||
style={{
|
||||
filter: "invert(1)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-[12px] text-[24px] font-medium text-[#ffffff]">{step.title}</h3>
|
||||
<p className="mt-[12px] text-[18px] text-[#90A1B9]">{step.description}</p>
|
||||
</div>
|
||||
{index < (data?.steps?.length || 0) - 1 && (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43" fill="none">
|
||||
<path d="M8.88892 21.3333H33.7778" stroke="#51A2FF" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21.3334 8.88892L33.7778 21.3334L21.3334 33.7778" stroke="#51A2FF" strokeWidth="3.55556" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide06Workflow;
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-use-case-list-slide";
|
||||
export const slideLayoutName = "Code Use Case List Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A two-column numbered use-case list with eight compact items.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(16).default("Usecase").meta({
|
||||
description: "Slide title shown above the numbered list.",
|
||||
}),
|
||||
items: z
|
||||
.array(z.string().min(16).max(58))
|
||||
.min(4)
|
||||
.max(8)
|
||||
.default([
|
||||
"Use pre-built component library for UI consistency",
|
||||
"Integrate REST API with TypeScript for type safety",
|
||||
"Implement real-time updates using WebSocket",
|
||||
"Deploy to production with automated CI/CD pipeline",
|
||||
"Enable role-based permissions for protected actions",
|
||||
"Generate docs automatically from route contracts",
|
||||
"Track release health with telemetry dashboards",
|
||||
"Add rollback strategy for high-risk deployments",
|
||||
])
|
||||
.meta({
|
||||
description: "Eight use-case items shown in two columns.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("7 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide07UseCaseList = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[21px]">
|
||||
{data?.items?.map((item, index) => (
|
||||
<div
|
||||
key={`use-case-${index}`}
|
||||
className="flex items-center gap-[21px] rounded-[18px] border border-[#1D293D80] bg-[#0F172B80] p-[28px] "
|
||||
style={{
|
||||
boxShadow: "0 33.333px 66.667px -16px rgba(0, 0, 0, 0.25)",
|
||||
|
||||
}}
|
||||
>
|
||||
<span className="flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full border border-[#2B7FFF4D] bg-[#2B7FFF33] text-[18px] text-[#51A2FF]">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-[18px] text-[#d5dcff]">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide07UseCaseList;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-explanation-text-slide";
|
||||
export const slideLayoutName = "Code Explanation Text Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A text-only explanation slide with generous whitespace for narrative documentation.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(24).default("Code + Explanation").meta({
|
||||
description: "Main slide title shown at the top-left.",
|
||||
}),
|
||||
explanationTitle: z.string().min(4).max(20).default("Explanation").meta({
|
||||
description: "Subheading above the paragraph body.",
|
||||
}),
|
||||
explanation: z
|
||||
.string()
|
||||
.min(60)
|
||||
.max(360)
|
||||
.default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||
)
|
||||
.meta({
|
||||
description: "Long-form explanation body.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("8 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide08CodeExplanationText = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
<div className="relative z-10 h-full max-w-[560px]">
|
||||
<h3 className="mt-[34px] text-[24px] font-medium text-[#f1f4ff]">{data.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%] text-[#d2d9ff]">{data.explanation}</p>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide08CodeExplanationText;
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import * as z from "zod";
|
||||
|
||||
export const slideLayoutId = "code-table-of-content-slide";
|
||||
export const slideLayoutName = "Code Table Of Content Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A two-column table of contents with numbered entries and folder-style bullets.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(8).max(24).default("Table of Content").meta({
|
||||
description: "Slide heading shown above the index list.",
|
||||
}),
|
||||
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),
|
||||
}))
|
||||
.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: "06", label: "Content 6", description: "Section summary" },
|
||||
{ number: "07", label: "Content 7", description: "Section summary" },
|
||||
{ number: "08", label: "Content 8", description: "Section summary" },
|
||||
{ number: "09", label: "Content 9", description: "Section summary" },
|
||||
{ number: "10", label: "Content 10", description: "Section summary" },
|
||||
{ number: "11", label: "Content 11", description: "Section summary" },
|
||||
{ number: "12", label: "Content 12", description: "Section summary" },
|
||||
])
|
||||
.meta({
|
||||
description: "Left-column table of contents entries.",
|
||||
}),
|
||||
|
||||
pageLabel: z.string().min(3).max(8).default("9 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
function TocColumn({ items }: { items: { number: string; label: string, description?: string }[] }) {
|
||||
return (
|
||||
<div className="space-y-[26px]">
|
||||
{items.map((item, index) => {
|
||||
|
||||
|
||||
return (
|
||||
<div key={`${item.number}-${item.label}`} className="flex items-center gap-[10px] text-[#d5dcff]">
|
||||
<div className=""><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
|
||||
<path d="M17.7778 17.7776C18.2493 17.7776 18.7015 17.5903 19.0349 17.2569C19.3683 16.9235 19.5556 16.4713 19.5556 15.9998V7.11095C19.5556 6.63945 19.3683 6.18727 19.0349 5.85387C18.7015 5.52047 18.2493 5.33317 17.7778 5.33317H10.7556C10.4583 5.33609 10.165 5.26438 9.90254 5.12462C9.6401 4.98486 9.41691 4.7815 9.25339 4.53317L8.53339 3.4665C8.37151 3.2207 8.15114 3.01893 7.89205 2.8793C7.63296 2.73967 7.34326 2.66655 7.04894 2.6665H3.55561C3.08411 2.6665 2.63193 2.8538 2.29853 3.1872C1.96513 3.5206 1.77783 3.97279 1.77783 4.44428V15.9998C1.77783 16.4713 1.96513 16.9235 2.29853 17.2569C2.63193 17.5903 3.08411 17.7776 3.55561 17.7776H17.7778Z" stroke="#51A2FF" strokeWidth="1.77778" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg></div>
|
||||
<div className="flex gap-[26px]">
|
||||
|
||||
<p className="w-[36px] text-[18px] text-[#8EC5FF]">{item.number}</p>
|
||||
<p className="text-[18px] text-[#ffffff]">{item.label}</p>
|
||||
{item.description && <p className="text-[18px] text-[#ffffff]">{item.description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const CodeSlide09TableOfContent = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
const leftItems = data?.items?.slice(0, data?.items?.length / 2);
|
||||
const rightItems = data?.items?.slice(data?.items?.length / 2);
|
||||
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] ">
|
||||
|
||||
|
||||
<div className="relative z-10 flex h-full flex-col">
|
||||
<h2 className="text-[64px] font-medium text-[#f2f4ff]">{data.title}</h2>
|
||||
|
||||
<div className="mt-[53px] grid flex-1 grid-cols-2 gap-[24px]">
|
||||
<TocColumn items={leftItems || []} />
|
||||
<TocColumn items={rightItems || []} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] z-50 left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide09TableOfContent;
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import * as z from "zod";
|
||||
|
||||
const MetricSchema = z.object({
|
||||
value: z.string().min(2).max(8).meta({
|
||||
description: "Primary metric value.",
|
||||
}),
|
||||
label: z.string().min(3).max(14).meta({
|
||||
description: "Metric label text.",
|
||||
}),
|
||||
period: z.string().min(3).max(16).meta({
|
||||
description: "Metric period text.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-metrics-split-slide";
|
||||
export const slideLayoutName = "Code Metrics Split Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A metrics slide with narrative text on the left and two stat cards on the right.";
|
||||
|
||||
export const Schema = z.object({
|
||||
title: z.string().min(6).max(18).default("Metrics").meta({
|
||||
description: "Slide title shown at the top-left.",
|
||||
}),
|
||||
explanationTitle: z.string().min(4).max(16).default("Explanation").meta({
|
||||
description: "Heading above the explanatory paragraph.",
|
||||
}),
|
||||
explanation: z
|
||||
.string()
|
||||
.min(60)
|
||||
.max(320)
|
||||
.default(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
|
||||
)
|
||||
.meta({
|
||||
description: "Body text for the narrative section.",
|
||||
}),
|
||||
metrics: z
|
||||
.array(MetricSchema)
|
||||
.min(2)
|
||||
.max(2)
|
||||
.default([
|
||||
{ value: "50k+", label: "Active Users", period: "Last 12 months" },
|
||||
{ value: "50k+", label: "Active Users", period: "Last 12 months" },
|
||||
])
|
||||
.meta({
|
||||
description: "Two metric cards shown in the right column.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("10 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide10MetricsSplit = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
const slideData = Schema.parse(data);
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden bg-[#101B37] p-[53px] text-[#ffffff]">
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium tracking-[-0.03em] text-[#f2f4ff]">{slideData.title}</h2>
|
||||
<div className="relative z-10 flex gap-10 ">
|
||||
<div className="w-1/2">
|
||||
<h3 className="mt-[28px] text-[24px] font-medium text-[#f1f4ff]">{slideData.explanationTitle}</h3>
|
||||
<p className="mt-[16px] text-[22px] leading-[145%] text-[#d2d9ff]">{slideData.explanation}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center items-end gap-[25px] w-1/2">
|
||||
{slideData.metrics.map((metric, index) => (
|
||||
<div
|
||||
key={`metric-grid-${index}`}
|
||||
className="rounded-[16px] w-[310px] border border-[#1D293D80] bg-[#0F172B80] pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
>
|
||||
<p className="text-[64px] font-semibold leading-none text-[#8bb4ff]">{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px] text-[#edf1ff]">{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px] text-[#8fa2d8]">{metric.period}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{slideData.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide10MetricsSplit;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import * as z from "zod";
|
||||
|
||||
const MetricSchema = z.object({
|
||||
value: z.string().min(2).max(8).meta({
|
||||
description: "Primary metric value.",
|
||||
}),
|
||||
label: z.string().min(3).max(14).meta({
|
||||
description: "Metric label text.",
|
||||
}),
|
||||
period: z.string().min(3).max(16).meta({
|
||||
description: "Metric period text.",
|
||||
}),
|
||||
});
|
||||
|
||||
export const slideLayoutId = "code-metrics-grid-slide";
|
||||
export const slideLayoutName = "Code Metrics Grid Slide";
|
||||
export const slideLayoutDescription =
|
||||
"A six-card metrics grid for KPI overviews in code-focused decks.";
|
||||
|
||||
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(3)
|
||||
.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" },
|
||||
])
|
||||
.meta({
|
||||
description: "Six KPI cards in a 3x2 grid.",
|
||||
}),
|
||||
pageLabel: z.string().min(3).max(8).default("11 / 11").meta({
|
||||
description: "Bottom pagination label.",
|
||||
}),
|
||||
});
|
||||
|
||||
export type SchemaType = z.infer<typeof Schema>;
|
||||
|
||||
const CodeSlide11MetricsGrid = ({ data }: { data: Partial<SchemaType> }) => {
|
||||
|
||||
return (
|
||||
<div className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] border border-[#243272] bg-[#101B37] p-[40px] text-[#edf1ff]">
|
||||
|
||||
|
||||
|
||||
<h2 className="text-[64px] font-medium 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 border-[#1D293D80] bg-[#0F172B80] pt-[26px] px-[26px] pb-[16px] text-center"
|
||||
>
|
||||
<p className="text-[64px] font-semibold leading-none text-[#8bb4ff]">{metric.value}</p>
|
||||
<p className="mt-[13px] text-[26px] text-[#edf1ff]">{metric.label}</p>
|
||||
<p className="mt-[13px] text-[18px] text-[#8fa2d8]">{metric.period}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="absolute bottom-[26px] left-1/2 -translate-x-1/2 rounded-full border border-[#31415880] bg-[#1D293DCC] px-[22px] py-[8px] text-[14px] text-[#CAD5E2]">
|
||||
{data.pageLabel}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeSlide11MetricsGrid;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"description": "Developer-focused layouts for roadmaps, APIs, code explanations, and technical metrics",
|
||||
"ordered": false,
|
||||
"default": false
|
||||
}
|
||||
|
|
@ -3,6 +3,19 @@ import { TemplateWithData, TemplateGroupSettings, createTemplateEntry, TemplateL
|
|||
|
||||
// TODO: Step 1: Import All templates Layouts Here (like the ones below)
|
||||
|
||||
// Code templates
|
||||
import CodeSlide01RoadmapCover, { Schema as CodeRoadmapCoverSchema, slideLayoutId as CodeRoadmapCoverId, slideLayoutName as CodeRoadmapCoverName, slideLayoutDescription as CodeRoadmapCoverDesc } from "./Code/CodeSlide01RoadmapCover";
|
||||
import CodeSlide02CodeExplanationSplit, { Schema as CodeExplanationSplitSchema, slideLayoutId as CodeExplanationSplitId, slideLayoutName as CodeExplanationSplitName, slideLayoutDescription as CodeExplanationSplitDesc } from "./Code/CodeSlide02CodeExplanationSplit";
|
||||
import CodeSlide03ApiRequestResponse, { Schema as CodeApiRequestResponseSchema, slideLayoutId as CodeApiRequestResponseId, slideLayoutName as CodeApiRequestResponseName, slideLayoutDescription as CodeApiRequestResponseDesc } from "./Code/CodeSlide03ApiRequestResponse";
|
||||
import CodeSlide04FeatureGrid, { Schema as CodeFeatureGridSchema, slideLayoutId as CodeFeatureGridId, slideLayoutName as CodeFeatureGridName, slideLayoutDescription as CodeFeatureGridDesc } from "./Code/CodeSlide04FeatureGrid";
|
||||
import CodeSlide05ComparisonTable, { Schema as CodeComparisonTableSchema, slideLayoutId as CodeComparisonTableId, slideLayoutName as CodeComparisonTableName, slideLayoutDescription as CodeComparisonTableDesc } from "./Code/CodeSlide05ComparisonTable";
|
||||
import CodeSlide06Workflow, { Schema as CodeWorkflowSchema, slideLayoutId as CodeWorkflowId, slideLayoutName as CodeWorkflowName, slideLayoutDescription as CodeWorkflowDesc } from "./Code/CodeSlide06Workflow";
|
||||
import CodeSlide07UseCaseList, { Schema as CodeUseCaseListSchema, slideLayoutId as CodeUseCaseListId, slideLayoutName as CodeUseCaseListName, slideLayoutDescription as CodeUseCaseListDesc } from "./Code/CodeSlide07UseCaseList";
|
||||
import CodeSlide08CodeExplanationText, { Schema as CodeExplanationTextSchema, slideLayoutId as CodeExplanationTextId, slideLayoutName as CodeExplanationTextName, slideLayoutDescription as CodeExplanationTextDesc } from "./Code/CodeSlide08CodeExplanationText";
|
||||
import CodeSlide09TableOfContent, { Schema as CodeTableOfContentSchema, slideLayoutId as CodeTableOfContentId, slideLayoutName as CodeTableOfContentName, slideLayoutDescription as CodeTableOfContentDesc } from "./Code/CodeSlide09TableOfContent";
|
||||
import CodeSlide10MetricsSplit, { Schema as CodeMetricsSplitSchema, slideLayoutId as CodeMetricsSplitId, slideLayoutName as CodeMetricsSplitName, slideLayoutDescription as CodeMetricsSplitDesc } from "./Code/CodeSlide10MetricsSplit";
|
||||
import CodeSlide11MetricsGrid, { Schema as CodeMetricsGridSchema, slideLayoutId as CodeMetricsGridId, slideLayoutName as CodeMetricsGridName, slideLayoutDescription as CodeMetricsGridDesc } from "./Code/CodeSlide11MetricsGrid";
|
||||
|
||||
// General templates
|
||||
import GeneralIntroSlideLayout, { Schema as GeneralIntroSchema, layoutId as GeneralIntroId, layoutName as GeneralIntroName, layoutDescription as GeneralIntroDesc } from "./general/IntroSlideLayout";
|
||||
import BasicInfoSlideLayout, { Schema as BasicInfoSchema, layoutId as BasicInfoId, layoutName as BasicInfoName, layoutDescription as BasicInfoDesc } from "./general/BasicInfoSlideLayout";
|
||||
|
|
@ -175,6 +188,7 @@ import neoGeneralSettings from "./neo-general/settings.json";
|
|||
import neoStandardSettings from "./neo-standard/settings.json";
|
||||
import neoModernSettings from "./neo-modern/settings.json";
|
||||
import neoSwiftSettings from "./neo-swift/settings.json";
|
||||
import codeSettings from "./Code/settings.json";
|
||||
|
||||
|
||||
// Helper to create template entry
|
||||
|
|
@ -182,6 +196,20 @@ import neoSwiftSettings from "./neo-swift/settings.json";
|
|||
|
||||
// TODO: Step 3: Create template entries for each template (like the ones below)
|
||||
|
||||
export const codeTemplates: TemplateWithData[] = [
|
||||
createTemplateEntry(CodeSlide01RoadmapCover, CodeRoadmapCoverSchema, CodeRoadmapCoverId, CodeRoadmapCoverName, CodeRoadmapCoverDesc, "code", "CodeSlide01RoadmapCover"),
|
||||
createTemplateEntry(CodeSlide02CodeExplanationSplit, CodeExplanationSplitSchema, CodeExplanationSplitId, CodeExplanationSplitName, CodeExplanationSplitDesc, "code", "CodeSlide02CodeExplanationSplit"),
|
||||
createTemplateEntry(CodeSlide03ApiRequestResponse, CodeApiRequestResponseSchema, CodeApiRequestResponseId, CodeApiRequestResponseName, CodeApiRequestResponseDesc, "code", "CodeSlide03ApiRequestResponse"),
|
||||
createTemplateEntry(CodeSlide04FeatureGrid, CodeFeatureGridSchema, CodeFeatureGridId, CodeFeatureGridName, CodeFeatureGridDesc, "code", "CodeSlide04FeatureGrid"),
|
||||
createTemplateEntry(CodeSlide05ComparisonTable, CodeComparisonTableSchema, CodeComparisonTableId, CodeComparisonTableName, CodeComparisonTableDesc, "code", "CodeSlide05ComparisonTable"),
|
||||
createTemplateEntry(CodeSlide06Workflow, CodeWorkflowSchema, CodeWorkflowId, CodeWorkflowName, CodeWorkflowDesc, "code", "CodeSlide06Workflow"),
|
||||
createTemplateEntry(CodeSlide07UseCaseList, CodeUseCaseListSchema, CodeUseCaseListId, CodeUseCaseListName, CodeUseCaseListDesc, "code", "CodeSlide07UseCaseList"),
|
||||
createTemplateEntry(CodeSlide08CodeExplanationText, CodeExplanationTextSchema, CodeExplanationTextId, CodeExplanationTextName, CodeExplanationTextDesc, "code", "CodeSlide08CodeExplanationText"),
|
||||
createTemplateEntry(CodeSlide09TableOfContent, CodeTableOfContentSchema, CodeTableOfContentId, CodeTableOfContentName, CodeTableOfContentDesc, "code", "CodeSlide09TableOfContent"),
|
||||
createTemplateEntry(CodeSlide10MetricsSplit, CodeMetricsSplitSchema, CodeMetricsSplitId, CodeMetricsSplitName, CodeMetricsSplitDesc, "code", "CodeSlide10MetricsSplit"),
|
||||
createTemplateEntry(CodeSlide11MetricsGrid, CodeMetricsGridSchema, CodeMetricsGridId, CodeMetricsGridName, CodeMetricsGridDesc, "code", "CodeSlide11MetricsGrid"),
|
||||
];
|
||||
|
||||
export const neoGeneralTemplates: TemplateWithData[] = [
|
||||
|
||||
createTemplateEntry(TextSplitWithEmphasisBlockLayout, TextSplitWithEmphasisBlockSchema, TextSplitWithEmphasisBlockId, TextSplitWithEmphasisBlockName, TextSplitWithEmphasisBlockDesc, 'neo-general', 'TextSplitWithEmphasisBlock'),
|
||||
|
|
@ -352,8 +380,7 @@ export const allLayouts: TemplateWithData[] = [
|
|||
...modernTemplates,
|
||||
...standardTemplates,
|
||||
...swiftTemplates,
|
||||
|
||||
|
||||
...codeTemplates,
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -416,7 +443,13 @@ export const templates: TemplateLayoutsWithSettings[] = [
|
|||
settings: swiftSettings as TemplateGroupSettings,
|
||||
layouts: swiftTemplates,
|
||||
},
|
||||
|
||||
{
|
||||
id: "code",
|
||||
name: "Code",
|
||||
description: codeSettings.description,
|
||||
settings: codeSettings as TemplateGroupSettings,
|
||||
layouts: codeTemplates,
|
||||
},
|
||||
];
|
||||
|
||||
// Helper to get templates by group ID
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue