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

add table and quote in general layout

Browse source
This commit is contained in:
Suraj Jha 2025-07-25 23:32:58 +05:45
parent c649ec495c
commit 129168dcce
2 changed files with 261 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
servers/nextjs/presentation-layouts/general/QuoteSlideLayout.tsx Normal file
View file

@ -0,0 +1,116 @@
import React from 'react'
import * as z from "zod";
import { ImageSchema } from '@/presentation-layouts/defaultSchemes';
export const layoutId = 'quote-slide'
export const layoutName = 'Quote'
export const layoutDescription = 'A slide layout with a heading, inspirational quote, and background image with overlay for text visibility.'
const quoteSlideSchema = z.object({
heading: z.string().min(3).max(60).default('Words of Wisdom').meta({
description: "Main heading of the slide",
}),
quote: z.string().min(10).max(200).default('Success is not final, failure is not fatal: it is the courage to continue that counts. The future belongs to those who believe in the beauty of their dreams.').meta({
description: "The main quote text content",
}),
author: z.string().min(2).max(50).default('Winston Churchill').meta({
description: "Author of the quote",
}),
backgroundImage: ImageSchema.default({
__image_url__: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
__image_prompt__: 'Inspirational mountain landscape with dramatic sky and clouds'
}).meta({
description: "Background image for the slide",
})
})
export const Schema = quoteSlideSchema
export type QuoteSlideData = z.infer<typeof quoteSlideSchema>
interface QuoteSlideLayoutProps {
data?: Partial<QuoteSlideData>
}
const QuoteSlideLayout: React.FC<QuoteSlideLayoutProps> = ({ data: slideData }) => {
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden"
style={{
fontFamily: 'Poppins, sans-serif'
}}
>
{/* Background Image */}
<div
className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('${slideData?.backgroundImage?.__image_url__ || ''}')`,
}}
/>
{/* Background Overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-black/60 via-black/40 to-black/60"></div>
{/* Decorative Elements */}
<div className="absolute top-0 left-0 w-32 h-32 bg-purple-600/20 rounded-full blur-3xl"></div>
<div className="absolute bottom-0 right-0 w-40 h-40 bg-purple-400/20 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>
{/* Main Content */}
<div className="relative z-10 px-8 sm:px-12 lg:px-20 py-12 flex-1 flex flex-col justify-center h-full">
<div className="text-center space-y-8 max-w-4xl mx-auto">
{/* Heading */}
<div className="space-y-4">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
{slideData?.heading || 'Words of Wisdom'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-400 mx-auto"></div>
</div>
{/* Quote Section */}
<div className="space-y-6">
{/* Quote Icon */}
<div className="flex justify-center">
<svg
className="w-12 h-12 text-purple-300 opacity-80"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
{/* Quote Text */}
<blockquote className="text-xl sm:text-2xl lg:text-3xl font-medium text-white leading-relaxed italic">
"{slideData?.quote || 'Success is not final, failure is not fatal: it is the courage to continue that counts. The future belongs to those who believe in the beauty of their dreams.'}"
</blockquote>
{/* Author */}
<div className="flex justify-center items-center space-x-4">
<div className="w-16 h-px bg-purple-300"></div>
<cite className="text-base sm:text-lg text-purple-200 font-semibold not-italic">
{slideData?.author || 'Winston Churchill'}
</cite>
<div className="w-16 h-px bg-purple-300"></div>
</div>
</div>
</div>
</div>
{/* Bottom Decorative Border */}
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-r from-purple-600 via-purple-400 to-purple-600"></div>
</div>
</>
)
}
export default QuoteSlideLayout

145
servers/nextjs/presentation-layouts/general/TableInfoSlideLayout.tsx Normal file
View file

@ -0,0 +1,145 @@
import React from 'react'
import * as z from "zod";
export const layoutId = 'table-info-slide'
export const layoutName = 'Table with Info'
export const layoutDescription = 'A slide layout with a title at the top, structured table in the middle, and descriptive text at the bottom.'
const tableInfoSlideSchema = z.object({
title: z.string().min(3).max(40).default('Market Comparison').meta({
description: "Main title of the slide",
}),
tableData: z.object({
headers: z.array(z.string().min(1).max(30)).min(2).max(5).meta({
description: "Table column headers"
}),
rows: z.array(z.array(z.string().min(1).max(50))).min(2).max(6).meta({
description: "Table rows data - each row should match the number of headers"
})
}).default({
headers: ['Company', 'Revenue', 'Growth', 'Market Share'],
rows: [
['Company A', '$2.5M', '15%', '25%'],
['Company B', '$1.8M', '12%', '18%'],
['Company C', '$3.2M', '20%', '32%'],
['Our Company', '$1.2M', '35%', '12%']
]
}).meta({
description: "Table structure with headers and rows"
}),
description: z.string().min(10).max(200).default('This comparison shows our competitive position in the market. While we currently have a smaller market share, our growth rate significantly exceeds competitors, indicating strong potential for future expansion.').meta({
description: "Descriptive text that appears below the table",
})
})
export const Schema = tableInfoSlideSchema
export type TableInfoSlideData = z.infer<typeof tableInfoSlideSchema>
interface TableInfoSlideLayoutProps {
data?: Partial<TableInfoSlideData>
}
const TableInfoSlideLayout: React.FC<TableInfoSlideLayoutProps> = ({ data: slideData }) => {
const tableHeaders = slideData?.tableData?.headers || ['Company', 'Revenue', 'Growth', 'Market Share']
const tableRows = slideData?.tableData?.rows || [
['Company A', '$2.5M', '15%', '25%'],
['Company B', '$1.8M', '12%', '18%'],
['Company C', '$3.2M', '20%', '32%'],
['Our Company', '$1.2M', '35%', '12%']
]
return (
<>
{/* Import Google Fonts */}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<div
className="w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden flex flex-col"
style={{
fontFamily: 'Poppins, sans-serif'
}}
>
{/* Decorative Wave Patterns */}
<div className="absolute top-0 left-0 w-64 h-full opacity-10 overflow-hidden">
<svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
<path d="M0 100C50 150 100 50 150 100C175 125 200 100 200 100V0H0V100Z" fill="#8b5cf6" opacity="0.3" />
<path d="M0 200C75 250 125 150 200 200V150C150 175 100 150 50 175L0 200Z" fill="#8b5cf6" opacity="0.2" />
<path d="M0 300C100 350 150 250 200 300V250C125 275 75 250 25 275L0 300Z" fill="#8b5cf6" opacity="0.1" />
</svg>
</div>
<div className="absolute top-0 right-0 w-64 h-full opacity-10 overflow-hidden transform scale-x-[-1]">
<svg className="w-full h-full" viewBox="0 0 200 400" fill="none">
<path d="M0 100C50 150 100 50 150 100C175 125 200 100 200 100V0H0V100Z" fill="#8b5cf6" opacity="0.3" />
<path d="M0 200C75 250 125 150 200 200V150C150 175 100 150 50 175L0 200Z" fill="#8b5cf6" opacity="0.2" />
<path d="M0 300C100 350 150 250 200 300V250C125 275 75 250 25 275L0 300Z" fill="#8b5cf6" opacity="0.1" />
</svg>
</div>
{/* Main Content */}
<div className="relative z-10 px-8 sm:px-12 lg:px-20 py-8 flex-1 flex flex-col justify-between">
{/* Title Section */}
<div className="text-center space-y-4">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900">
{slideData?.title || 'Market Comparison'}
</h1>
{/* Purple accent line */}
<div className="w-20 h-1 bg-purple-600 mx-auto"></div>
</div>
{/* Table Section */}
<div className="flex-1 flex items-center justify-center py-8">
<div className="w-full max-w-4xl">
<div className="bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
{/* Table Header */}
<div className="bg-purple-600 text-white">
<div className="grid gap-px" style={{ gridTemplateColumns: `repeat(${tableHeaders.length}, 1fr)` }}>
{tableHeaders.map((header, index) => (
<div key={index} className="px-6 py-4 font-semibold text-center text-sm sm:text-base">
{header}
</div>
))}
</div>
</div>
{/* Table Body */}
<div className="divide-y divide-gray-200">
{tableRows.map((row, rowIndex) => (
<div
key={rowIndex}
className={`grid gap-px ${rowIndex % 2 === 0 ? 'bg-gray-50' : 'bg-white'} hover:bg-purple-50 transition-colors duration-200`}
style={{ gridTemplateColumns: `repeat(${tableHeaders.length}, 1fr)` }}
>
{row.slice(0, tableHeaders.length).map((cell, cellIndex) => (
<div key={cellIndex} className="px-6 py-4 text-center text-sm sm:text-base text-gray-800">
{cell}
</div>
))}
</div>
))}
</div>
</div>
</div>
</div>
{/* Description Section */}
<div className="text-center space-y-4">
<div className="max-w-4xl mx-auto">
<p className="text-sm sm:text-base text-gray-700 leading-relaxed">
{slideData?.description || 'This comparison shows our competitive position in the market. While we currently have a smaller market share, our growth rate significantly exceeds competitors, indicating strong potential for future expansion.'}
</p>
</div>
</div>
</div>
</div>
</>
)
}
export default TableInfoSlideLayout