diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 9ab3951..d2cad23 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -48,6 +48,7 @@ export default function GalleryPage() { SALSAVIVA GALLERY @@ -67,7 +68,10 @@ export default function GalleryPage() {
- + Whant more? Follow us on social media! diff --git a/components/shared/AppearInViewport/AppearInViewport.tsx b/components/shared/AppearInViewport/AppearInViewport.tsx index 21df1f1..e88a3ab 100644 --- a/components/shared/AppearInViewport/AppearInViewport.tsx +++ b/components/shared/AppearInViewport/AppearInViewport.tsx @@ -1,21 +1,24 @@ 'use client'; import {HTMLMotionProps, Variants, m} from 'framer-motion'; -import {ReactNode, forwardRef} from 'react'; +import {forwardRef} from 'react'; import TransitionDuration from '@/lib/framerMotion/TransitionDuration'; // eslint-disable-next-line jsdoc/require-jsdoc -type SafeHTMLMotionProps = Omit< - HTMLMotionProps<'div'>, +type As = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + +// eslint-disable-next-line jsdoc/require-jsdoc +type SafeHTMLMotionProps = Omit< + HTMLMotionProps, 'initial' | 'whileInView' | 'viewport' | 'ref' >; /** * Props. */ -type AppearOnScreenProps = { - children: ReactNode; -} & SafeHTMLMotionProps; +type AppearOnScreenProps = { + as?: T; +} & SafeHTMLMotionProps; const defaultVariants: Variants = { visible: {opacity: 1}, @@ -29,11 +32,13 @@ const defaultTransition = {duration: TransitionDuration.MEDIUM, delay: 0.3}; * @returns React component. */ const AppearInViewport = forwardRef(function AppearInViewport( - {children, variants, transition, ...rest}, + {children, variants, transition, as = 'div', ...rest}, ref, ) { + const Component = m[as]; + return ( - (functio {...rest} > {children} - + ); });