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