import { Transition } from '@headlessui/react' import Head from 'next/head' import { useEffect, useRef, useState } from 'react' import { classNames } from '../../../utils/class-names' import { match } from '../../../utils/match' export default function Shell() { return ( <> Transition Component - Full Page Transition
) } function usePrevious(value: T) { let ref = useRef(value) useEffect(() => { ref.current = value }, [value]) return ref.current } enum Direction { Forwards = ' -> ', Backwards = ' <- ', } let pages = ['Dashboard', 'Team', 'Projects', 'Calendar', 'Reports'] let colors = [ 'bg-gradient-to-r from-teal-400 to-blue-400', 'bg-gradient-to-r from-blue-400 to-orange-400', 'bg-gradient-to-r from-orange-400 to-purple-400', 'bg-gradient-to-r from-purple-400 to-green-400', 'bg-gradient-to-r from-green-400 to-teal-400', ] function FullPageTransition() { let [activePage, setActivePage] = useState(0) let previousPage = usePrevious(activePage) let direction = activePage > previousPage ? Direction.Forwards : Direction.Backwards let transitions = match(direction, { [Direction.Forwards]: { enter: 'transition transform ease-in-out duration-500', enterFrom: 'translate-x-full', enterTo: 'translate-x-0', leave: 'transition transform ease-in-out duration-500', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-full', }, [Direction.Backwards]: { enter: 'transition transform ease-in-out duration-500', enterFrom: '-translate-x-full', enterTo: 'translate-x-0', leave: 'transition transform ease-in-out duration-500', leaveFrom: 'translate-x-0', leaveTo: 'translate-x-full', }, }) return (

{pages[activePage]}

{pages.map((page, i) => ( {page} page content ))}
) }