svrjs-nextjs-website/app/(auth)/_components/Card.tsx

24 lines
655 B
TypeScript
Raw Normal View History

2024-06-20 17:37:45 +02:00
import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
2024-06-20 17:02:11 +02:00
import { FC } from "react";
interface CardProps {
title: string;
2024-06-20 17:37:45 +02:00
url: string;
2024-06-20 17:02:11 +02:00
}
2024-06-20 17:37:45 +02:00
const Card: FC<CardProps> = ({ title, url }) => {
2024-06-20 17:02:11 +02:00
return (
2024-06-20 17:37:45 +02:00
<div className=" bg-zinc-900 border rounded-lg hover:bg-zinc-800 transition-all">
<Link href={url} className="group">
<div className="flex-center rounded-lg p-6">
<h2 className="text-2xl font-bold mb-2">{title}</h2>
<ArrowUpRight className="w-5 h-5 mb-2 ml-2 opacity-0 group-hover:opacity-100 transition-all duration-300" />
</div>
</Link>
2024-06-20 17:02:11 +02:00
</div>
);
};
export default Card;