57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { CardStack } from '@/components/cardStack/CardStack';
|
|
|
|
interface TeamCardTwoProps {
|
|
members: Array<{
|
|
id: string;
|
|
name: string;
|
|
role: string;
|
|
imageSrc?: string;
|
|
}>;
|
|
title: string;
|
|
description: string;
|
|
gridVariant?: string;
|
|
gridRowsClassName?: string;
|
|
animationType?: string;
|
|
textboxLayout?: string;
|
|
useInvertedBackground?: boolean;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const TeamCardTwo: React.FC<TeamCardTwoProps> = ({
|
|
members,
|
|
title,
|
|
description,
|
|
gridVariant = 'uniform-all-items-equal',
|
|
gridRowsClassName = '',
|
|
animationType = 'slide-up',
|
|
textboxLayout = 'default',
|
|
useInvertedBackground = false,
|
|
...props
|
|
}) => {
|
|
const memberItems = members.map((member) => (
|
|
<div key={member.id} className="flex flex-col gap-4">
|
|
{member.imageSrc && (
|
|
<img src={member.imageSrc} alt={member.name} className="w-full rounded" />
|
|
)}
|
|
<p className="text-lg font-semibold">{member.name}</p>
|
|
<p className="text-sm text-foreground/75">{member.role}</p>
|
|
</div>
|
|
));
|
|
|
|
return (
|
|
<CardStack
|
|
gridVariant={gridVariant}
|
|
animationType={animationType}
|
|
title={title}
|
|
description={description}
|
|
textboxLayout={textboxLayout}
|
|
useInvertedBackground={useInvertedBackground}
|
|
{...props}
|
|
>
|
|
{memberItems}
|
|
</CardStack>
|
|
);
|
|
};
|
|
|
|
export default TeamCardTwo; |