strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply prefers reduced motion to modals

Browse Source
This commit is contained in:
Sam Becker 2023-11-11 11:53:36 -06:00
parent 35183b7b98
commit b15b0ed56f
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Modal.tsx
View File

@ -7,6 +7,7 @@ import useClickInsideOutside from '@/utility/useClickInsideOutside';
import { useRouter } from 'next/navigation';
import AnimateItems from './AnimateItems';
import { PATH_ROOT } from '@/site/paths';
import usePrefersReducedMotion from '@/utility/usePrefersReducedMotion';
export default function Modal({
onClosePath,
@ -17,6 +18,8 @@ export default function Modal({
}) {
const router = useRouter();
const prefersReducedMotion = usePrefersReducedMotion();
const contentRef = useRef<HTMLDivElement>(null);
const [htmlElements, setHtmlElements] = useState<HTMLDivElement[]>([]);
@ -41,7 +44,9 @@ export default function Modal({
'fixed inset-0 z-50 flex items-center justify-center',
'bg-black',
)}
initial={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
initial={!prefersReducedMotion
? { backgroundColor: 'rgba(0, 0, 0, 0)' }
: false}
animate={{ backgroundColor: 'rgba(0, 0, 0, 0.80)' }}
transition={{ duration: 0.3, easing: 'easeOut' }}
>