import { cn } from "@/lib/utils"; /** * HorizontalSplit * This is a "Layout Component" * It is used to dictate how content is layed out in a given slide * * Responsibilities: * - Split content Horizontally, creating two halfs - left and right * - Allows you to split by a ratio. The prop ratio needs to be between 0.2 and 0.8. The content is split in the ratio "ratio : (1-ratio)" * - In a mobile screen, the content is stacked vertically instead. Meaning, this turns into a vertical split on a mobile screen * * Usage: * ```tsx * * * * This content takes up 70% of the space * This content takes up only 30% of the space * * * * ``` */ interface HorizontalSplitProps extends React.ComponentProps<"div"> { ratio?: number; } export function HorizontalSplit({ children, ratio = 0.5, className, style, ...props }: HorizontalSplitProps) { const clampedRatio = Math.max(0.2, Math.min(0.8, ratio)); return (

{children}

); } HorizontalSplit.Left = function Left({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

) } HorizontalSplit.Right = function Right({ children, className, ...props }: React.ComponentProps<"div">) { return (

{children}

) }