antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Begin support for container queries with css modules

Browse source
This commit is contained in:
jeffvli 2023-07-23 05:18:08 -07:00
parent 84bec824f2
commit 0a13d047bb
3 changed files with 15 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/renderer/features/shared/components/animated-page.module.scss Normal file
View file

@ -0,0 +1,9 @@
.animated-page {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}

16
src/renderer/features/shared/components/animated-page.tsx
View file

@ -1,21 +1,12 @@
import type { ReactNode, Ref } from 'react';
import { forwardRef } from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
import styles from './animated-page.module.scss';
interface AnimatedPageProps {
children: ReactNode;
}
const StyledAnimatedPage = styled(motion.main)`
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
`;
const variants = {
animate: { opacity: 1 },
exit: { opacity: 0 },
@ -25,16 +16,17 @@ const variants = {
export const AnimatedPage = forwardRef(
({ children }: AnimatedPageProps, ref: Ref<HTMLDivElement>) => {
return (
<StyledAnimatedPage
<motion.main
ref={ref}
animate="animate"
className={styles.animatedPage}
exit="exit"
initial="initial"
transition={{ duration: 0.3, ease: 'easeIn' }}
variants={variants}
>
{children}
</StyledAnimatedPage>
</motion.main>
);
},
);