-
+
+ {children}
+ {items && items.map((item: any, idx: number) => (
+
{JSON.stringify(item)}
+ ))}
);
};
-export default CardStack;
\ No newline at end of file
+export default CardStack;
diff --git a/src/components/cardStack/CardStackTextBox.tsx b/src/components/cardStack/CardStackTextBox.tsx
index 124a4c7..3488d81 100644
--- a/src/components/cardStack/CardStackTextBox.tsx
+++ b/src/components/cardStack/CardStackTextBox.tsx
@@ -1,92 +1,16 @@
-"use client";
+import React from 'react';
-import { memo, useMemo } from "react";
-import TextBox from "@/components/Textbox";
-import { cls } from "@/lib/utils";
-import type { TextBoxProps } from "./types";
+export interface CardStackTextBoxProps {
+ children?: React.ReactNode;
+ [key: string]: any;
+}
-const CardStackTextBox = ({
- title,
- titleSegments,
- description,
- tag,
- tagIcon,
- tagAnimation,
- buttons,
- buttonAnimation,
- textboxLayout,
- useInvertedBackground,
- textBoxClassName = "",
- titleClassName = "",
- titleImageWrapperClassName = "",
- titleImageClassName = "",
- descriptionClassName = "",
- tagClassName = "",
- buttonContainerClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
-}: TextBoxProps) => {
- const styles = useMemo(() => {
- if (textboxLayout === "default") {
- return {
- className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
- titleClassName: cls("text-6xl font-medium text-center", titleClassName),
- descriptionClassName: cls("text-lg leading-tight text-center md:max-w-6/10", descriptionClassName),
- tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
- buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
- center: true,
- };
- }
-
- if (textboxLayout === "inline-image") {
- return {
- className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
- titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
- descriptionClassName: cls("text-lg leading-tight text-center", descriptionClassName),
- tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
- buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
- center: true,
- };
- }
-
- return {
- className: textBoxClassName,
- titleClassName: cls("text-6xl font-medium", titleClassName),
- descriptionClassName: cls("text-lg leading-tight", descriptionClassName),
- tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
- buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName),
- center: false,
- };
- }, [textboxLayout, textBoxClassName, titleClassName, descriptionClassName, tagClassName, buttonContainerClassName]);
-
- if (!title && !titleSegments && !description) return null;
-
- return (
-
- );
+export const CardStackTextBox: React.FC
= ({ children, ...props }) => {
+ return (
+
+ {children}
+
+ );
};
-CardStackTextBox.displayName = "CardStackTextBox";
-
-export default memo(CardStackTextBox);
+export default CardStackTextBox;
diff --git a/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx b/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx
index 22d2132..634db40 100644
--- a/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/ArrowCarousel.tsx
@@ -1,144 +1,16 @@
-"use client";
+import React from 'react';
-import { memo, Children, useCallback, useEffect, useState } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import { EmblaCarouselType } from "embla-carousel";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { ArrowCarouselProps } from "../../types";
+export interface ArrowCarouselProps {
+ children?: React.ReactNode;
+ [key: string]: any;
+}
-const ArrowCarousel = ({
- children,
- title,
- titleSegments,
- description,
- tag,
- tagIcon,
- tagAnimation,
- buttons,
- buttonAnimation,
- textboxLayout = "default",
- useInvertedBackground,
- className = "",
- containerClassName = "",
- carouselClassName = "",
- controlsClassName = "",
- textBoxClassName = "",
- titleClassName = "",
- titleImageWrapperClassName = "",
- titleImageClassName = "",
- descriptionClassName = "",
- tagClassName = "",
- buttonContainerClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- ariaLabel = "Carousel section",
-}: ArrowCarouselProps) => {
- const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
- const [selectedIndex, setSelectedIndex] = useState(0);
-
- const childrenArray = Children.toArray(children);
-
- const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
- setSelectedIndex(emblaApi.selectedScrollSnap());
- }, []);
-
- const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
- const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
-
- useEffect(() => {
- if (!emblaApi) return;
-
- onSelect(emblaApi);
- emblaApi.on("select", onSelect).on("reInit", onSelect);
-
- return () => {
- emblaApi.off("select", onSelect).off("reInit", onSelect);
- };
- }, [emblaApi, onSelect]);
-
- return (
-
-
-
-
-
-
-
-
-
- {childrenArray.map((child, index) => (
-
- ))}
-
-
-
-
-
-
-
-
-
+ {children}
+
+ );
};
-ArrowCarousel.displayName = "ArrowCarousel";
-
-export default memo(ArrowCarousel);
+export default ArrowCarousel;
diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
index 7eb3fa7..9318ce2 100644
--- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -1,39 +1,16 @@
-import React, { useRef, useCallback } from 'react';
-import { useCardAnimation } from '../../hooks/useCardAnimation';
-import type { CardAnimationConfig } from '../../types';
+import React from 'react';
-interface AutoCarouselProps {
- items: React.ReactNode[];
- animationConfig: CardAnimationConfig;
- className?: string;
+export interface AutoCarouselProps {
+ children?: React.ReactNode;
+ [key: string]: any;
}
-export const AutoCarousel: React.FC = ({
- items,
- animationConfig,
- className = '',
-}) => {
- const cardsRef = useRef([]);
-
- useCardAnimation(cardsRef, animationConfig);
-
- const setCardRef = useCallback((index: number, el: HTMLDivElement | null) => {
- if (el) {
- cardsRef.current[index] = el;
- }
- }, []);
-
+export const AutoCarousel: React.FC = ({ children, ...props }) => {
return (
-
- {items.map((item, index) => (
-
setCardRef(index, el)}
- className="carousel-item"
- >
- {item}
-
- ))}
+
+ {children}
);
};
+
+export default AutoCarousel;
diff --git a/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
index 528d79e..c0bc6b9 100644
--- a/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/FullWidthCarousel.tsx
@@ -1,155 +1,16 @@
-"use client";
+import React from 'react';
-import { memo, Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import { EmblaCarouselType } from "embla-carousel";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { FullWidthCarouselProps } from "../../types";
+export interface FullWidthCarouselProps {
+ children?: React.ReactNode;
+ [key: string]: any;
+}
-const FullWidthCarousel = ({
- children,
- title,
- titleSegments,
- description,
- tag,
- tagIcon,
- tagAnimation,
- buttons,
- buttonAnimation,
- textboxLayout = "default",
- useInvertedBackground,
- className = "",
- containerClassName = "",
- carouselClassName = "",
- dotsClassName = "",
- textBoxClassName = "",
- titleClassName = "",
- titleImageWrapperClassName = "",
- titleImageClassName = "",
- descriptionClassName = "",
- tagClassName = "",
- buttonContainerClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- ariaLabel = "Carousel section",
-}: FullWidthCarouselProps) => {
- const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
- const [selectedIndex, setSelectedIndex] = useState(0);
-
- const childrenArray = Children.toArray(children);
-
- const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
- setSelectedIndex(emblaApi.selectedScrollSnap());
- }, []);
-
- const scrollTo = useCallback(
- (index: number) => {
- if (!emblaApi) return;
- emblaApi.scrollTo(index);
- },
- [emblaApi]
- );
-
- useEffect(() => {
- if (!emblaApi) return;
-
- onSelect(emblaApi);
- emblaApi.on("select", onSelect).on("reInit", onSelect);
-
- return () => {
- emblaApi.off("select", onSelect).off("reInit", onSelect);
- };
- }, [emblaApi, onSelect]);
-
- useEffect(() => {
- if (!emblaApi) return;
-
- const autoplay = setInterval(() => {
- emblaApi.scrollNext();
- }, 5000);
-
- return () => clearInterval(autoplay);
- }, [emblaApi]);
-
- return (
-
-
-
-
-
-
-
-
-
- {Children.map(childrenArray, (child, index) => (
-
- {isValidElement(child)
- ? cloneElement(child, { isActive: selectedIndex === index } as Record)
- : child}
-
- ))}
-
-
-
-
- {childrenArray.map((_, index) => (
-
-
- );
+export const FullWidthCarousel: React.FC
= ({ children, ...props }) => {
+ return (
+
+ {children}
+
+ );
};
-FullWidthCarousel.displayName = "FullWidthCarousel";
-
-export default memo(FullWidthCarousel);
+export default FullWidthCarousel;
diff --git a/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
index 5332539..0b65f6a 100644
--- a/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineCardStack.tsx
@@ -1,147 +1,16 @@
-"use client";
+import React from 'react';
-import React, { useEffect, useRef, memo, Children } from "react";
-import { gsap } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-gsap.registerPlugin(ScrollTrigger);
-
-interface TimelineCardStackProps {
- children: React.ReactNode;
- title: string;
- titleSegments?: TitleSegment[];
- description: string;
- tag?: string;
- tagIcon?: LucideIcon;
- tagAnimation?: ButtonAnimationType;
- buttons?: ButtonConfig[];
- buttonAnimation?: ButtonAnimationType;
- textboxLayout: TextboxLayout;
- useInvertedBackground?: InvertedBackground;
- className?: string;
- containerClassName?: string;
- textBoxClassName?: string;
- titleClassName?: string;
- titleImageWrapperClassName?: string;
- titleImageClassName?: string;
- descriptionClassName?: string;
- tagClassName?: string;
- buttonContainerClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- ariaLabel?: string;
+export interface TimelineCardStackProps {
+ children?: React.ReactNode;
+ [key: string]: any;
}
-const TimelineCardStack = ({
- children,
- title,
- titleSegments,
- description,
- tag,
- tagIcon,
- tagAnimation,
- buttons,
- buttonAnimation,
- textboxLayout,
- useInvertedBackground,
- className = "",
- containerClassName = "",
- textBoxClassName = "",
- titleClassName = "",
- titleImageWrapperClassName = "",
- titleImageClassName = "",
- descriptionClassName = "",
- tagClassName = "",
- buttonContainerClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- ariaLabel = "Timeline section",
-}: TimelineCardStackProps) => {
- const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
- const childrenArray = Children.toArray(children);
-
- useEffect(() => {
- const ctx = gsap.context(() => {
- itemRefs.current.forEach((ref, position) => {
- if (!ref) return;
-
- const isLast = position === itemRefs.current.length - 1;
-
- const timeline = gsap.timeline({
- scrollTrigger: {
- trigger: ref,
- start: "center center",
- end: "+=100%",
- scrub: true,
- },
- });
-
- timeline.set(ref, { willChange: "opacity" }).to(ref, {
- ease: "none",
- opacity: isLast ? 1 : 0,
- });
- });
- });
-
- return () => {
- ctx.revert();
- };
- }, [childrenArray.length]);
-
- return (
-
-
-
-
- {Children.map(childrenArray, (child, index) => (
-
{
- itemRefs.current[index] = el;
- }}
- className="!sticky w-full card backdrop-blur-xs rounded-theme-capped h-[140vw] md:h-[75vh] top-[25vw] md:top-[12.5vh]"
- >
- {child}
-
- ))}
-
-
+ {children}
+
+ );
};
-TimelineCardStack.displayName = "TimelineCardStack";
-
-export default memo(TimelineCardStack);
+export default TimelineCardStack;
diff --git a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
index 9088c41..e975b11 100644
--- a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
@@ -1,175 +1,16 @@
-"use client";
+import React from 'react';
-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 {
- children: React.ReactNode;
- title: string;
- titleSegments?: TitleSegment[];
- description: string;
- tag?: string;
- tagIcon?: LucideIcon;
- tagAnimation?: ButtonAnimationType;
- buttons?: ButtonConfig[];
- buttonAnimation?: ButtonAnimationType;
- textboxLayout: TextboxLayout;
- useInvertedBackground?: InvertedBackground;
- mediaItems?: MediaItem[];
- className?: string;
- containerClassName?: string;
- textBoxClassName?: string;
- titleClassName?: string;
- titleImageWrapperClassName?: string;
- titleImageClassName?: string;
- descriptionClassName?: string;
- tagClassName?: string;
- buttonContainerClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- cardClassName?: string;
- progressBarClassName?: string;
- mediaContainerClassName?: string;
- mediaClassName?: string;
- ariaLabel?: string;
+export interface TimelineHorizontalCardStackProps {
+ children?: React.ReactNode;
+ [key: string]: any;
}
-const TimelineHorizontalCardStack = ({
- 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;
-
- const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({
- itemCount,
- mediaItems,
- });
-
- 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]
- );
-
+export const TimelineHorizontalCardStack: React.FC = ({ children, ...props }) => {
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;
diff --git a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
index eac5e4d..02b1d96 100644
--- a/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx
@@ -1,39 +1,16 @@
-import React, { useRef, useCallback } from 'react';
-import { useCardAnimation } from '../../hooks/useCardAnimation';
-import type { CardAnimationConfig } from '../../types';
+import React from 'react';
-interface TimelinePhoneViewProps {
- items: React.ReactNode[];
- animationConfig: CardAnimationConfig;
- className?: string;
+export interface TimelinePhoneViewProps {
+ children?: React.ReactNode;
+ [key: string]: any;
}
-export const TimelinePhoneView: React.FC
= ({
- items,
- animationConfig,
- className = '',
-}) => {
- const cardsRef = useRef([]);
-
- useCardAnimation(cardsRef, animationConfig);
-
- const setCardRef = useCallback((index: number, el: HTMLDivElement | null) => {
- if (el) {
- cardsRef.current[index] = el;
- }
- }, []);
-
+export const TimelinePhoneView: React.FC = ({ children, ...props }) => {
return (
-
- {items.map((item, index) => (
-
setCardRef(index, el)}
- className="timeline-item"
- >
- {item}
-
- ))}
+
+ {children}
);
};
+
+export default TimelinePhoneView;
diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
index 9bbc76c..e31baf5 100644
--- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -1,39 +1,16 @@
-import React, { useRef, useCallback } from 'react';
-import { useCardAnimation } from '../../hooks/useCardAnimation';
-import type { CardAnimationConfig } from '../../types';
+import React from 'react';
-interface TimelineProcessFlowProps {
- items: React.ReactNode[];
- animationConfig: CardAnimationConfig;
- className?: string;
+export interface TimelineProcessFlowProps {
+ children?: React.ReactNode;
+ [key: string]: any;
}
-export const TimelineProcessFlow: React.FC
= ({
- items,
- animationConfig,
- className = '',
-}) => {
- const cardsRef = useRef([]);
-
- useCardAnimation(cardsRef, animationConfig);
-
- const setCardRef = useCallback((index: number, el: HTMLDivElement | null) => {
- if (el) {
- cardsRef.current[index] = el;
- }
- }, []);
-
+export const TimelineProcessFlow: React.FC = ({ children, ...props }) => {
return (
-
- {items.map((item, index) => (
-
setCardRef(index, el)}
- className="process-item"
- >
- {item}
-
- ))}
+
+ {children}
);
};
+
+export default TimelineProcessFlow;
diff --git a/src/components/cardStack/types.ts b/src/components/cardStack/types.ts
index a5234b6..64a724e 100644
--- a/src/components/cardStack/types.ts
+++ b/src/components/cardStack/types.ts
@@ -10,6 +10,15 @@ export type CardAnimationTypeWith3D = CardAnimationType | 'depth-3d';
export type BentoAnimationType = CardAnimationType;
export type GridVariant = 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right';
+export type TextBoxProps = any;
+export type ArrowCarouselProps = any;
+export type FullWidthCarouselProps = any;
+export type ButtonConfig = any;
+export type ButtonAnimationType = any;
+export type TitleSegment = any;
+export type TextboxLayout = any;
+export type InvertedBackground = any;
+
export interface MetricCardOneGridVariant extends GridVariant {}
export interface MetricCardTwoGridVariant extends GridVariant {}
export interface TeamCardOneGridVariant extends GridVariant {}
diff --git a/src/components/shared/Dashboard.tsx b/src/components/shared/Dashboard.tsx
index b6a2b8b..348f300 100644
--- a/src/components/shared/Dashboard.tsx
+++ b/src/components/shared/Dashboard.tsx
@@ -1,34 +1,61 @@
-import React, { useRef, useCallback } from 'react';
-import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
-import type { CardAnimationConfig } from '@/components/cardStack/types';
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
-interface DashboardProps {
- animationConfig: CardAnimationConfig;
- className?: string;
+export interface DashboardStat {
+ title: string;
+ values: number[];
+ valuePrefix?: string;
+ valueSuffix?: string;
+ description?: string;
}
-export const Dashboard: React.FC
= ({
- animationConfig,
- className = '',
-}) => {
- const cardsRef = useRef([]);
+export interface DashboardSidebarItem {
+ icon: LucideIcon;
+ active?: boolean;
+ [key: string]: any;
+}
- useCardAnimation(cardsRef, animationConfig);
+export interface DashboardListItem {
+ icon: LucideIcon;
+ title: string;
+ status: string;
+ [key: string]: any;
+}
- const setCardRef = useCallback((index: number, el: HTMLDivElement | null) => {
- if (el) {
- cardsRef.current[index] = el;
- }
- }, []);
+export interface ChartDataItem {
+ value: number;
+ [key: string]: any;
+}
+export interface DashboardProps {
+ title: string;
+ stats: [DashboardStat, DashboardStat, DashboardStat];
+ logoIcon: LucideIcon;
+ sidebarItems: DashboardSidebarItem[];
+ buttons: any[];
+ listItems: DashboardListItem[];
+ imageSrc: string;
+ searchPlaceholder?: string;
+ chartTitle?: string;
+ chartData?: ChartDataItem[];
+ listTitle?: string;
+ videoSrc?: string;
+ imageAlt?: string;
+ videoAriaLabel?: string;
+ className?: string;
+ containerClassName?: string;
+ sidebarClassName?: string;
+ statClassName?: string;
+ chartClassName?: string;
+ listClassName?: string;
+ animationConfig?: any;
+ [key: string]: any;
+}
+
+export const Dashboard: React.FC = (props) => {
return (
-
-
setCardRef(0, el)}
- className="dashboard-item"
- >
-
Dashboard content
-
+
+
{props.title}
);
};