From ca488ea51237e4200f19683e82ea08891c93295b Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:31 +0000 Subject: [PATCH 1/6] Update src/components/cardStack/CardList.tsx --- src/components/cardStack/CardList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/CardList.tsx b/src/components/cardStack/CardList.tsx index d733ab2..33e35c5 100644 --- a/src/components/cardStack/CardList.tsx +++ b/src/components/cardStack/CardList.tsx @@ -1,7 +1,7 @@ -import React, { useRef, useEffect, useState } from 'react'; +import React, { useRef } from 'react'; import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -interface CardListProps { +export interface CardListProps { children: React.ReactNode; containerClassName?: string; } From 7962fb0ad585f31c2ebb722e66a1c8390b5435aa Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:32 +0000 Subject: [PATCH 2/6] Update src/components/cardStack/layouts/carousels/AutoCarousel.tsx --- .../layouts/carousels/AutoCarousel.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx index 53e30f5..f3cbdeb 100644 --- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx +++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx @@ -1,12 +1,31 @@ import React, { useRef } from 'react'; import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -interface AutoCarouselProps { +export interface AutoCarouselProps { children: React.ReactNode; + title?: string; + description?: string; + textboxLayout?: string; + animationType?: string; + className?: string; + carouselClassName?: string; containerClassName?: string; + itemClassName?: string; + ariaLabel?: string; + showTextBox?: boolean; + tag?: string; + tagIcon?: any; + tagAnimation?: string; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; } -export const AutoCarousel: React.FC = ({ children, containerClassName = '' }) => { +export const AutoCarousel: React.FC = ({ + children, + containerClassName = '', + ...props +}) => { const containerRef = useRef(null); const itemRefs = useRef<(HTMLDivElement | null)[]>([]); const bottomContentRef = useRef(null); From 64cadcb3674766e00ebb64b86201f3c92a33772f Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:32 +0000 Subject: [PATCH 3/6] Update src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx --- .../timelines/TimelineHorizontalCardStack.tsx | 181 +++--------------- 1 file changed, 31 insertions(+), 150 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx index 9088c41..73d18db 100644 --- a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx @@ -1,32 +1,25 @@ -"use client"; +import React, { useRef } from 'react'; +import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -import React, { Children, useCallback } from "react"; -import { cls } from "@/lib/utils"; -import CardStackTextBox from "../../CardStackTextBox"; -import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal"; -import MediaContent from "@/components/shared/MediaContent"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "../../types"; - -interface TimelineHorizontalCardStackProps { +export interface TimelineHorizontalCardStackProps { children: React.ReactNode; - title: string; - titleSegments?: TitleSegment[]; - description: string; + title?: string; + description?: string; tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground?: InvertedBackground; - mediaItems?: MediaItem[]; - className?: string; + textboxLayout?: string; + animationType?: string; containerClassName?: string; + mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: string; + tagIcon?: any; + tagAnimation?: string; + useInvertedBackground?: boolean; + ariaLabel?: string; + className?: string; textBoxClassName?: string; titleClassName?: string; - titleImageWrapperClassName?: string; - titleImageClassName?: string; descriptionClassName?: string; tagClassName?: string; buttonContainerClassName?: string; @@ -36,140 +29,28 @@ interface TimelineHorizontalCardStackProps { progressBarClassName?: string; mediaContainerClassName?: string; mediaClassName?: string; - ariaLabel?: string; } -const TimelineHorizontalCardStack = ({ +export const TimelineHorizontalCardStack: React.FC = ({ children, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - mediaItems, - className = "", - containerClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - cardClassName = "", - progressBarClassName = "", - mediaContainerClassName = "", - mediaClassName = "", - ariaLabel = "Timeline section", -}: TimelineHorizontalCardStackProps) => { - const childrenArray = Children.toArray(children); - const itemCount = childrenArray.length; + containerClassName = '', + ...props +}) => { + const containerRef = useRef(null); + const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({ - itemCount, - mediaItems, - }); + const animationOptions: UseCardAnimationOptions = { + containerRef, + itemRefs, + }; - const getGridColumns = useCallback(() => { - if (itemCount === 2) return "md:grid-cols-2"; - if (itemCount === 3) return "md:grid-cols-3"; - return "md:grid-cols-4"; - }, [itemCount]); - - const getItemOpacity = useCallback( - (index: number) => { - return index <= activeIndex ? "opacity-100" : "opacity-50"; - }, - [activeIndex] - ); + const { } = useCardAnimation(animationOptions); return ( -
-
- - {mediaItems && mediaItems.length > 0 && ( -
-
- -
-
- )} -
- {Children.map(childrenArray, (child, index) => ( -
handleItemClick(index)} - > - {child} -
-
-
{ - if (el !== null) { - progressRefs.current[index] = el; - } - }} - className={cls("absolute z-10 h-full w-full bg-foreground origin-left", progressBarClassName)} - style={{ transform: "scaleX(0)" }} - /> -
-
- ))} -
-
-
+
+ {children} +
); }; -TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack"; - -export default React.memo(TimelineHorizontalCardStack); +export default TimelineHorizontalCardStack; From 9185617dea6059edbc047c6f228585554ae103f3 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:33 +0000 Subject: [PATCH 4/6] Update src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx --- .../layouts/timelines/TimelinePhoneView.tsx | 38 +++++++++++++++++-- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx index 360047f..7bbd289 100644 --- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx +++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx @@ -1,12 +1,42 @@ import React, { useRef } from 'react'; import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -interface TimelinePhoneViewProps { - children: React.ReactNode; - containerClassName?: string; +export interface TimelinePhoneViewItem { + [key: string]: any; } -export const TimelinePhoneView: React.FC = ({ children, containerClassName = '' }) => { +export interface TimelinePhoneViewProps { + children: React.ReactNode; + showTextBox?: boolean; + showDivider?: boolean; + title?: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + description?: string; + tag?: string; + tagIcon?: any; + tagAnimation?: string; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: string; + textboxLayout?: string; + animationType?: string; + useInvertedBackground?: boolean; + ariaLabel?: string; + className?: string; + containerClassName?: string; + textBoxClassName?: string; + titleClassName?: string; + descriptionClassName?: string; + tagClassName?: string; + buttonContainerClassName?: string; + buttonClassName?: string; + buttonTextClassName?: string; +} + +export const TimelinePhoneView: React.FC = ({ + children, + containerClassName = '', + ...props +}) => { const containerRef = useRef(null); const itemRefs = useRef<(HTMLDivElement | null)[]>([]); From 936394f0789804b20407fef0136cdcd8fe929549 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:33 +0000 Subject: [PATCH 5/6] Update src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx --- .../layouts/timelines/TimelineProcessFlow.tsx | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx index 58ae469..50818b2 100644 --- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx +++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx @@ -1,12 +1,37 @@ import React, { useRef } from 'react'; import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -interface TimelineProcessFlowProps { +export interface TimelineProcessFlowProps { children: React.ReactNode; + title?: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + description?: string; + tag?: string; + tagIcon?: any; + tagAnimation?: string; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: string; + textboxLayout?: string; + animationType?: string; + useInvertedBackground?: boolean; + ariaLabel?: string; + className?: string; containerClassName?: string; + textBoxClassName?: string; + titleClassName?: string; + descriptionClassName?: string; + tagClassName?: string; + buttonContainerClassName?: string; + buttonClassName?: string; + buttonTextClassName?: string; + gapClassName?: string; } -export const TimelineProcessFlow: React.FC = ({ children, containerClassName = '' }) => { +export const TimelineProcessFlow: React.FC = ({ + children, + containerClassName = '', + ...props +}) => { const containerRef = useRef(null); const itemRefs = useRef<(HTMLDivElement | null)[]>([]); From 7e3f6595c783b2261a363dba8ae65c623d448a90 Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 18:53:34 +0000 Subject: [PATCH 6/6] Update src/components/shared/Dashboard.tsx --- src/components/shared/Dashboard.tsx | 43 +++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx index c866604..d94a216 100644 --- a/src/components/shared/Dashboard.tsx +++ b/src/components/shared/Dashboard.tsx @@ -1,12 +1,45 @@ import React, { useRef } from 'react'; import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation'; -interface DashboardProps { - title: string; - containerClassName?: string; +export interface DashboardStat { + label: string; + value: string | number; } -export const Dashboard: React.FC = ({ title, containerClassName = '' }) => { +export interface DashboardSidebarItem { + label: string; + icon?: any; + active?: boolean; +} + +export interface DashboardListItem { + label: string; + value?: string; +} + +export interface DashboardProps { + title?: string; + stats?: DashboardStat[]; + logoIcon?: any; + sidebarItems?: DashboardSidebarItem[]; + searchPlaceholder?: string; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + chartTitle?: string; + chartData?: Array<{ label: string; value: number }>; + listItems?: DashboardListItem[]; + containerClassName?: string; + headerClassName?: string; + statsClassName?: string; + sidebarClassName?: string; + contentClassName?: string; + listClassName?: string; +} + +export const Dashboard: React.FC = ({ + title, + containerClassName = '', + ...props +}) => { const containerRef = useRef(null); const itemRefs = useRef<(HTMLDivElement | null)[]>([]); @@ -19,7 +52,7 @@ export const Dashboard: React.FC = ({ title, containerClassName return (
-

{title}

+ {title &&

{title}

}
); };