46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { CardStack } from '@/components/cardStack/CardStack';
|
|
|
|
interface FeatureHoverPatternProps {
|
|
features: Array<{
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
}>;
|
|
title: string;
|
|
description: string;
|
|
animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
|
|
textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
|
|
[key: string]: any;
|
|
}
|
|
|
|
const FeatureHoverPattern: React.FC<FeatureHoverPatternProps> = ({
|
|
features,
|
|
title,
|
|
description,
|
|
animationType = 'slide-up',
|
|
textboxLayout = 'default',
|
|
...props
|
|
}) => {
|
|
const featureItems = features.map((feature) => (
|
|
<div key={feature.id} className="flex flex-col gap-4">
|
|
<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}
|
|
{...props}
|
|
>
|
|
{featureItems}
|
|
</CardStack>
|
|
);
|
|
};
|
|
|
|
export default FeatureHoverPattern; |