Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

Browse source
This commit is contained in:
Matthew Penner 2021-07-22 11:15:27 -06:00
parent 23de3d68f3
commit 361596e051
40 changed files with 180 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

11
resources/scripts/components/elements/Fade.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import tw from 'twin.macro';
import styled from 'styled-components/macro';
import tw, { styled } from 'twin.macro';
import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
@ -11,19 +10,19 @@ const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit, .fade-appear {
will-change: opacity;
}
.fade-enter, .fade-appear {
${tw`opacity-0`};
&.fade-enter-active, &.fade-appear-active {
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
}
}
.fade-exit {
${tw`opacity-100`};
&.fade-exit-active {
${tw`opacity-0 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;