From d9dc34882e3d8b0c66ae7c6b87ba38b3b9375656 Mon Sep 17 00:00:00 2001
From: ukorvl <ukorotovskiy@gmail.com>
Date: Thu, 7 Sep 2023 20:55:28 +0400
Subject: [PATCH] add as AppearInViewport prop #72

---
 app/gallery/page.tsx                          |  6 ++++-
 .../AppearInViewport/AppearInViewport.tsx     | 23 +++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

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() {
         <AppearInViewport
           className={titleCn}
           transition={{delay: 0.5, duration: TransitionDuration.LONG}}
+          as="h1"
         >
           SALSAVIVA GALLERY
         </AppearInViewport>
@@ -67,7 +68,10 @@ export default function GalleryPage() {
       </div>
       <Gallery />
       <div className={galleryTextItem}>
-        <AppearInViewport className={subTitleCn}>
+        <AppearInViewport
+          className={subTitleCn}
+          as="h3"
+        >
           Whant more? Follow us on social media!
         </AppearInViewport>
         <SocialIcons iconSize="2x" />
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<T extends As = As> = Omit<
+  HTMLMotionProps<T>,
   'initial' | 'whileInView' | 'viewport' | 'ref'
 >;
 
 /**
  * Props.
  */
-type AppearOnScreenProps = {
-  children: ReactNode;
-} & SafeHTMLMotionProps;
+type AppearOnScreenProps<T extends As = As> = {
+  as?: T;
+} & SafeHTMLMotionProps<T>;
 
 const defaultVariants: Variants = {
   visible: {opacity: 1},
@@ -29,11 +32,13 @@ const defaultTransition = {duration: TransitionDuration.MEDIUM, delay: 0.3};
  * @returns React component.
  */
 const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(function AppearInViewport(
-  {children, variants, transition, ...rest},
+  {children, variants, transition, as = 'div', ...rest},
   ref,
 ) {
+  const Component = m[as];
+
   return (
-    <m.div
+    <Component
       initial="hidden"
       whileInView="visible"
       viewport={{once: true}}
@@ -43,7 +48,7 @@ const AppearInViewport = forwardRef<HTMLDivElement, AppearOnScreenProps>(functio
       {...rest}
     >
       {children}
-    </m.div>
+    </Component>
   );
 });