-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(landing): carousel of preview boards (#1639)
* feat(landing): add carousel of preview-boards * feat(landing): update preview boards * style(landing): add light and dark themes to previewboards * style(landing): add fade animation to tavla carousel * style(landing): make previewboards wider in mobile-view * chore(landing): add posthog to carousel buttons * fix(landing): change arrow icons to be buttons and remove unneccessary divs * fix(landing): keyboard navigation and voiceover of preview boards * chore(landing): add aria-label to button group
- Loading branch information
1 parent
59658f1
commit 23eea24
Showing
3 changed files
with
217 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,119 @@ | ||
| 'use client' | ||
|
|
||
| import { IconButton } from '@entur/button' | ||
| import { LeftArrowIcon, RightArrowIcon } from '@entur/icons' | ||
| import { Board } from 'Board/scenarios/Board' | ||
| import { usePostHog } from 'posthog-js/react' | ||
| import { useEffect, useState } from 'react' | ||
| import { TBoard } from 'types/settings' | ||
|
|
||
| const CarouselIndicators = ({ | ||
| boards, | ||
| activeIndex, | ||
| onClick, | ||
| }: { | ||
| boards: TBoard[] | ||
| activeIndex: number | ||
| onClick: (index: number) => void | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className="flex flex-row md:space-x-3 space-x-5 justify-center mt-4" | ||
| aria-label="Knapper for å bytte mellom avgangstavler" | ||
| > | ||
| {boards.map((_, index) => ( | ||
| <button | ||
| key={index} | ||
| className={`md:w-5 md:h-5 w-6 h-6 rounded-full bottom-5 ${ | ||
| index === activeIndex ? 'bg-blue' : 'bg-tertiary' | ||
| }`} | ||
| onClick={() => onClick(index)} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function Preview({ boards }: { boards: TBoard[] }) { | ||
| const [boardIndex, setBoardIndex] = useState(0) | ||
| const [fade, setFade] = useState(true) | ||
| const posthog = usePostHog() | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(() => { | ||
| setBoardIndex((boardIndex + 1) % boards.length) | ||
| }, 10000) | ||
| setFade(false) | ||
| setTimeout(() => { | ||
| setBoardIndex((boardIndex + 1) % boards.length) | ||
| setFade(true) | ||
| }, 500) | ||
| }, 4500) | ||
| return () => clearInterval(interval) | ||
| }, [boardIndex, boards]) | ||
|
|
||
| const nextSlide = () => { | ||
| posthog.capture('CAROUSEL_ARROW_BTN') | ||
| setBoardIndex((prevIndex) => | ||
| prevIndex === boards.length - 1 ? 0 : prevIndex + 1, | ||
| ) | ||
| } | ||
| const prevSlide = () => { | ||
| posthog.capture('CAROUSEL_ARROW_BTN') | ||
| setBoardIndex((prevIndex) => | ||
| prevIndex === 0 ? boards.length - 1 : prevIndex - 1, | ||
| ) | ||
| } | ||
|
|
||
| const goToSlide = (index: number) => { | ||
| posthog.capture('CAROUSEL_INDICATOR_BTNS') | ||
| setBoardIndex(index) | ||
| } | ||
|
|
||
| const currentBoard = boards[boardIndex] ?? undefined | ||
| if (!currentBoard) return null | ||
| return <Board board={currentBoard} style={{ display: 'flex' }} /> | ||
| return ( | ||
| <div className="xl:w-1/2 h-[50vh] overflow-hidden rounded-2xl py-10 w-full"> | ||
| <div className="flex flex-row h-[40vh]"> | ||
| <div className="my-auto hidden md:block ml-2"> | ||
| <IconButton | ||
| onClick={prevSlide} | ||
| aria-label="Vis forrige tavle" | ||
| > | ||
| <LeftArrowIcon /> | ||
| </IconButton> | ||
| </div> | ||
| <div | ||
| className="w-full mx-auto" | ||
| data-theme={currentBoard.theme ?? 'dark'} | ||
| > | ||
| <div | ||
| aria-label="Eksempel på avgangstavler" | ||
| className={`w-full h-full transform transition-all duration-500 ease-in-out p-2 ${ | ||
| fade ? 'opacity-100' : 'opacity-0' | ||
| }`} | ||
| > | ||
| <Board | ||
| aria-hidden | ||
| board={currentBoard} | ||
| style={{ display: 'flex' }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="my-auto hidden md:block mr-2"> | ||
| <IconButton | ||
| onClick={nextSlide} | ||
| aria-label="Vis neste tavle" | ||
| > | ||
| <RightArrowIcon /> | ||
| </IconButton> | ||
| </div> | ||
| </div> | ||
|
|
||
| <CarouselIndicators | ||
| boards={boards} | ||
| activeIndex={boardIndex} | ||
| onClick={goToSlide} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
| export { Preview } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters