malepati/custom_template_working
0
1const ImageSchema = z.object({2 __image_url__: z.url().meta({ description: "URL to image" }),3 __image_prompt__: z.string().meta({ description: "Prompt" }).min(10).max(50),4})5 6const IconSchema = z.object({7 __icon_url__: z.string().meta({ description: "URL to icon" }),8 __icon_query__: z.string().meta({ description: "Query used to search the icon. Max 3 words" }).min(5).max(20),9})10 11const defaultChartData = [12 { label: "Item 1", value: 50, series1: 50, series2: 25 },13 { label: "Item 2", value: 60, series1: 60, series2: 30 },14 { label: "Item 3", value: 70, series1: 70, series2: 35 },15]16 17const layoutId = "header-centered-contacts-slide"18const layoutName = "dynamicSlideLayout"19const layoutDescription = "A slide with layered background, centered two-line header, brand row, and two-column contact rows with icons"20 21const Schema = z.object({22 brand: z.object({23 icon: IconSchema.default({24 __icon_url__: "/static/icons/placeholder.png",25 __icon_query__: "info circle",26 }),27 name: z.string().max(1000).default("THYNK UNLIMITED"),28 }).default({}),29 titleTop: z.string().max(1000).default("THANK"),30 titleBottom: z.string().max(1000).default("YOU"),31 contactsLeft: z.array(z.object({32 icon: IconSchema,33 text: z.string().max(1000).default(""),34 })).default([35 {36 icon: { __icon_url__: "/static/icons/placeholder.png", __icon_query__: "phone call" },37 text: "+123-456-7890",38 },39 {40 icon: { __icon_url__: "/static/icons/placeholder.png", __icon_query__: "globe www" },41 text: "WWW.REALLYGREATSITE.COM",42 },43 ]),44 contactsRight: z.array(z.object({45 icon: IconSchema,46 text: z.string().max(1000).default(""),47 })).default([48 {49 icon: { __icon_url__: "/static/icons/placeholder.png", __icon_query__: "email mail" },50 text: "HELLO@REALLYGREATSITE.COM",51 },52 {53 icon: { __icon_url__: "/static/icons/placeholder.png", __icon_query__: "location pin" },54 text: "123 ANYWHERE ST., ANY CITY, ST 12345",55 },56 ]),57 ribbonTop: z.array(ImageSchema).default([58 { __image_url__: "https://example.com/ribbon-top-1.png", __image_prompt__: "blue gradient ribbon block" },59 { __image_url__: "https://example.com/ribbon-top-2.png", __image_prompt__: "blue gradient ribbon block" },60 { __image_url__: "https://example.com/ribbon-top-3.png", __image_prompt__: "blue gradient ribbon block" },61 ]),62 ribbonBottom: z.array(ImageSchema).default([63 { __image_url__: "https://example.com/ribbon-bottom-1.png", __image_prompt__: "blue gradient ribbon block" },64 { __image_url__: "https://example.com/ribbon-bottom-2.png", __image_prompt__: "blue gradient ribbon block" },65 { __image_url__: "https://example.com/ribbon-bottom-3.png", __image_prompt__: "blue gradient ribbon block" },66 ]),67 chart: z.object({68 type: z.enum(["bar", "line", "pie", "horizontalBar"]).default("bar"),69 data: z.array(z.object({70 label: z.string(),71 value: z.number().optional(),72 series1: z.number().optional(),73 series2: z.number().optional(),74 })).default(defaultChartData),75 showLabels: z.boolean().default(true),76 primaryColor: z.string().default("#1c63ff"),77 secondaryColor: z.string().optional().default("#48b9ff"),78 }).default({}),79 diagram: z.object({80 code: z.string().default("graph TD; A[Start] --> B[Process]; B --> C[End];"),81 }).default({}),82}).default({})83 84type SlideData = z.infer<typeof Schema>85 86interface LayoutProps {87 data?: Partial<SlideData>88}89 90const dynamicSlideLayout: React.FC<LayoutProps> = ({ data: slideData }) => {91 return (92 <>93 <div className="relative w-full rounded-sm max-w-[1280px] shadow-lg max-h-[720px] aspect-video bg-white relative z-20 mx-auto overflow-hidden p-8 sm:p-12">94 <div className="absolute inset-0 bg-[#0a1426]"></div>95 <div96 className="absolute inset-0 opacity-90"97 style={{98 background:99 "radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.04) 15%, rgba(10,20,38,0) 16%) , radial-gradient(70% 70% at 50% 50%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 25%, rgba(10,20,38,0) 26%) , radial-gradient(90% 90% at 50% 50%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 35%, rgba(10,20,38,0) 36%)",100 }}101 ></div>102 <div className="absolute -right-24 -top-32 w-[520px] h-[520px] rotate-45 pointer-events-none">103 <div className="absolute inset-y-0 left-8 w-20 bg-gradient-to-b from-[#1aa0ff] via-[#1c63ff] to-[#0a3a8e] rounded-md"></div>104 <div className="absolute inset-y-0 left-40 w-20 bg-gradient-to-b from-[#48b9ff] via-[#2c74ff] to-[#0a3a8e] rounded-md"></div>105 <div className="absolute inset-y-0 left-72 w-20 bg-gradient-to-b from-[#2ea8ff] via-[#1858e8] to-[#0a3a8e] rounded-md"></div>106 </div>107 <div className="absolute -left-24 bottom-[-120px] w-[720px] h-[520px] -rotate-45 pointer-events-none">108 <div className="absolute inset-y-0 left-8 w-24 bg-gradient-to-b from-[#3db2ff] via-[#2b6fff] to-[#0a3a8e] rounded-md"></div>109 <div className="absolute inset-y-0 left-48 w-24 bg-gradient-to-b from-[#2ea8ff] via-[#1f62ff] to-[#0a3a8e] rounded-md"></div>110 <div className="absolute inset-y-0 left-88 w-24 bg-gradient-to-b from-[#1b9cff] via-[#1b63ff] to-[#0a3a8e] rounded-md"></div>111 </div>112 <div className="relative z-30 h-full flex flex-col justify-between">113 <div className="flex items-center gap-3 pl-2">114 <div className="flex items-center justify-center w-[20px] h-[20px] rounded-full border border-white/70 text-white text-[12px] font-semibold">i</div>115 <div className="text-white font-['Montserrat'] font-bold tracking-wide text-[14px] leading-none whitespace-nowrap">{slideData?.brand?.name}</div>116 </div>117 <div className="w-full flex justify-center">118 <div className="text-center">119 <div className="text-white font-['Barlow'] font-extrabold tracking-wide text-5xl leading-tight whitespace-nowrap">{slideData?.titleTop}</div>120 <div className="text-white font-['Barlow'] font-extrabold tracking-wide text-5xl leading-tight whitespace-nowrap">{slideData?.titleBottom}</div>121 </div>122 </div>123 <div className="grid grid-cols-2 gap-x-16 gap-y-6 w-full" style={{ paddingLeft: 150, paddingRight: 150 }}>124 <div className="space-y-6">125 {slideData?.contactsLeft?.map((item, idx) => (126 <div key={idx} className="flex items-center">127 <div className="mr-5 flex items-center justify-center w-[32px] h-[32px] rounded-full border border-white/80 text-white">128 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">129 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.09 4.18 2 2 0 0 1 4.07 2h3a2 2 0 0 1 2 1.72c.12.89.32 1.76.59 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.12a2 2 0 0 1 2.11-.45c.84.27 1.71.47 2.6.59A2 2 0 0 1 22 16.92z"></path>130 </svg>131 </div>132 <div className="text-white font-['Montserrat'] text-lg tracking-wide whitespace-nowrap">{item?.text}</div>133 </div>134 ))}135 </div>136 <div className="space-y-6">137 {slideData?.contactsRight?.map((item, idx) => (138 <div key={idx} className="flex items-center">139 <div className="mr-5 flex items-center justify-center w-[32px] h-[32px] rounded-full border border-white/80 text-white">140 <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">141 <path d="M4 4h16v16H4z"></path>142 <path d="M22 6l-10 7L2 6"></path>143 </svg>144 </div>145 <div className="text-white font-['Montserrat'] text-lg tracking-wide whitespace-nowrap">{item?.text}</div>146 </div>147 ))}148 </div>149 </div>150 <div className="w-full h-64 hidden">151 <ResponsiveContainer width="100%" height="100%">152 <BarChart data={slideData?.chart?.data || defaultChartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>153 <XAxis dataKey="label" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />154 <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => `${value}`} />155 <Tooltip />156 <Bar dataKey="series1" fill={slideData?.chart?.primaryColor} radius={[4, 4, 0, 0]} />157 <Bar dataKey="series2" fill={slideData?.chart?.secondaryColor || "#82ca9d"} radius={[4, 4, 0, 0]} />158 </BarChart>159 </ResponsiveContainer>160 </div>161 <div className="hidden">162 <div className="mermaid">{slideData?.diagram?.code}</div>163 </div>164 </div>165 </div>166 </>167 )168}