Update src/components/cardStack/CardStack.tsx
This commit is contained in:
@@ -1,23 +1,24 @@
|
||||
"use client";
|
||||
import { ReactNode } from 'react';
|
||||
import { CardStackProvider, CardStackContextType } from './CardStackContext';
|
||||
|
||||
import React from 'react';
|
||||
import { TimelineBase } from '@/components/cardStack/layouts/timelines/TimelineBase';
|
||||
|
||||
interface CardStackProps {
|
||||
items?: Array<{ id: string; title: string; description: string }>;
|
||||
export interface CardStackProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const CardStack: React.FC<CardStackProps> = ({ items = [], className = '' }) => {
|
||||
if (!items || items.length === 0) {
|
||||
return <div className={className}>No items to display</div>;
|
||||
}
|
||||
export default function CardStack({ children, className = '', ariaLabel = 'Card stack' }: CardStackProps) {
|
||||
const contextValue: CardStackContextType = {
|
||||
isVisible: true,
|
||||
getAnimationProps: () => ({ isVisible: true }),
|
||||
itemRefs: {}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`card-stack ${className}`}>
|
||||
<TimelineBase items={items} />
|
||||
</div>
|
||||
<CardStackProvider value={contextValue}>
|
||||
<div className={className} aria-label={ariaLabel}>
|
||||
{children}
|
||||
</div>
|
||||
</CardStackProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default CardStack;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user