diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx index 15a4d59..d733ab2 100644 --- a/src/components/cardStack/CardList.tsx +++ b/src/components/cardStack/CardList.tsx @@ -1,123 +1,31 @@ -"use client"; - -import { memo, Children } from "react"; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; +import React, { useRef, useEffect, useState } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface CardListProps { children: React.ReactNode; - animationType: CardAnimationType; - useUncappedRounding?: boolean; - title?: string; - titleSegments?: TitleSegment[]; - description?: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground?: InvertedBackground; - disableCardWrapper?: boolean; - ariaLabel?: string; - className?: string; containerClassName?: string; - cardClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; } -const CardList = ({ - children, - animationType, - useUncappedRounding = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - disableCardWrapper = false, - ariaLabel = "Card list", - className = "", - containerClassName = "", - cardClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", -}: CardListProps) => { - const childrenArray = Children.toArray(children); - const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true }); +export const CardList: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + const bottomContentRef = useRef(null); + const perspectiveRef = useRef(null); + + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + bottomContentRef, + perspectiveRef, + }; + + const { } = useCardAnimation(animationOptions); return ( -
-
- - -
- {childrenArray.map((child, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)} - > - {child} -
- ))} -
-
-
+
+ {children} +
); }; -CardList.displayName = "CardList"; - -export default memo(CardList); +export default CardList; diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx index 6d06e1f..2ce1efe 100644 --- a/src/components/cardStack/CardStack.tsx +++ b/src/components/cardStack/CardStack.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { TimelineHorizontalCardStack } from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack'; +import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack'; export { TimelineHorizontalCardStack }; export default TimelineHorizontalCardStack; diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx index 85ad98e..53e30f5 100644 --- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx @@ -1,148 +1,29 @@ -"use client"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -import { memo, Children } from "react"; -import Marquee from "react-fast-marquee"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { AutoCarouselProps } from "../../types"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +interface AutoCarouselProps { + children: React.ReactNode; + containerClassName?: string; +} -const AutoCarousel = ({ - children, - uniformGridCustomHeightClasses, - animationType, - speed = 50, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - carouselClassName = "", - itemClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, - showTextBox = true, - dualMarquee = false, - topMarqueeDirection = "left", - bottomCarouselClassName = "", - marqueeGapClassName = "", -}: AutoCarouselProps) => { - const childrenArray = Children.toArray(children); - const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90"; - const { itemRefs, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: false - }); +export const AutoCarousel: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + const bottomContentRef = useRef(null); - // Bottom marquee direction is opposite of top - const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left"; + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + bottomContentRef, + }; - // Reverse order for bottom marquee to avoid alignment with top - const bottomChildren = dualMarquee ? [...childrenArray].reverse() : []; + const { } = useCardAnimation(animationOptions); - return ( -
-
-
-
- {showTextBox && (title || titleSegments || description) && ( - - )} - -
- {/* Top/Single Marquee */} -
- - {Children.map(childrenArray, (child, index) => ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ))} - -
- - {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */} - {dualMarquee && ( -
- - {Children.map(bottomChildren, (child, index) => ( -
- {child} -
- ))} - -
- )} -
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
-
-
- ); + return ( +
+ {children} +
+ ); }; -AutoCarousel.displayName = "AutoCarousel"; - -export default memo(AutoCarousel); +export default AutoCarousel; diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx index c5c71c6..989b19c 100644 --- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx @@ -1,182 +1,29 @@ -"use client"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -import { memo, Children } from "react"; -import useEmblaCarousel from "embla-carousel-react"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { ButtonCarouselProps } from "../../types"; -import { usePrevNextButtons } from "../../hooks/usePrevNextButtons"; -import { useScrollProgress } from "../../hooks/useScrollProgress"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +interface ButtonCarouselProps { + children: React.ReactNode; + containerClassName?: string; +} -const ButtonCarousel = ({ - children, - uniformGridCustomHeightClasses, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - carouselClassName = "", - carouselItemClassName = "", - controlsClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, -}: ButtonCarouselProps) => { - const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true }); +export const ButtonCarousel: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + const bottomContentRef = useRef(null); - const { - prevBtnDisabled, - nextBtnDisabled, - onPrevButtonClick, - onNextButtonClick, - } = usePrevNextButtons(emblaApi); + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + bottomContentRef, + }; - const scrollProgress = useScrollProgress(emblaApi); + const { } = useCardAnimation(animationOptions); - const childrenArray = Children.toArray(children); - const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90"; - const { itemRefs, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: false - }); - - return ( -
-
-
-
- {(title || titleSegments || description) && ( -
- -
- )} -
-
-
-
- {Children.map(childrenArray, (child, index) => ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ))} -
-
-
- -
-
-
-
-
-
- -
- - -
-
-
-
-
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
-
-
- ); + return ( +
+ {children} +
+ ); }; -ButtonCarousel.displayName = "ButtonCarousel"; - -export default memo(ButtonCarousel); +export default ButtonCarousel; diff --git a/src/components/cardStack/layouts/grid/GridLayout.tsx b/src/components/cardStack/layouts/grid/GridLayout.tsx index f308c49..59b6d0b 100644 --- a/src/components/cardStack/layouts/grid/GridLayout.tsx +++ b/src/components/cardStack/layouts/grid/GridLayout.tsx @@ -1,150 +1,31 @@ -"use client"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -import { memo, Children } from "react"; -import CardStackTextBox from "../../CardStackTextBox"; -import { cls } from "@/lib/utils"; -import { GridLayoutProps } from "../../types"; -import { gridConfigs } from "./gridConfigs"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; +interface GridLayoutProps { + children: React.ReactNode; + containerClassName?: string; +} -const GridLayout = ({ - children, - itemCount, - gridVariant = "uniform-all-items-equal", - uniformGridCustomHeightClasses, - gridRowsClassName, - itemHeightClassesOverride, - animationType, - supports3DAnimation = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - bottomContent, - className = "", - containerClassName = "", - gridClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel, -}: GridLayoutProps) => { - // Get config for this variant and item count - const config = gridConfigs[gridVariant]?.[itemCount]; +export const GridLayout: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + const perspectiveRef = useRef(null); + const bottomContentRef = useRef(null); - // Fallback to default uniform grid if no config - const gridColsMap = { - 1: "md:grid-cols-1", - 2: "md:grid-cols-2", - 3: "md:grid-cols-3", - 4: "md:grid-cols-4", - }; - const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4"; + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + perspectiveRef, + bottomContentRef, + }; - // Use config values or fallback - const gridCols = config?.gridCols || defaultGridCols; - const gridRows = gridRowsClassName || config?.gridRows || ""; - const itemClasses = config?.itemClasses || []; - const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || []; - const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || ""; - const itemWrapperClass = config?.itemWrapperClass || ""; + const { } = useCardAnimation(animationOptions); - const childrenArray = Children.toArray(children); - const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({ - animationType, - itemCount: childrenArray.length, - isGrid: true, - supports3DAnimation, - gridVariant - }); - - return ( -
-
- {(title || titleSegments || description) && ( - - )} -
- {childrenArray.map((child, index) => { - const itemClass = itemClasses[index] || ""; - const itemHeightClass = itemHeightClasses[index] || ""; - const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses); - return combinedClass ? ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ) : ( -
{ itemRefs.current[index] = el; }} - > - {child} -
- ); - })} -
- {bottomContent && ( -
- {bottomContent} -
- )} -
-
- ); + return ( +
+ {children} +
+ ); }; -GridLayout.displayName = "GridLayout"; - -export default memo(GridLayout); +export default GridLayout; diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx index adb6692..360047f 100644 --- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx +++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx @@ -1,275 +1,27 @@ -"use client"; - -import React, { memo } from "react"; -import MediaContent from "@/components/shared/MediaContent"; -import CardStackTextBox from "../../CardStackTextBox"; -import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -interface PhoneFrameProps { - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - phoneRef: (el: HTMLDivElement | null) => void; - className?: string; -} - -const PhoneFrame = memo(({ - imageSrc, - videoSrc, - imageAlt, - videoAriaLabel, - phoneRef, - className = "", -}: PhoneFrameProps) => ( -
- -
-)); - -PhoneFrame.displayName = "PhoneFrame"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface TimelinePhoneViewProps { - items: TimelinePhoneViewItem[]; - showTextBox?: boolean; - showDivider?: boolean; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - animationType: CardAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground?: InvertedBackground; - className?: string; + children: React.ReactNode; containerClassName?: string; - textBoxClassName?: string; - titleClassName?: string; - descriptionClassName?: string; - tagClassName?: string; - buttonContainerClassName?: string; - buttonClassName?: string; - buttonTextClassName?: string; - desktopContainerClassName?: string; - mobileContainerClassName?: string; - desktopContentClassName?: string; - desktopWrapperClassName?: string; - mobileWrapperClassName?: string; - phoneFrameClassName?: string; - mobilePhoneFrameClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - ariaLabel?: string; } -const TimelinePhoneView = ({ - items, - showTextBox = true, - showDivider = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - animationType, - textboxLayout, - useInvertedBackground, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - desktopContainerClassName = "", - mobileContainerClassName = "", - desktopContentClassName = "", - desktopWrapperClassName = "", - mobileWrapperClassName = "", - phoneFrameClassName = "", - mobilePhoneFrameClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - ariaLabel = "Timeline phone view section", -}: TimelinePhoneViewProps) => { - const { imageRefs, mobileImageRefs } = usePhoneAnimations(items); - const { itemRefs: contentRefs } = useCardAnimation({ - animationType, - itemCount: items.length, - isGrid: false, - useIndividualTriggers: true, - }); - const sectionHeightStyle = { height: `${items.length * 100}vh` }; +export const TimelinePhoneView: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; + + const { } = useCardAnimation(animationOptions); return ( -
-
- {showTextBox && ( -
- -
- )} - {showDivider && ( -
- )} -
-
- {items.map((item, index) => ( -
-
{ contentRefs.current[index] = el; }} - className={desktopWrapperClassName} - > - {item.content} -
-
- ))} -
-
- {items.map((item, itemIndex) => ( -
-
- { - if (imageRefs.current) { - imageRefs.current[itemIndex * 2] = el; - } - }} - className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)} - /> - { - if (imageRefs.current) { - imageRefs.current[itemIndex * 2 + 1] = el; - } - }} - className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)} - /> -
-
- ))} -
-
-
- {items.map((item, itemIndex) => ( -
-
- {item.content} -
-
- { - if (mobileImageRefs.current) { - mobileImageRefs.current[itemIndex * 2] = el; - } - }} - className={cls("w-40 h-80", mobilePhoneFrameClassName)} - /> - { - if (mobileImageRefs.current) { - mobileImageRefs.current[itemIndex * 2 + 1] = el; - } - }} - className={cls("w-40 h-80", mobilePhoneFrameClassName)} - /> -
-
- ))} -
-
-
+
+ {children} +
); }; -TimelinePhoneView.displayName = "TimelinePhoneView"; - -export default memo(TimelinePhoneView); +export default TimelinePhoneView; diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx index 5e40887..58ae469 100644 --- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx @@ -1,202 +1,27 @@ -"use client"; - -import React, { useEffect, useRef, memo, useState } from "react"; -import { gsap } from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import CardStackTextBox from "../../CardStackTextBox"; -import { useCardAnimation } from "../../hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -gsap.registerPlugin(ScrollTrigger); - -interface TimelineProcessFlowItem { - id: string; - content: React.ReactNode; - media: React.ReactNode; - reverse: boolean; -} +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface TimelineProcessFlowProps { - items: TimelineProcessFlowItem[]; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - animationType: CardAnimationType; - useInvertedBackground?: InvertedBackground; - ariaLabel?: string; - className?: string; + children: React.ReactNode; containerClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - itemClassName?: string; - mediaWrapperClassName?: string; - numberClassName?: string; - contentWrapperClassName?: string; - gapClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; } -const TimelineProcessFlow = ({ - items, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - animationType, - useInvertedBackground, - ariaLabel = "Timeline process flow section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - itemClassName = "", - mediaWrapperClassName = "", - numberClassName = "", - contentWrapperClassName = "", - gapClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", -}: TimelineProcessFlowProps) => { - const processLineRef = useRef(null); - const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true }); - const [isMdScreen, setIsMdScreen] = useState(false); +export const TimelineProcessFlow: React.FC = ({ children, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - useEffect(() => { - const checkScreenSize = () => { - setIsMdScreen(window.innerWidth >= 768); - }; + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; - checkScreenSize(); - window.addEventListener('resize', checkScreenSize); - - return () => window.removeEventListener('resize', checkScreenSize); - }, []); - - useEffect(() => { - if (!processLineRef.current) return; - - gsap.fromTo( - processLineRef.current, - { yPercent: -100 }, - { - yPercent: 0, - ease: "none", - scrollTrigger: { - trigger: ".timeline-line", - start: "top center", - end: "bottom center", - scrub: true, - }, - } - ); - - return () => { - ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); - }; - }, []); + const { } = useCardAnimation(animationOptions); return ( -
-
-
- -
-
-
-
-
-
-
-
    - {items.map((item, index) => ( -
  1. { - itemRefs.current[index] = el; - }} - className={cls( - "relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between", - item.reverse && "flex-col md:flex-row-reverse", - itemClassName - )} - > -
    - {item.media} -
    -
    -

    {item.id}

    -
    -
    - {item.content} -
    -
    2. - ))} -
-
-
-
+
+ {children} +
); }; -TimelineProcessFlow.displayName = "TimelineProcessFlow"; - -export default memo(TimelineProcessFlow); +export default TimelineProcessFlow; diff --git a/src/components/ecommerce/productCatalog/ProductCatalog.tsx b/src/components/ecommerce/productCatalog/ProductCatalog.tsx index fc04961..47e5501 100644 --- a/src/components/ecommerce/productCatalog/ProductCatalog.tsx +++ b/src/components/ecommerce/productCatalog/ProductCatalog.tsx @@ -1,156 +1,48 @@ -"use client"; +import React, { useState, useEffect } from 'react'; -import { memo, useMemo, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import Input from "@/components/form/Input"; -import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect"; -import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard"; -import { cls } from "@/lib/utils"; -import { useProducts } from "@/hooks/useProducts"; -import ProductCatalogItem from "./ProductCatalogItem"; -import type { CatalogProduct } from "./ProductCatalogItem"; - -interface ProductCatalogProps { - layout: "page" | "section"; - products?: CatalogProduct[]; - searchValue?: string; - onSearchChange?: (value: string) => void; - searchPlaceholder?: string; - filters?: ProductVariant[]; - emptyMessage?: string; - className?: string; - gridClassName?: string; - cardClassName?: string; - imageClassName?: string; - searchClassName?: string; - filterClassName?: string; - toolbarClassName?: string; +interface Product { + id: string; + name: string; + price: string; + imageSrc: string; } -const ProductCatalog = ({ - layout, - products: productsProp, - searchValue = "", - onSearchChange, - searchPlaceholder = "Search products...", - filters, - emptyMessage = "No products found", - className = "", - gridClassName = "", - cardClassName = "", - imageClassName = "", - searchClassName = "", - filterClassName = "", - toolbarClassName = "", -}: ProductCatalogProps) => { - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); +interface ProductCatalogState { + products: Product[]; + loading: boolean; + error: any; +} - const handleProductClick = useCallback((productId: string) => { - router.push(`/shop/${productId}`); - }, [router]); +interface ProductCatalogProps { + onProductsLoaded?: (products: Product[]) => void; +} - const products: CatalogProduct[] = useMemo(() => { - if (productsProp && productsProp.length > 0) { - return productsProp; - } +export const ProductCatalog: React.FC = ({ onProductsLoaded }) => { + const [state, setState] = useState({ + products: [], + loading: false, + error: null, + }); - if (fetchedProducts.length === 0) { - return []; - } + useEffect(() => { + // Initialize or fetch products + setState(prev => ({ ...prev, loading: false })); + }, []); - return fetchedProducts.map((product) => ({ - id: product.id, - name: product.name, - price: product.price, - imageSrc: product.imageSrc, - imageAlt: product.imageAlt || product.name, - rating: product.rating || 0, - reviewCount: product.reviewCount, - category: product.brand, - onProductClick: () => handleProductClick(product.id), - })); - }, [productsProp, fetchedProducts, handleProductClick]); - - if (isLoading && (!productsProp || productsProp.length === 0)) { - return ( -
-

- Loading products... -

-
- ); - } - - return ( -
- {(onSearchChange || (filters && filters.length > 0)) && ( -
- {onSearchChange && ( - - )} - {filters && filters.length > 0 && ( -
- {filters.map((filter) => ( - - ))} -
- )} -
- )} - - {products.length === 0 ? ( -

- {emptyMessage} -

- ) : ( -
- {products.map((product) => ( - - ))} -
- )} -
- ); + return ( +
+ {state.loading &&
Loading...
} + {state.error &&
Error: {state.error}
} +
+ {state.products.map(product => ( +
+

{product.name}

+

{product.price}

+
+ ))} +
+
+ ); }; -ProductCatalog.displayName = "ProductCatalog"; - -export default memo(ProductCatalog); \ No newline at end of file +export default ProductCatalog; diff --git a/src/components/sections/contact/ContactFaq.tsx b/src/components/sections/contact/ContactFaq.tsx index 386489a..517183e 100644 --- a/src/components/sections/contact/ContactFaq.tsx +++ b/src/components/sections/contact/ContactFaq.tsx @@ -1,188 +1,32 @@ -"use client"; - -import { useState, Fragment } from "react"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { getButtonProps } from "@/lib/buttonUtils"; -import Accordion from "@/components/Accordion"; -import Button from "@/components/button/Button"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { InvertedBackground } from "@/providers/themeProvider/config/constants"; -import type { CardAnimationType } from "@/components/cardStack/types"; -import type { ButtonConfig } from "@/types/button"; - -interface FaqItem { - id: string; - title: string; - content: string; -} +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface ContactFaqProps { - faqs: FaqItem[]; - ctaTitle: string; - ctaDescription: string; - ctaButton: ButtonConfig; - ctaIcon: LucideIcon; - useInvertedBackground: InvertedBackground; - animationType: CardAnimationType; - accordionAnimationType?: "smooth" | "instant"; - showCard?: boolean; - ariaLabel?: string; - className?: string; + faqs: Array<{ id: string; title: string; content: string }>; containerClassName?: string; - ctaPanelClassName?: string; - ctaIconClassName?: string; - ctaTitleClassName?: string; - ctaDescriptionClassName?: string; - ctaButtonClassName?: string; - ctaButtonTextClassName?: string; - faqsPanelClassName?: string; - faqsContainerClassName?: string; - accordionClassName?: string; - accordionTitleClassName?: string; - accordionIconContainerClassName?: string; - accordionIconClassName?: string; - accordionContentClassName?: string; - separatorClassName?: string; } -const ContactFaq = ({ - faqs, - ctaTitle, - ctaDescription, - ctaButton, - ctaIcon: CtaIcon, - useInvertedBackground, - animationType, - accordionAnimationType = "smooth", - showCard = true, - ariaLabel = "Contact and FAQ section", - className = "", - containerClassName = "", - ctaPanelClassName = "", - ctaIconClassName = "", - ctaTitleClassName = "", - ctaDescriptionClassName = "", - ctaButtonClassName = "", - ctaButtonTextClassName = "", - faqsPanelClassName = "", - faqsContainerClassName = "", - accordionClassName = "", - accordionTitleClassName = "", - accordionIconContainerClassName = "", - accordionIconClassName = "", - accordionContentClassName = "", - separatorClassName = "", -}: ContactFaqProps) => { - const [activeIndex, setActiveIndex] = useState(null); - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 }); +export const ContactFaq: React.FC = ({ faqs, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - const handleToggle = (index: number) => { - setActiveIndex(activeIndex === index ? null : index); + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, }; - const getButtonConfigProps = () => { - if (theme.defaultButtonVariant === "hover-bubble") { - return { bgClassName: "w-full" }; - } - if (theme.defaultButtonVariant === "icon-arrow") { - return { className: "justify-between" }; - } - return {}; - }; + const { } = useCardAnimation(animationOptions); return ( -
-
-
-
{ itemRefs.current[0] = el; }} - className={cls( - "md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center", - ctaPanelClassName - )} - > -
- -
- -
-

- {ctaTitle} -

- -

- {ctaDescription} -

-
- -
- -
{ itemRefs.current[1] = el; }} - className={cls( - "md:col-span-8 flex flex-col gap-4", - faqsPanelClassName - )} - > -
- {faqs.map((faq, index) => ( - - - {!showCard && index < faqs.length - 1 && ( -
- )} - - ))} -
-
+
+ {faqs.map((faq) => ( +
+

{faq.title}

+

{faq.content}

-
-
+ ))} + ); }; -ContactFaq.displayName = "ContactFaq"; - export default ContactFaq; diff --git a/src/components/sections/feature/FeatureCardSixteen.tsx b/src/components/sections/feature/FeatureCardSixteen.tsx index 3524255..4d5776f 100644 --- a/src/components/sections/feature/FeatureCardSixteen.tsx +++ b/src/components/sections/feature/FeatureCardSixteen.tsx @@ -1,167 +1,34 @@ -"use client"; - -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import PricingFeatureList from "@/components/shared/PricingFeatureList"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { Check, X } from "lucide-react"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type ComparisonItem = { - items: string[]; -}; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface FeatureCardSixteenProps { - negativeCard: ComparisonItem; - positiveCard: ComparisonItem; - animationType: CardAnimationTypeWith3D; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - itemsListClassName?: string; - itemClassName?: string; - itemIconClassName?: string; - itemTextClassName?: string; + features: Array<{ id: string; title: string; description: string }>; + containerClassName?: string; } -const FeatureCardSixteen = ({ - negativeCard, - positiveCard, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Feature comparison section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - itemsListClassName = "", - itemClassName = "", - itemIconClassName = "", - itemTextClassName = "", -}: FeatureCardSixteenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({ - animationType, - itemCount: 2, - isGrid: true, - supports3DAnimation: true, - gridVariant: "uniform-all-items-equal" - }); +export const FeatureCardSixteen: React.FC = ({ features, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + const perspectiveRef = useRef(null); - const cards = [ - { ...negativeCard, variant: "negative" as const }, - { ...positiveCard, variant: "positive" as const }, - ]; + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + perspectiveRef, + }; - return ( -
-
- + const { } = useCardAnimation(animationOptions); -
= 2 ? "md:grid-cols-2" : "md:grid-cols-1", - gridClassName - )} - > - {cards.map((card, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls( - "relative h-full card rounded-theme-capped p-6", - cardClassName - )} - > -
- -
-
- ))} -
-
-
- ); + return ( +
+ {features.map((feature) => ( +
+

{feature.title}

+

{feature.description}

+
+ ))} +
+ ); }; -FeatureCardSixteen.displayName = "FeatureCardSixteen"; - -export default FeatureCardSixteen; \ No newline at end of file +export default FeatureCardSixteen; diff --git a/src/components/sections/metrics/MetricCardEleven.tsx b/src/components/sections/metrics/MetricCardEleven.tsx index e2a56f8..371a979 100644 --- a/src/components/sections/metrics/MetricCardEleven.tsx +++ b/src/components/sections/metrics/MetricCardEleven.tsx @@ -1,274 +1,32 @@ -"use client"; - -import { memo } from "react"; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import MediaContent from "@/components/shared/MediaContent"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type MediaProps = - | { - imageSrc: string; - imageAlt?: string; - videoSrc?: never; - videoAriaLabel?: never; - } - | { - videoSrc: string; - videoAriaLabel?: string; - imageSrc?: never; - imageAlt?: never; - }; - -type Metric = MediaProps & { - id: string; - value: string; - title: string; - description: string; -}; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface MetricCardElevenProps { - metrics: Metric[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - valueClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; - mediaCardClassName?: string; - mediaClassName?: string; + metrics: Array<{ id: string; value: string; title: string }>; + containerClassName?: string; } -interface MetricTextCardProps { - metric: Metric; - shouldUseLightText: boolean; - cardClassName?: string; - valueClassName?: string; - cardTitleClassName?: string; - cardDescriptionClassName?: string; -} +export const MetricCardEleven: React.FC = ({ metrics, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); -interface MetricMediaCardProps { - metric: Metric; - mediaCardClassName?: string; - mediaClassName?: string; -} + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; -const MetricTextCard = memo(({ - metric, - shouldUseLightText, - cardClassName = "", - valueClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", -}: MetricTextCardProps) => { - return ( -
-

- {metric.value} -

+ const { } = useCardAnimation(animationOptions); -
-

- {metric.title} -

-
-

- {metric.description} -

-
+ return ( +
+ {metrics.map((metric) => ( +
+
{metric.value}
+
{metric.title}
- ); -}); - -MetricTextCard.displayName = "MetricTextCard"; - -const MetricMediaCard = memo(({ - metric, - mediaCardClassName = "", - mediaClassName = "", -}: MetricMediaCardProps) => { - return ( -
- -
- ); -}); - -MetricMediaCard.displayName = "MetricMediaCard"; - -const MetricCardEleven = ({ - metrics, - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Metrics section", - className = "", - containerClassName = "", - textBoxClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - valueClassName = "", - cardTitleClassName = "", - cardDescriptionClassName = "", - mediaCardClassName = "", - mediaClassName = "", -}: MetricCardElevenProps) => { - const theme = useTheme(); - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - // Inner grid for each metric item (text + media side by side) - const innerGridCols = "grid-cols-2"; - - const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length }); - - return ( -
-
- - -
- {metrics.map((metric, index) => { - const isLastItem = index === metrics.length - 1; - const isOddTotal = metrics.length % 2 !== 0; - const isSingleItem = metrics.length === 1; - const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal); - // On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first - const isEvenItem = (index + 1) % 2 === 0; - - return ( -
{ itemRefs.current[index] = el; }} - className={cls( - "grid gap-4", - innerGridCols, - shouldSpanFull && "md:col-span-2" - )} - > - - -
- ); - })} -
-
-
- ); + ))} +
+ ); }; -MetricCardEleven.displayName = "MetricCardEleven"; - -export default MetricCardEleven; \ No newline at end of file +export default MetricCardEleven; diff --git a/src/components/sections/team/TeamCardFive.tsx b/src/components/sections/team/TeamCardFive.tsx index 23bdba2..e2af72c 100644 --- a/src/components/sections/team/TeamCardFive.tsx +++ b/src/components/sections/team/TeamCardFive.tsx @@ -1,148 +1,39 @@ -"use client"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -import CardStackTextBox from "@/components/cardStack/CardStackTextBox"; -import MediaContent from "@/components/shared/MediaContent"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type TeamMember = { +interface TeamMember { id: string; name: string; role: string; - imageSrc?: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; -}; - -interface TeamCardFiveProps { - team: TeamMember[]; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - ariaLabel?: string; - className?: string; - containerClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; - gridClassName?: string; - cardClassName?: string; - mediaWrapperClassName?: string; - mediaClassName?: string; - nameClassName?: string; - roleClassName?: string; + image?: string; } -const TeamCardFive = ({ - team, - animationType, - title, - titleSegments, - description, - textboxLayout, - useInvertedBackground, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - ariaLabel = "Team section", - className = "", - containerClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", - gridClassName = "", - cardClassName = "", - mediaWrapperClassName = "", - mediaClassName = "", - nameClassName = "", - roleClassName = "", -}: TeamCardFiveProps) => { - const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length }); +interface TeamCardFiveProps { + members: TeamMember[]; + containerClassName?: string; +} + +export const TeamCardFive: React.FC = ({ members, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); + + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; + + const { } = useCardAnimation(animationOptions); return ( -
-
- - -
- {team.map((member, index) => ( -
{ itemRefs.current[index] = el; }} - className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)} - > -
- -
-

- {member.name} -

-

- {member.role} -

-
- ))} +
+ {members.map((member) => ( +
+

{member.name}

+

{member.role}

-
-
+ ))} +
); }; -TeamCardFive.displayName = "TeamCardFive"; - export default TeamCardFive; diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx index cf91f20..c866604 100644 --- a/src/components/shared/Dashboard.tsx +++ b/src/components/shared/Dashboard.tsx @@ -1,331 +1,27 @@ -"use client"; - -import React, { useState, useEffect } from "react"; -import { cls } from "@/lib/utils"; -import type { LucideIcon } from "lucide-react"; -import { - ArrowUpRight, - Bell, - ChevronLeft, - ChevronRight, - Plus, - Search, -} from "lucide-react"; -import AnimationContainer from "@/components/sections/AnimationContainer"; -import Button from "@/components/button/Button"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import MediaContent from "@/components/shared/MediaContent"; -import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart"; -import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils"; -import type { ButtonConfig } from "@/types/button"; -import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation"; -import TextNumberCount from "@/components/text/TextNumberCount"; - -export interface DashboardSidebarItem { - icon: LucideIcon; - active?: boolean; -} - -export interface DashboardStat { - title: string; - titleMobile?: string; - values: [number, number, number]; - valuePrefix?: string; - valueSuffix?: string; - valueFormat?: Omit & { - notation?: Exclude; - }; - description: string; -} - -export interface DashboardListItem { - icon: LucideIcon; - title: string; - status: string; -} +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; interface DashboardProps { - title: string; - stats: [DashboardStat, DashboardStat, DashboardStat]; - logoIcon: LucideIcon; - sidebarItems: DashboardSidebarItem[]; - searchPlaceholder?: string; - buttons: ButtonConfig[]; - chartTitle?: string; - chartData?: ChartDataItem[]; - listItems: DashboardListItem[]; - listTitle?: string; - imageSrc: string; - videoSrc?: string; - imageAlt?: string; - videoAriaLabel?: string; - className?: string; - containerClassName?: string; - sidebarClassName?: string; - statClassName?: string; - chartClassName?: string; - listClassName?: string; + title: string; + containerClassName?: string; } -const Dashboard = ({ - title, - stats, - logoIcon: LogoIcon, - sidebarItems, - searchPlaceholder = "Search", - buttons, - chartTitle = "Revenue Overview", - chartData, - listItems, - listTitle = "Recent Transfers", - imageSrc, - videoSrc, - imageAlt = "", - videoAriaLabel = "Avatar video", - className = "", - containerClassName = "", - sidebarClassName = "", - statClassName = "", - chartClassName = "", - listClassName = "", -}: DashboardProps) => { - const theme = useTheme(); - const [activeStatIndex, setActiveStatIndex] = useState(0); - const [statValueIndex, setStatValueIndex] = useState(0); - const { itemRefs: statRefs } = useCardAnimation({ - animationType: "slide-up", - itemCount: 3, - }); +export const Dashboard: React.FC = ({ title, containerClassName = '' }) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - useEffect(() => { - const interval = setInterval(() => { - setStatValueIndex((prev) => (prev + 1) % 3); - }, 3000); - return () => clearInterval(interval); - }, []); + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; - const statCard = (stat: DashboardStat, index: number, withRef = false) => ( -
{ statRefs.current[index] = el; } : undefined} - className={cls( - "group rounded-theme-capped p-5 flex flex-col justify-between h-40 md:h-50 card shadow", - statClassName - )} - > -
-

- {stat.title} -

-
- -
-
-
- -

- {stat.description} -

-
-
- ); + const { } = useCardAnimation(animationOptions); - return ( -
-
-
-
- -
- -
-
-
-
-
-
- -

- {searchPlaceholder} -

-
-
-
- -
-
- -
-
-
-
-
-

- {title} -

-
- {buttons.slice(0, 2).map((button, index) => ( -
-
-
- {stats.map((stat, index) => statCard(stat, index, true))} -
-
- - {statCard(stats[activeStatIndex], activeStatIndex)} - -
- - -
-
-
-
-
-

- {chartTitle} -

-
- -
-
-
- -
-
-
-
-

- {listTitle} -

-
- -
-
-
-
- {[...listItems, ...listItems, ...listItems, ...listItems].map((item, index) => { - const ItemIcon = item.icon; - return ( -
-
- -
-
-

- {item.title} -

-

- {item.status} -

-
- -
- ); - })} -
-
-
-
-
-
- ); + return ( +
+

{title}

+
+ ); }; -Dashboard.displayName = "Dashboard"; - -export default React.memo(Dashboard); +export default Dashboard; diff --git a/src/hooks/useCardAnimation.ts b/src/hooks/useCardAnimation.ts new file mode 100644 index 0000000..4d7c504 --- /dev/null +++ b/src/hooks/useCardAnimation.ts @@ -0,0 +1,18 @@ +import { useEffect, RefObject } from 'react'; + +export interface UseCardAnimationOptions { + containerRef: RefObject; + itemRefs: RefObject<(HTMLDivElement | null)[]>; + perspectiveRef?: RefObject; + bottomContentRef?: RefObject; +} + +export const useCardAnimation = (options: UseCardAnimationOptions) => { + const { containerRef, itemRefs, perspectiveRef, bottomContentRef } = options; + + useEffect(() => { + // Animation logic here + }, [containerRef, itemRefs, perspectiveRef, bottomContentRef]); + + return {}; +};