65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import useCardAnimation from '@/components/cardStack/hooks/useCardAnimation';
|
|
|
|
export interface DashboardCard {
|
|
id: string;
|
|
title: string;
|
|
content: React.ReactNode;
|
|
icon?: React.ComponentType<{ size?: number; className?: string }>;
|
|
}
|
|
|
|
interface DashboardProps {
|
|
cards?: DashboardCard[];
|
|
layout?: 'grid' | 'carousel' | 'timeline';
|
|
className?: string;
|
|
}
|
|
|
|
const Dashboard: React.FC<DashboardProps> = ({
|
|
cards = [],
|
|
layout = 'grid',
|
|
className = '',
|
|
}) => {
|
|
const { transform, currentIndex, handleNext, handlePrev } = useCardAnimation({
|
|
autoPlay: layout === 'carousel',
|
|
});
|
|
|
|
return (
|
|
<div className={`dashboard ${layout} ${className}`}>
|
|
{layout === 'carousel' && (
|
|
<button onClick={handlePrev} className="btn-prev">Previous</button>
|
|
)}
|
|
<div
|
|
className="dashboard-container"
|
|
style={layout === 'carousel' ? { transform } : {}}
|
|
>
|
|
{cards.map((card, index) => {
|
|
const Icon = card.icon;
|
|
return (
|
|
<div
|
|
key={card.id}
|
|
className="dashboard-card"
|
|
style={{
|
|
opacity:
|
|
layout === 'carousel'
|
|
? index === currentIndex
|
|
? 1
|
|
: 0
|
|
: 1,
|
|
}}
|
|
>
|
|
{Icon && <Icon size={24} className="card-icon" />}
|
|
<h3>{card.title}</h3>
|
|
<div className="card-content">{card.content}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{layout === 'carousel' && (
|
|
<button onClick={handleNext} className="btn-next">Next</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|