Турнирная сетка плей-офф, в которой одновременно видны три соседних раунда. Карточки матчей показывают дату, флаги, счёт и серию пенальти, проигравшая сторона приглушена, а победитель отмечен треугольником.
Стрелки в шапке листают сетку на раунд вперёд или назад: колонки и заголовки уезжают в сторону, карточки следующих раундов выстраиваются по центрам своих пар, а коленчатые соединители растягиваются и сжимаются вслед за ними. Внизу идут живые часы в выбранном часовом поясе.
Скопируйте эти файлы в components/knockout-bracket/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { KnockoutBracket, ROUNDS } from "@/components/knockout-bracket/knockout-bracket";
export function Playoffs() {
return <KnockoutBracket rounds={ROUNDS} initialRound={2} columnGap={48} />;
}roundsРаунды с названиями и матчами
Тип Round[]
initialRound?Раунд, с которого начинается просмотр
Тип number·По умолчанию 1
footer?Подвал под сеткой; null скрывает его
Тип ReactNode·По умолчанию <LiveClock />
duration?Длительность перестройки в секундах
Тип number·По умолчанию 0.5
columnGap?Зазор между раундами в пикселях
Тип number·По умолчанию 40
rowGap?Зазор между матчами в пикселях
Тип number·По умолчанию 32
cardRadius?Скругление карточек в пикселях
Тип number·По умолчанию 16
cardColor?Цвет фона карточек
Тип string
className?Классы корневого блока
Тип string
LiveClock принимает timeZone (по умолчанию "Asia/Singapore") и zoneLabel (по умолчанию "UTC+8").