Refine layouts and update API docs for modern presentation slides
- Remove unused product boxes from ProductOverviewSlideLayout - Only render business model chart if data is present - Update README to clarify layout options and fix formatting
This commit is contained in:
sudipnext
parent
f7ad01a648
commit
80226215d1
3 changed files with 63 additions and 147 deletions
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
|
||||
> [!NOTE]
|
||||
> **Enterprise Inquiries:**
|
||||
> **Enterprise Inquiries:**
|
||||
> For enterprise use, custom deployments, or partnership opportunities, contact us at **[suraj@presenton.ai](mailto:suraj@presenton.ai)**.
|
||||
|
||||
> [!IMPORTANT]
|
||||
|
|
@ -138,7 +138,7 @@ Content-Type: `multipart/form-data`
|
|||
| prompt | string | Yes | The main topic or prompt for generating the presentation |
|
||||
| n_slides | integer | No | Number of slides to generate (default: 8, min: 5, max: 15) |
|
||||
| language | string | No | Language for the presentation (default: "English") |
|
||||
| theme | string | No | Presentation theme (default: "light"). Available options: "light", "dark", "cream", "royal_blue", "faint_yellow", "light_red", "dark_pink" |
|
||||
| layout | string | No | Presentation theme (default: "classic"). Available options: "classic", "general", "modern", "professional" |
|
||||
| documents | File[] | No | Optional list of document files to include in the presentation. Supported file types: PDF, TXT, PPTX, DOCX |
|
||||
| export_as | string | No | Export format ("pptx" or "pdf", default: "pptx") |
|
||||
|
||||
|
|
|
|||
|
|
@ -162,54 +162,13 @@ const ProductOverviewSlideLayout: React.FC<ProductOverviewSlideLayoutProps> = ({
|
|||
className="rounded-b-md overflow-hidden"
|
||||
style={{ height: `${IMAGE_SECTION_HEIGHT + 28}px` }}
|
||||
>
|
||||
{products[0].image.__image_url__ && (
|
||||
<img
|
||||
src={products[0].image.__image_url__}
|
||||
alt={
|
||||
products[0].image.__image_prompt__ || products[0].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{products[2] && (
|
||||
<div
|
||||
className="flex flex-col items-stretch"
|
||||
style={{
|
||||
width: `${PRODUCT_BOX_WIDTH + 40}px`,
|
||||
height: `${PRODUCT_BOX_HEIGHT + 60}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`${products[2].isBlueBackground ? "bg-blue-600" : "bg-gray-100"} p-5 flex flex-col justify-center text-center rounded-t-md`}
|
||||
style={{ height: `${TEXT_SECTION_HEIGHT + 32}px` }}
|
||||
>
|
||||
<h2
|
||||
className={`text-xl font-semibold mb-3 ${products[2].isBlueBackground ? "text-white" : "text-blue-600"}`}
|
||||
>
|
||||
{products[2].title}
|
||||
</h2>
|
||||
<p
|
||||
className={`text-sm leading-relaxed ${products[2].isBlueBackground ? "text-white" : "text-blue-600"}`}
|
||||
>
|
||||
{products[2].description}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-b-md overflow-hidden"
|
||||
style={{ height: `${IMAGE_SECTION_HEIGHT + 28}px` }}
|
||||
>
|
||||
{products[2].image.__image_url__ && (
|
||||
<img
|
||||
src={products[2].image.__image_url__}
|
||||
alt={
|
||||
products[2].image.__image_prompt__ || products[2].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={products[0].image.__image_url__}
|
||||
alt={
|
||||
products[0].image.__image_prompt__ || products[0].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -229,15 +188,13 @@ const ProductOverviewSlideLayout: React.FC<ProductOverviewSlideLayoutProps> = ({
|
|||
className="rounded-t-md overflow-hidden"
|
||||
style={{ height: `${IMAGE_SECTION_HEIGHT + 28}px` }}
|
||||
>
|
||||
{products[1].image.__image_url__ && (
|
||||
<img
|
||||
src={products[1].image.__image_url__}
|
||||
alt={
|
||||
products[1].image.__image_prompt__ || products[1].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={products[1].image.__image_url__}
|
||||
alt={
|
||||
products[1].image.__image_prompt__ || products[1].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Bottom Section - Blue background with text */}
|
||||
<div
|
||||
|
|
@ -257,45 +214,6 @@ const ProductOverviewSlideLayout: React.FC<ProductOverviewSlideLayoutProps> = ({
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
{products[3] && (
|
||||
<div
|
||||
className="flex flex-col items-stretch"
|
||||
style={{
|
||||
width: `${PRODUCT_BOX_WIDTH + 40}px`,
|
||||
height: `${PRODUCT_BOX_HEIGHT + 60}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="rounded-t-md overflow-hidden"
|
||||
style={{ height: `${IMAGE_SECTION_HEIGHT + 28}px` }}
|
||||
>
|
||||
{products[3].image.__image_url__ && (
|
||||
<img
|
||||
src={products[3].image.__image_url__}
|
||||
alt={
|
||||
products[3].image.__image_prompt__ || products[3].title
|
||||
}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`${products[3].isBlueBackground ? "bg-blue-600" : "bg-gray-100"} p-5 flex flex-col justify-center text-center rounded-b-md`}
|
||||
style={{ height: `${TEXT_SECTION_HEIGHT + 32}px` }}
|
||||
>
|
||||
<h2
|
||||
className={`text-xl font-semibold mb-3 ${products[3].isBlueBackground ? "text-white" : "text-blue-600"}`}
|
||||
>
|
||||
{products[3].title}
|
||||
</h2>
|
||||
<p
|
||||
className={`text-sm leading-relaxed ${products[3].isBlueBackground ? "text-white" : "text-blue-600"}`}
|
||||
>
|
||||
{products[3].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,13 +63,9 @@ interface Props {
|
|||
}
|
||||
|
||||
const BusinessModelSlide: React.FC<Props> = ({ data }) => {
|
||||
const cacChartData =
|
||||
data?.cacChart && Array.isArray(data.cacChart) && data.cacChart.length > 0
|
||||
? data.cacChart
|
||||
: [
|
||||
{ label: "Internet of Things", percentage: 70 },
|
||||
{ label: "Artificial Intelligence", percentage: 60 },
|
||||
];
|
||||
const hasChart =
|
||||
data?.cacChart && Array.isArray(data.cacChart) && data.cacChart.length > 0;
|
||||
const cacChartData = hasChart ? data.cacChart : [];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -96,49 +92,51 @@ const BusinessModelSlide: React.FC<Props> = ({ data }) => {
|
|||
<h1 className="text-6xl font-bold text-blue-600 mb-4 leading-tight text-left">
|
||||
{data?.title}
|
||||
</h1>
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-8">
|
||||
<div className="w-full h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={cacChartData}
|
||||
margin={{ top: 20, right: 30, left: 10, bottom: 20 }}
|
||||
barCategoryGap="30%"
|
||||
>
|
||||
<CartesianGrid stroke="#e5eafe" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fill: "#1E4CD9", fontWeight: 600 }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: "#1E4CD9", fontWeight: 600 }}
|
||||
domain={[0, 100]}
|
||||
ticks={[0, 20, 40, 60, 80, 100]}
|
||||
width={40}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "#1E4CD9",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
labelStyle={{ color: "#fff" }}
|
||||
itemStyle={{ color: "#fff" }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ color: "#1E4CD9", fontWeight: 600 }}
|
||||
iconType="circle"
|
||||
/>
|
||||
<Bar
|
||||
dataKey="percentage"
|
||||
fill="#3b82f6"
|
||||
name="CAC %"
|
||||
maxBarSize={48}
|
||||
radius={[8, 8, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
{hasChart && (
|
||||
<div className="bg-white rounded-lg shadow p-4 mb-8">
|
||||
<div className="w-full h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={cacChartData}
|
||||
margin={{ top: 20, right: 30, left: 10, bottom: 20 }}
|
||||
barCategoryGap="30%"
|
||||
>
|
||||
<CartesianGrid stroke="#e5eafe" />
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
tick={{ fill: "#1E4CD9", fontWeight: 600 }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: "#1E4CD9", fontWeight: 600 }}
|
||||
domain={[0, 100]}
|
||||
ticks={[0, 20, 40, 60, 80, 100]}
|
||||
width={40}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: "#1E4CD9",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
}}
|
||||
labelStyle={{ color: "#fff" }}
|
||||
itemStyle={{ color: "#fff" }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ color: "#1E4CD9", fontWeight: 600 }}
|
||||
iconType="circle"
|
||||
/>
|
||||
<Bar
|
||||
dataKey="percentage"
|
||||
fill="#3b82f6"
|
||||
name="CAC %"
|
||||
maxBarSize={48}
|
||||
radius={[8, 8, 0, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column - Description and Optional Image */}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue