Oliver/presenton
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(nextjs/schemas): default Schemas added

Browse source
This commit is contained in:
shiva raj badu 2025-07-16 21:41:55 +05:45
parent 8b5f8abe50
commit e084782328
12 changed files with 50 additions and 360 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
servers/nextjs/components/layouts/BulletPointSlideLayout.tsx
View file

@ -1,23 +1,16 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'bullet-point-slide'
export const layoutName = 'Bullet Point Slide'
export const layoutDescription = 'A slide with a title, subtitle, and a list of bullet points.'
const imageSchema = z.object({
url: z.url().meta({
description: "URL to image",
}),
prompt: z.string().meta({
description: "Prompt used to generate the image",
}),
})
const bulletPointSlideSchema = z.object({
title: z.string().min(3).max(100).default('Key Points').meta({
description: "Title of the slide",
badu: "'badf"
}),
subtitle: z.string().min(3).max(150).optional().meta({
description: "Optional subtitle or description",

5
servers/nextjs/components/layouts/ConclusionSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'conclusion-slide'
export const layoutName = 'Conclusion Slide'
@ -36,8 +37,8 @@ const conclusionSlideSchema = z.object({
}).optional().meta({
description: "Optional contact information",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

5
servers/nextjs/components/layouts/ContentSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'content-slide'
@ -16,8 +17,8 @@ const contentSlideSchema = z.object({
content: z.string().min(10).max(1000).default('Your slide content goes here. This is where you can add detailed information, explanations, or any other text content that supports your presentation.').meta({
description: "Main content text",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

5
servers/nextjs/components/layouts/FirstSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'first-slide'
@ -22,8 +23,8 @@ const firstSlideSchema = z.object({
company: z.string().max(100).default('Company Name').optional().meta({
description: "Company or organization name",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

156
servers/nextjs/components/layouts/ImageSlideLayout.tsx
View file

@ -1,156 +0,0 @@
import React from 'react'
import * as z from "zod";
export const layoutId = 'image-slide'
export const layoutName = 'Image Slide'
export const layoutDescription = 'A slide with a title, subtitle, image, and content'
const imageSlideSchema = z.object({
title: z.string().min(3).max(100).default('Image Showcase').meta({
description: "Title of the slide",
}),
subtitle: z.string().min(3).max(150).default('Subtitle for the slide').optional().meta({
description: "Optional subtitle or description",
}),
image: z.string().default('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop').meta({
description: "Main image URL",
}),
imageCaption: z.string().min(5).max(200).default('Image caption').optional().meta({
description: "Optional image caption or description",
}),
content: z.string().min(10).max(600).optional().meta({
description: "Optional supporting content text",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
})
})
export const Schema = imageSlideSchema
export type ImageSlideData = z.infer<typeof imageSlideSchema>
interface ImageSlideLayoutProps {
data?: Partial<ImageSlideData>
accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
const ImageSlideLayout: React.FC<ImageSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
const accentColors = {
blue: 'from-blue-600 to-blue-800',
green: 'from-emerald-600 to-emerald-800',
purple: 'from-violet-600 to-violet-800',
orange: 'from-orange-600 to-orange-800',
red: 'from-red-600 to-red-800'
}
const accentSolids = {
blue: 'bg-blue-600',
green: 'bg-emerald-600',
purple: 'bg-violet-600',
orange: 'bg-orange-600',
red: 'bg-red-600'
}
return (
<div
className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
style={slideData?.backgroundImage ? {
backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
} : {}}
>
{/* Enhanced geometric background decoration */}
<div className="absolute inset-0 opacity-[0.03]">
<div className={`absolute top-0 right-0 w-96 h-96 ${accentSolids[accentColor]} rounded-full transform translate-x-32 -translate-y-32 blur-3xl`} />
<div className={`absolute bottom-0 left-0 w-64 h-64 ${accentSolids[accentColor]} rounded-full transform -translate-x-16 translate-y-16 blur-2xl`} />
</div>
<div className="relative z-10 flex flex-col h-full px-8 py-8">
{/* Professional Header */}
<header className="mb-6">
<h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
? 'text-white drop-shadow-lg'
: 'text-slate-900'
}`}>
<span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
{slideData?.title}
</span>
</h1>
{slideData?.subtitle && (
<p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
? 'text-slate-200 drop-shadow-md'
: 'text-slate-600'
}`}>
{slideData?.subtitle}
</p>
)}
<div className="relative mt-4">
<div className={`w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full shadow-lg`} />
<div className={`absolute inset-0 w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full blur-sm opacity-50`} />
</div>
</header>
{/* Enhanced Content Layout */}
<main className="flex-1 flex items-center min-h-0">
<div className=" ">
<div className={`text-lg md:text-xl leading-relaxed break-words font-medium relative z-10 ${slideData?.backgroundImage
? 'text-slate-700'
: 'text-slate-700'
}`}>
{slideData?.content?.split('\n').map((paragraph, index) => (
paragraph.trim() && (
<p key={index} className="mb-5 last:mb-0">
{paragraph}
</p>
)
))}
</div>
{/* Background decoration */}
<div className={`absolute bottom-0 right-0 w-16 h-16 bg-gradient-to-tl ${accentColors[accentColor]} opacity-5 rounded-tl-full`} />
</div>
<div className="flex flex-col h-full">
<div className="relative flex-1 group overflow-hidden rounded-2xl shadow-2xl">
<img
src={slideData?.image}
alt={slideData?.imageCaption || slideData?.title}
className="w-full h-full object-cover transition-transform duration-300 "
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
</div>
{slideData?.imageCaption && (
<p className={`text-sm mt-4 text-center italic break-words font-medium ${slideData?.backgroundImage
? 'text-slate-300'
: 'text-slate-600'
}`}>
{slideData?.imageCaption}
</p>
)}
</div>
</main>
</div>
{/* Enhanced decorative accent */}
<div className={`absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-r ${accentColors[accentColor]} shadow-lg`}>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent" />
<div className={`absolute inset-0 bg-gradient-to-r ${accentColors[accentColor]} blur-sm opacity-50`} />
</div>
{/* Professional corner accents */}
<div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
</div>
)
}
export default ImageSlideLayout

5
servers/nextjs/components/layouts/ProcessSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'process-slide'
@ -45,8 +46,8 @@ const processSlideSchema = z.object({
description: 'Final delivery and ongoing support'
}
]).describe('Process steps (2-6 items)'),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

5
servers/nextjs/components/layouts/QuoteSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'quote-slide'
@ -28,8 +29,8 @@ const quoteSlideSchema = z.object({
authorImage: z.string().optional().meta({
description: "URL to author photo",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

5
servers/nextjs/components/layouts/StatisticsSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'statistics-slide'
@ -52,8 +53,8 @@ const statisticsSlideSchema = z.object({
context: 'Customer service'
}
]).describe('List of statistics (2-6 items)'),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

5
servers/nextjs/components/layouts/TeamSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'team-slide'
export const layoutName = 'Team Slide'
@ -57,7 +58,9 @@ const teamSlideSchema = z.object({
linkedin: 'https://linkedin.com/in/emmarodriguez'
}
]).describe('Team members (1-6 people)'),
backgroundImage: z.string().optional().describe('URL to background image for the slide')
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
}),
})
export const Schema = teamSlideSchema

5
servers/nextjs/components/layouts/TimelineSlideLayout.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as z from "zod";
import { imageSchema } from './defaultSchemes';
export const layoutId = 'timeline-slide'
@ -54,8 +55,8 @@ const timelineSlideSchema = z.object({
]).meta({
description: "Timeline events (2-6 items)",
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
backgroundImage: imageSchema.optional().meta({
description: "Background image for the slide",
})
})

180
servers/nextjs/components/layouts/TwoColumnSlideLayout.tsx
View file

@ -1,180 +0,0 @@
import React from 'react'
import * as z from "zod";
export const layoutId = 'two-column-slide'
export const layoutName = 'Two Column Slide'
export const layoutDescription = 'A slide with a title, subtitle, and two columns of content'
const twoColumnSlideSchema = z.object({
title: z.string().min(3).max(100).default('Two Column Layout').meta({
description: "Title of the slide",
}),
subtitle: z.string().min(3).max(150).optional().meta({
description: "Optional subtitle or description",
}),
leftColumn: z.object({
title: z.string().min(3).max(100).default('Left Column').meta({
description: "Left column title",
}),
content: z.string().min(10).max(800).default('Content for the left column goes here. This can include detailed information, explanations, or supporting details.').meta({
description: "Left column content",
})
}).default({
title: 'Left Column',
content: 'Content for the left column goes here. This can include detailed information, explanations, or supporting details.'
}),
rightColumn: z.object({
title: z.string().min(3).max(100).default('Right Column').meta({
description: "Right column title",
}),
content: z.string().min(10).max(800).default('Content for the right column goes here. This can include additional information, comparisons, or contrasting details.').meta({
description: "Right column content",
})
}).default({
title: 'Right Column',
content: 'Content for the right column goes here. This can include additional information, comparisons, or contrasting details.'
}),
backgroundImage: z.string().optional().meta({
description: "URL to background image for the slide",
})
})
export const Schema = twoColumnSlideSchema
export type TwoColumnSlideData = z.infer<typeof twoColumnSlideSchema>
interface TwoColumnSlideLayoutProps {
data?: Partial<TwoColumnSlideData>
accentColor?: 'blue' | 'green' | 'purple' | 'orange' | 'red'
}
const TwoColumnSlideLayout: React.FC<TwoColumnSlideLayoutProps> = ({ data: slideData, accentColor = 'blue' }) => {
const accentColors = {
blue: 'from-blue-600 to-blue-800',
green: 'from-emerald-600 to-emerald-800',
purple: 'from-violet-600 to-violet-800',
orange: 'from-orange-600 to-orange-800',
red: 'from-red-600 to-red-800'
}
const accentSolids = {
blue: 'bg-blue-600',
green: 'bg-emerald-600',
purple: 'bg-violet-600',
orange: 'bg-orange-600',
red: 'bg-red-600'
}
return (
<div
className="relative w-full aspect-[16/9] flex flex-col bg-gradient-to-br from-slate-50 via-white to-slate-100 overflow-hidden shadow-2xl border border-slate-200"
style={slideData?.backgroundImage ? {
backgroundImage: `linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url(${slideData?.backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
} : {}}
>
{/* Enhanced geometric background decoration */}
<div className="absolute inset-0 opacity-[0.03]">
<div className={`absolute top-0 right-0 w-96 h-96 ${accentSolids[accentColor]} rounded-full transform translate-x-32 -translate-y-32 blur-3xl`} />
<div className={`absolute bottom-0 left-0 w-64 h-64 ${accentSolids[accentColor]} rounded-full transform -translate-x-16 translate-y-16 blur-2xl`} />
</div>
<div className="relative z-10 flex flex-col h-full px-8 py-8">
{/* Professional Header */}
<header className="mb-6">
<h1 className={`text-4xl md:text-5xl font-bold mb-3 tracking-tight leading-tight break-words ${slideData?.backgroundImage
? 'text-white drop-shadow-lg'
: 'text-slate-900'
}`}>
<span className={`bg-gradient-to-r ${accentColors[accentColor]} bg-clip-text text-transparent`}>
{slideData?.title}
</span>
</h1>
{slideData?.subtitle && (
<p className={`text-xl font-light leading-relaxed break-words ${slideData?.backgroundImage
? 'text-slate-200 drop-shadow-md'
: 'text-slate-600'
}`}>
{slideData?.subtitle}
</p>
)}
<div className="relative mt-4">
<div className={`w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full shadow-lg`} />
<div className={`absolute inset-0 w-32 h-1 bg-gradient-to-r ${accentColors[accentColor]} rounded-full blur-sm opacity-50`} />
</div>
</header>
{/* Two Column Content with Enhanced Styling */}
<main className="flex-1 grid grid-cols-2 gap-6">
{/* Left Column */}
<div className="bg-white/95 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/50 flex flex-col relative overflow-hidden hover:shadow-3xl transition-shadow duration-300">
{/* Column accent */}
<div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
<h2 className={`text-2xl md:text-3xl font-bold mb-5 break-words ${slideData?.backgroundImage
? 'text-slate-900'
: 'text-slate-900'
}`}>
{slideData?.leftColumn?.title}
</h2>
<div className={`text-base md:text-lg leading-relaxed break-words flex-1 ${slideData?.backgroundImage
? 'text-slate-700'
: 'text-slate-700'
}`}>
{slideData?.leftColumn?.content?.split('\n').map((paragraph, index) => (
paragraph.trim() && (
<p key={index} className="mb-4 last:mb-0 font-medium">
{paragraph}
</p>
)
))}
</div>
</div>
{/* Right Column */}
<div className="bg-white/95 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/50 flex flex-col relative overflow-hidden hover:shadow-3xl transition-shadow duration-300">
{/* Column accent */}
<div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${accentColors[accentColor]}`} />
<h2 className={`text-2xl md:text-3xl font-bold mb-5 break-words ${slideData?.backgroundImage
? 'text-slate-900'
: 'text-slate-900'
}`}>
{slideData?.rightColumn?.title}
</h2>
<div className={`text-base md:text-lg leading-relaxed break-words flex-1 ${slideData?.backgroundImage
? 'text-slate-700'
: 'text-slate-700'
}`}>
{slideData?.rightColumn?.content?.split('\n').map((paragraph, index) => (
paragraph.trim() && (
<p key={index} className="mb-4 last:mb-0 font-medium">
{paragraph}
</p>
)
))}
</div>
</div>
</main>
</div>
{/* Enhanced decorative accent */}
<div className={`absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-r ${accentColors[accentColor]} shadow-lg`}>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent" />
<div className={`absolute inset-0 bg-gradient-to-r ${accentColors[accentColor]} blur-sm opacity-50`} />
</div>
{/* Professional corner accents */}
<div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl ${accentColors[accentColor]} opacity-5 rounded-bl-full`} />
</div>
)
}
export default TwoColumnSlideLayout

23
servers/nextjs/components/layouts/defaultSchemes.ts Normal file
View file

@ -0,0 +1,23 @@
import * as z from "zod";
export const imageSchema = z.object({
url: z.url().meta({
description: "URL to image",
}),
prompt: z.string().meta({
description: "Prompt used to generate the image",
}),
}).meta({
imageType: 'image',
})
export const IconSchema = z.object({
url: z.string().meta({
description: "URL to icon",
}),
prompt: z.string().meta({
description: "Prompt used to generate the icon",
}),
}).meta({
imageType: 'icon',
})