import React from 'react';
import { AbsoluteFill, useCurrentFrame } from 'remotion';
interface ThreeColumnLayoutProps {
left?: React.ReactNode;
center?: React.ReactNode;
right?: React.ReactNode;
startFrame: number;
durationInFrames: number;
left_width?: number;
center_width?: number;
right_width?: number;
padding?: number;
gap?: number;
border_width?: number;
border_color?: string;
border_radius?: number;
background?: string;
}
export const ThreeColumnLayout: React.FC<ThreeColumnLayoutProps> = ({
left,
center,
right,
startFrame,
durationInFrames,
left_width = 33.33,
center_width = 33.33,
right_width = 33.33,
padding = 40,
gap = 20,
border_width,
border_color = 'rgba(255, 255, 255, 0.2)',
border_radius = 8,
background
}) => {
const frame = useCurrentFrame();
const relativeFrame = frame - startFrame;
// Don't render if outside the time range
if (frame < startFrame || frame >= startFrame + durationInFrames) {
return null;
}
return (
<AbsoluteFill style={{ pointerEvents: 'none' }}>
<div
style={{
position: 'absolute',
top: padding,
left: padding,
right: padding,
bottom: padding,
display: 'flex',
flexDirection: 'row',
gap: gap,
width: `calc(100% - ${padding * 2}px)`,
height: `calc(100% - ${padding * 2}px)`,
}}
>
{/* Left Column */}
<div
style={{
flex: `0 0 calc(${left_width}% - ${gap * 2 / 3}px)`,
display: 'flex',
flexDirection: 'column',
...(border_width && {
border: `${border_width}px solid ${border_color}`,
borderRadius: border_radius
}),
overflow: 'hidden',
position: 'relative',
...(background && { background }),
}}
>
{left}
</div>
{/* Center Column */}
<div
style={{
flex: `0 0 calc(${center_width}% - ${gap * 2 / 3}px)`,
display: 'flex',
flexDirection: 'column',
...(border_width && {
border: `${border_width}px solid ${border_color}`,
borderRadius: border_radius
}),
overflow: 'hidden',
position: 'relative',
...(background && { background }),
}}
>
{center}
</div>
{/* Right Column */}
<div
style={{
flex: `0 0 calc(${right_width}% - ${gap * 2 / 3}px)`,
display: 'flex',
flexDirection: 'column',
...(border_width && {
border: `${border_width}px solid ${border_color}`,
borderRadius: border_radius
}),
overflow: 'hidden',
position: 'relative',
...(background && { background }),
}}
>
{right}
</div>
</div>
</AbsoluteFill>
);
};
