misc_pterodactyl-panel/resources/scripts/TransitionRouter.tsx

31 lines
833 B
TypeScript
Raw Normal View History

import React from 'react';
import { Route } from 'react-router';
2020-07-04 16:46:26 +00:00
import { SwitchTransition } from 'react-transition-group';
import Fade from '@/components/elements/Fade';
import styled from 'styled-components/macro';
import tw from 'twin.macro';
const StyledSwitchTransition = styled(SwitchTransition)`
${tw`relative`};
& section {
${tw`absolute w-full top-0 left-0`};
}
`;
2020-07-03 21:19:05 +00:00
const TransitionRouter: React.FC = ({ children }) => (
<Route
render={({ location }) => (
2020-07-04 16:46:26 +00:00
<StyledSwitchTransition>
<Fade timeout={150} key={location.key} in appear unmountOnExit>
<section>
{children}
</section>
2020-07-04 16:46:26 +00:00
</Fade>
</StyledSwitchTransition>
)}
/>
);
2020-07-03 21:19:05 +00:00
export default TransitionRouter;