48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { ArrowRightIcon } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { FeatureCardContainer } from '@/components/feature-card';
|
|
|
|
interface CompareCardProps {
|
|
name: string;
|
|
logo?: string;
|
|
description: string;
|
|
url: string;
|
|
}
|
|
|
|
export function CompareCard({
|
|
url,
|
|
name,
|
|
logo,
|
|
description,
|
|
}: CompareCardProps) {
|
|
return (
|
|
<Link href={url}>
|
|
<FeatureCardContainer>
|
|
<div className="row items-center gap-3">
|
|
{logo && (
|
|
<div className="relative size-10 shrink-0 overflow-hidden rounded-lg border bg-background p-1.5">
|
|
<Image
|
|
alt={`${name} logo`}
|
|
className="h-full w-full object-contain"
|
|
height={40}
|
|
src={logo}
|
|
width={40}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="col min-w-0 flex-1 gap-1">
|
|
<h3 className="font-semibold text-lg transition-colors group-hover:text-primary">
|
|
{name}
|
|
</h3>
|
|
<p className="line-clamp-2 text-muted-foreground text-sm">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
<ArrowRightIcon className="size-5 shrink-0 text-muted-foreground opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary group-hover:opacity-100" />
|
|
</div>
|
|
</FeatureCardContainer>
|
|
</Link>
|
|
);
|
|
}
|