Function OGLayout

apps/cursor/src/lib/og.tsx:103–150

({ children }: { children: ReactElement })

}

export function OGLayout({ children }: { children: ReactElement }) {
  return (
    <div
      style={{
        width: OG.width,
        height: OG.height,
        display: "flex",
        flexDirection: "column",
        backgroundColor: OG.bg,
        fontFamily: "CursorGothic, sans-serif",
      }}
    >
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: "60px 80px 0",
        }}
      >
        {children}
      </div>

      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 48px",
          height: 80,
          borderTop: `1px solid ${OG.border}`,
        }}
      >
        <LogoLockup height={22} />
        <span
          style={{
            color: OG.textTertiary,
            fontSize: 18,
            letterSpacing: "0.01em",
          }}
        >
          cursor.directory
        </span>
      </div>
    </div>
  );
}

/**
 * Renders an OG element tree to PNG bytes.