Shared useinview

src/components/animated-image.tsx

@@ -1,38 +1,38 @@
 // src/components/AnimatedImage.tsx
-import React, { ImgHTMLAttributes, useRef } from 'react';
+'use client';
+import React from 'react';
 import useInView from '@/hooks/useInView';
+import Image, { StaticImageData } from 'next/image';
 
-interface AnimatedImageProps extends ImgHTMLAttributes<HTMLImageElement> {
-  src: string;
+interface AnimatedImageProps {
+  src: string | StaticImageData;
   alt: string;
   className?: string;
-  threshold?: number; // New prop
+  threshold?: number;
+  // Additional props if needed
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
 }
 
-const AnimatedImage: React.FC<AnimatedImageProps> = ({
+export function AnimatedImage({
   src,
   alt,
   className = '',
   threshold,
   ...props
-}) => {
-  const ref = useRef<HTMLImageElement>(null);
-  const isVisible = useInView(ref, {
+}: AnimatedImageProps) {
+  const [ref, isVisible] = useInView({
     threshold: threshold ?? 0.1,
     triggerOnce: true,
   });
 
   return (
-    <img
+    <Image
       ref={ref}
       src={src}
       alt={alt}
-      className={`opacity-0 transform scale-95 transition-opacity transition-transform duration-700 ease-out ${
-        isVisible ? 'opacity-100 scale-100' : ''
-      } ${className}`}
+      className={`zoom ${isVisible ? 'post' : 'pre'} ${className}`}
       {...props}
     />
   );
-};
-
-export default AnimatedImage;
+}

src/components/animated-text.tsx

@@ -1,5 +1,5 @@
-// src/components/AnimatedText.tsx
-import { ReactNode, useRef } from 'react';
+'use client';
+import { ReactNode } from 'react';
 import useInView from '@/hooks/useInView';
 
 interface AnimatedTextProps {
@@ -7,7 +7,7 @@ interface AnimatedTextProps {
   className?: string;
   startClass?: string;
   finishClass?: string;
-  threshold?: number; // New prop
+  threshold?: number;
 }
 
 export function AnimatedText({
@@ -17,8 +17,7 @@ export function AnimatedText({
   finishClass,
   threshold,
 }: AnimatedTextProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const isVisible = useInView(ref, {
+  const [ref, isVisible] = useInView({
     threshold: threshold ?? 0.1,
     triggerOnce: true,
   });