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}
-
+
);
});