47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { CardStack } from '@/components/cardStack/CardStack';
|
|
|
|
interface FeatureBentoProps {
|
|
features: Array<{
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
imageSrc?: string;
|
|
}>;
|
|
title: string;
|
|
description: string;
|
|
animationType?: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const FeatureBento: React.FC<FeatureBentoProps> = ({
|
|
features,
|
|
title,
|
|
description,
|
|
animationType = 'slide-up',
|
|
...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="bento-grid"
|
|
animationType={animationType}
|
|
title={title}
|
|
description={description}
|
|
{...props}
|
|
>
|
|
{featureItems}
|
|
</CardStack>
|
|
);
|
|
};
|
|
|
|
export default FeatureBento; |