71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import {
|
|
MotionHighlight,
|
|
MotionHighlightItem,
|
|
} from '@/registry/effects/motion-highlight';
|
|
import { MotionEffect } from '@/registry/effects/motion-effect';
|
|
import { Blocks, BringToFront, GitPullRequest } from 'lucide-react';
|
|
import ShadcnIcon from '@workspace/ui/components/icons/shadcn-icon';
|
|
|
|
const CARDS = [
|
|
{
|
|
value: '1',
|
|
icon: BringToFront,
|
|
title: 'Animated Components',
|
|
description: 'Beautiful Motion-animated components for dynamic websites.',
|
|
},
|
|
{
|
|
value: '2',
|
|
icon: GitPullRequest,
|
|
title: 'Open Source',
|
|
description:
|
|
'A project built for the dev community with the dev community.',
|
|
},
|
|
{
|
|
value: '3',
|
|
icon: ShadcnIcon,
|
|
title: 'Complementary to Shadcn UI',
|
|
description:
|
|
'The components are designed to be used with Shadcn UI components.',
|
|
},
|
|
{
|
|
value: '4',
|
|
icon: Blocks,
|
|
title: 'Component Distribution',
|
|
description:
|
|
'Install the components in your project and modify them as you wish.',
|
|
},
|
|
];
|
|
|
|
export const Cards = () => {
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<MotionHighlight hover controlledItems className="rounded-xl">
|
|
{CARDS.map((card, index) => (
|
|
<MotionEffect
|
|
key={card.value}
|
|
slide={{
|
|
direction: 'down',
|
|
}}
|
|
fade
|
|
zoom
|
|
delay={index * 0.1}
|
|
inView
|
|
>
|
|
<MotionHighlightItem data-value={card.value} className="h-full">
|
|
<div className="p-4 flex flex-col border rounded-xl cursor-default h-full">
|
|
<div className="flex items-center justify-around size-10 rounded-lg bg-blue-500/10 mb-2">
|
|
<card.icon className="size-5 text-blue-500" />
|
|
</div>
|
|
<p className="text-base font-medium mb-1">{card.title}</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</MotionHighlightItem>
|
|
</MotionEffect>
|
|
))}
|
|
</MotionHighlight>
|
|
</div>
|
|
);
|
|
};
|