import { MediaTemplate } from "../../lib/templates" export const landscapeTemplates: MediaTemplate[] = [ // Шаблоны с 2 экранами (с возможностью изменения размеров) { id: "split-vertical-landscape", split: "vertical", resizable: true, screens: 2, splitPosition: 50, // Позиция разделения в процентах (50% - посередине), render: () => (
1
2
), }, { id: "split-horizontal-landscape", split: "horizontal", resizable: true, screens: 2, splitPosition: 50, // Позиция разделения в процентах (50% - посередине) render: () => (
1
2
), }, // Диагональное разделение { id: "split-diagonal-landscape", split: "diagonal", resizable: true, screens: 2, splitPoints: [ { x: 66.67, y: 0 }, // Начальная точка (2/3 от левого края, верх) { x: 33.33, y: 100 }, // Конечная точка (1/3 от левого края, низ) ], render: () => (
{/* Первый экран (левый) */}
1
{/* Линия разделения */}
{/* Второй экран (правый) */}
2
), }, // Шаблон с горизонтальным разделением сверху и вертикальным снизу { id: "split-mixed-1-landscape", split: "custom", resizable: true, screens: 3, render: () => (
{/* Верхняя секция */}
1
{/* Горизонтальная линия разделения */}
{/* Нижняя левая секция */}
2
{/* Вертикальная линия разделения */}
{/* Нижняя правая секция */}
3
), }, // Шаблон с вертикальным разделением слева и двумя секциями справа { id: "split-mixed-2-landscape", split: "custom", resizable: true, screens: 3, render: () => (
{/* Левая секция */}
1
{/* Вертикальная линия разделения */}
{/* Верхняя правая секция */}
2
{/* Горизонтальная линия разделения */}
{/* Нижняя правая секция */}
3
), }, // Шаблоны с 3 экранами { id: "split-vertical-3-landscape", split: "vertical", resizable: true, screens: 3, render: () => (
1
2
3
), }, { id: "split-horizontal-3-landscape", split: "horizontal", resizable: true, screens: 3, render: () => (
1
2
3
), }, // Шаблоны с 4 экранами { id: "split-grid-2x2-landscape", split: "grid", resizable: true, screens: 4, render: () => (
{Array.from({ length: 4 }).map((_, index) => { const row = Math.floor(index / 2) const col = index % 2 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальная линия */}
{/* Горизонтальная линия */}
), }, { id: "split-vertical-4-landscape", split: "vertical", resizable: true, screens: 4, render: () => (
1
2
3
4
), }, // Шаблоны с 5 экранами - вариант 1 (1 большой слева, 4 маленьких справа) { id: "split-custom-5-1-landscape", split: "custom", resizable: true, screens: 5, render: () => (
{/* Левая большая секция */}
1
{/* Вертикальная линия разделения */}
{/* Верхняя правая секция */}
2
{/* Горизонтальная линия разделения */}
{/* Нижняя правая секция - верхняя левая */}
3
{/* Нижняя правая секция - верхняя правая */}
4
{/* Вертикальная линия разделения в нижней правой секции */}
{/* Горизонтальная линия разделения в нижней правой секции */}
{/* Нижняя правая секция - нижняя */}
5
), }, // Шаблоны с 5 экранами - вариант 2 (4 маленьких слева, 1 большой справа) { id: "split-custom-5-2-landscape", split: "custom", resizable: true, screens: 5, render: () => (
{/* Правая большая секция */}
5
{/* Вертикальная линия разделения */}
{/* Верхняя левая секция */}
1
{/* Горизонтальная линия разделения */}
{/* Нижняя левая секция - верхняя левая */}
2
{/* Нижняя левая секция - верхняя правая */}
3
{/* Вертикальная линия разделения в нижней левой секции */}
{/* Горизонтальная линия разделения в нижней левой секции */}
{/* Нижняя левая секция - нижняя */}
4
), }, // Шаблоны с 5 экранами - вариант 3 (средний на всю ширину, верхний и нижний ряды по 2 экрана) { id: "split-custom-5-3-landscape", split: "custom", resizable: true, screens: 5, render: () => (
{/* Верхний левый экран */}
1
{/* Верхний правый экран */}
2
{/* Средний экран на всю ширину */}
3
{/* Нижний левый экран */}
4
{/* Нижний правый экран */}
5
{/* Горизонтальные линии разделения */}
{/* Вертикальные линии разделения */}
), }, { id: "split-1-3-landscape", split: "custom", resizable: true, screens: 4, render: () => (
{/* Левая большая секция */}
1
{/* Вертикальная линия разделения */}
{/* Верхняя правая секция */}
2
{/* Горизонтальная линия разделения 1 */}
{/* Средняя правая секция */}
3
{/* Горизонтальная линия разделения 2 */}
{/* Нижняя правая секция */}
4
), }, // 3 слева + 1 справа { id: "split-3-1-right-landscape", split: "custom", resizable: true, screens: 4, render: () => (
{/* Правая большая секция */}
4
{/* Вертикальная линия разделения */}
{/* Верхняя левая секция */}
1
{/* Горизонтальная линия разделения 1 */}
{/* Средняя левая секция */}
2
{/* Горизонтальная линия разделения 2 */}
{/* Нижняя левая секция */}
3
), }, { id: "split-1-3-bottom-landscape", split: "custom", resizable: true, screens: 4, render: () => (
{/* Верхняя секция */}
1
{/* Горизонтальная линия разделения */}
{/* Нижняя левая секция */}
2
{/* Вертикальная линия разделения 1 */}
{/* Нижняя средняя секция */}
3
{/* Вертикальная линия разделения 2 */}
{/* Нижняя правая секция */}
4
), }, { id: "split-3-1-landscape", split: "custom", resizable: true, screens: 4, render: () => (
{/* Верхняя левая секция */}
1
{/* Вертикальная линия разделения 1 */}
{/* Верхняя средняя секция */}
2
{/* Вертикальная линия разделения 2 */}
{/* Верхняя правая секция */}
3
{/* Горизонтальная линия разделения */}
{/* Нижняя секция */}
4
), }, // Шаблон с 6 экранами (3x2) { id: "split-grid-3x2-landscape", split: "grid", resizable: true, screens: 6, render: () => (
{Array.from({ length: 6 }).map((_, index) => { const row = Math.floor(index / 3) const col = index % 3 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2].map((i) => (
))} {/* Горизонтальная линия */}
), }, // Шаблон с 9 экранами (3x3) { id: "split-grid-3x3-landscape", split: "grid", resizable: true, screens: 9, render: () => (
{Array.from({ length: 9 }).map((_, index) => { const row = Math.floor(index / 3) const col = index % 3 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2].map((i) => (
))}
), }, // Шаблон с 10 экранами (5x2) для широкоэкранного формата { id: "split-grid-5x2-landscape", split: "grid", resizable: true, screens: 10, render: () => (
{/* Верхний ряд */} {/* Верхний первый экран */}
1
{/* Верхний второй экран */}
2
{/* Верхний третий экран */}
3
{/* Верхний четвертый экран */}
4
{/* Верхний пятый экран */}
5
{/* Нижний ряд */} {/* Нижний первый экран */}
6
{/* Нижний второй экран */}
7
{/* Нижний третий экран */}
8
{/* Нижний четвертый экран */}
9
{/* Нижний пятый экран */}
10
{/* Горизонтальная линия разделения */}
{/* Вертикальные линии разделения */}
), }, // Шаблон с 12 экранами (4x3) для широкоэкранного формата { id: "split-grid-4x3-landscape", split: "grid", resizable: true, screens: 12, render: () => (
{Array.from({ length: 12 }).map((_, index) => { const row = Math.floor(index / 4) const col = index % 4 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2].map((i) => (
))}
), }, // Шаблон с 12 экранами (3x4) для широкоэкранного формата { id: "split-grid-3x4-landscape", split: "grid", resizable: true, screens: 12, render: () => (
{Array.from({ length: 12 }).map((_, index) => { const row = Math.floor(index / 3) const col = index % 3 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2, 3].map((i) => (
))}
), }, // Шаблон с 25 экранами (5x5) для широкоэкранного формата { id: "split-grid-5x5-landscape", split: "grid", resizable: true, screens: 25, render: () => (
{/* Создаем сетку 5x5 */} {Array.from({ length: 25 }).map((_, index) => { const rowIndex = Math.floor(index / 5) const colIndex = index % 5 const cellIndex = index + 1 const isEvenCell = (rowIndex + colIndex) % 2 === 0 return (
{cellIndex}
) })} {/* Горизонтальные линии разделения */} {Array.from({ length: 4 }).map((_, i) => (
))} {/* Вертикальные линии разделения */} {Array.from({ length: 4 }).map((_, i) => (
))}
), }, // Шаблон с 16 экранами (4x4) для широкоэкранного формата { id: "split-grid-4x4-landscape", split: "grid", resizable: true, screens: 16, render: () => (
{Array.from({ length: 16 }).map((_, index) => { const row = Math.floor(index / 4) const col = index % 4 const isEven = (row + col) % 2 === 0 return (
{index + 1}
) })}
{/* Вертикальные линии */} {[1, 2, 3].map((i) => (
))} {/* Горизонтальные линии */} {[1, 2, 3].map((i) => (
))}
), }, // Шаблон с 8 экранами (4x2) { id: "split-grid-4x2-landscape", split: "custom", resizable: true, screens: 8, render: () => (
{/* Верхний ряд */} {/* Верхний первый экран */}
1
{/* Верхний второй экран */}
2
{/* Верхний третий экран */}
3
{/* Верхний четвертый экран */}
4
{/* Нижний ряд */} {/* Нижний первый экран */}
5
{/* Нижний второй экран */}
6
{/* Нижний третий экран */}
7
{/* Нижний четвертый экран */}
8
{/* Горизонтальная линия разделения */}
{/* Вертикальная линия разделения 1 */}
{/* Вертикальная линия разделения 2 */}
{/* Вертикальная линия разделения 3 */}
), }, ]