53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { CardStack } from '@/components/cardStack/CardStack';
|
|
|
|
interface FeatureCardTwentyThreeProps {
|
|
features: Array<{
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
imageSrc?: string;
|
|
}>;
|
|
title: string;
|
|
description: string;
|
|
animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
|
|
textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
|
|
useInvertedBackground?: boolean;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const FeatureCardTwentyThree: React.FC<FeatureCardTwentyThreeProps> = ({
|
|
features,
|
|
title,
|
|
description,
|
|
animationType = 'slide-up',
|
|
textboxLayout = 'default',
|
|
useInvertedBackground = false,
|
|
...props
|
|
}) => {
|
|
const featureItems = features.map((feature) => (
|
|
<div key={feature.id} className="flex flex-col gap-4">
|
|
{feature.imageSrc && (
|
|
<img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
|
|
)}
|
|
<h3 className="text-xl font-semibold">{feature.title}</h3>
|
|
<p className="text-sm text-foreground/75">{feature.description}</p>
|
|
</div>
|
|
));
|
|
|
|
return (
|
|
<CardStack
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType={animationType}
|
|
title={title}
|
|
description={description}
|
|
textboxLayout={textboxLayout}
|
|
useInvertedBackground={useInvertedBackground}
|
|
{...props}
|
|
>
|
|
{featureItems}
|
|
</CardStack>
|
|
);
|
|
};
|
|
|
|
export default FeatureCardTwentyThree; |