diff --git a/servers/nextjs/presentation-layouts/ExampleComponent.tsx b/servers/nextjs/presentation-layouts/ExampleSlideLayout.tsx similarity index 97% rename from servers/nextjs/presentation-layouts/ExampleComponent.tsx rename to servers/nextjs/presentation-layouts/ExampleSlideLayout.tsx index dd1dc820..60ab9776 100644 --- a/servers/nextjs/presentation-layouts/ExampleComponent.tsx +++ b/servers/nextjs/presentation-layouts/ExampleSlideLayout.tsx @@ -47,7 +47,7 @@ export const Schema = z.object({ type SchemaType = z.infer; -export default function ExampleComponent({ data }: { data: SchemaType }) { +export default function ExampleSlideLayout({ data }: { data: SchemaType }) { const { title, subtitle, metrics, chartImage, trendIcon } = data; return (
diff --git a/servers/nextjs/presentation-layouts/ExampleSlideLayoutStructure.tsx b/servers/nextjs/presentation-layouts/ExampleSlideLayoutStructure.tsx new file mode 100644 index 00000000..ce92d946 --- /dev/null +++ b/servers/nextjs/presentation-layouts/ExampleSlideLayoutStructure.tsx @@ -0,0 +1,32 @@ +import * as z from "zod"; +// Note: +// If you want to use images and icons, you must use ImageSchema and IconSchema +// Images and icons are the only media types supported for PDF and PPTX exports +import { ImageSchema, IconSchema } from "./defaultSchemes"; + + +// Schema definition +export const Schema = z.object({ + // Notes: + // Schema fields + // Each field must have a default value (this is important for Layout Preview) + // Each field must have a meta description + // Each field must have a minimum and maximum length + // Each array field must have a minimum and maximum number of items +}) + +// Type inference +type SchemaType = z.infer; + + +// Component definition +const SlideComponent = ({ data }: { data: Partial }) => { + // Notes: + // Must have consistent aspect ratio (16:9) and max-width of 1280px. + // Validate each data field before rendering using && operator or optional chaining. + // These layouts are exported as PDF and PPTX so they must be optimized for both formats. + // Content must properly fit in the container, specify min and max constraints in the schema. + // You can check out ExampleComponent.tsx for more details. +}; + +export default SlideComponent; \ No newline at end of file diff --git a/servers/nextjs/presentation-layouts/SlideStructure.tsx b/servers/nextjs/presentation-layouts/SlideStructure.tsx deleted file mode 100644 index 907244f0..00000000 --- a/servers/nextjs/presentation-layouts/SlideStructure.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as z from "zod"; -// Note: -// If you want to use Image and Icon Must Use these Schemas. -// Image and icons are only media support for PDF and PPTX. -import { ImageSchema, IconSchema } from "./defaultSchemes"; - - -// Schema definition -export const Schema = z.object({ - // Note: - // Schema fields - // Each fields must have a default value (this is important for Layout-preview) - // Each fields must have a meta description - // Each fields must have a min and max length, length must support the layout design. - // Each Array fields must have a min and max length - -}) - -// Type inference -type SchemaType = z.infer; - - -// Component definition -const SlideStructure = ({ data }: { data: Partial }) => { - // Note: - // Data is already parse so not need to parse again. - // Must have consistent aspect ratio (16:9) and max-width 1280px. - // Validate each data before rendering using && operator or optional chaining - // These layout are exported as PDF and PPTX so must be optimized for both. - // Component design, layout, styles, etc. - // Content must be properly fit in the container, if need adjust the lenght of the content and items in Schema. - // See ExampleComponent.tsx for more details. - // Font Size must fit the desing and and the content must be properly fit in the container. -}; - -export default SlideStructure; \ No newline at end of file