136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
import { ImageResponse } from 'next/og';
|
|
import { getProductBySlug } from '@/lib/mdx';
|
|
|
|
export const runtime = 'edge';
|
|
|
|
export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
|
|
const productSlug = slug[slug.length - 1];
|
|
const product = await getProductBySlug(productSlug, locale);
|
|
|
|
if (!product) {
|
|
return new ImageResponse(
|
|
<div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
|
|
);
|
|
}
|
|
|
|
return new ImageResponse(
|
|
(
|
|
<div
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: 'white',
|
|
padding: '60px',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{/* Left Side: Content */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', width: '55%' }}>
|
|
<div
|
|
style={{
|
|
fontSize: '20px',
|
|
fontWeight: 'bold',
|
|
color: '#001a4d',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.2em',
|
|
marginBottom: '20px',
|
|
opacity: 0.6,
|
|
}}
|
|
>
|
|
KLZ Cables | {product.frontmatter.categories[0]}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '72px',
|
|
fontWeight: '900',
|
|
color: '#001a4d',
|
|
lineHeight: '1.1',
|
|
marginBottom: '30px',
|
|
}}
|
|
>
|
|
{product.frontmatter.title}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: '28px',
|
|
color: '#4a5568',
|
|
lineHeight: '1.4',
|
|
}}
|
|
>
|
|
{product.frontmatter.description}
|
|
</div>
|
|
|
|
{/* Accent Line */}
|
|
<div
|
|
style={{
|
|
marginTop: '40px',
|
|
width: '100px',
|
|
height: '8px',
|
|
backgroundColor: '#00ff99',
|
|
borderRadius: '4px',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Side: Product Image */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
width: '40%',
|
|
height: '100%',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{product.frontmatter.images?.[0] && (
|
|
<img
|
|
src={product.frontmatter.images[0].startsWith('http') ? product.frontmatter.images[0] : `https://klz-cables.com${product.frontmatter.images[0]}`}
|
|
alt=""
|
|
style={{
|
|
maxWidth: '100%',
|
|
maxHeight: '80%',
|
|
objectFit: 'contain',
|
|
}}
|
|
/>
|
|
)}
|
|
{/* Subtle shadow under product */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '10%',
|
|
width: '60%',
|
|
height: '20px',
|
|
backgroundColor: 'rgba(0,0,0,0.05)',
|
|
borderRadius: '50%',
|
|
filter: 'blur(10px)',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Branding Corner */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '40px',
|
|
right: '60px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div style={{ fontSize: '24px', fontWeight: 'bold', color: '#001a4d' }}>KLZ</div>
|
|
<div style={{ fontSize: '24px', fontWeight: 'normal', color: '#00ff99', marginLeft: '4px' }}>Cables</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
{
|
|
width: 1200,
|
|
height: 630,
|
|
}
|
|
);
|
|
}
|