components/PillLink.tsx

import Link from 'next/link';
import { Badge } from '@/components/ui/badge';

interface PillLinkProps {
 text: string;
 link: string;
 isNew?: boolean;
 newText?: string;
}

const PillLink: React.FC<PillLinkProps> = ({ text, link, isNew = false, newText = 'NEW' }) => {
 return (
 <Link target="_blank" href={link}>
 <Badge 
 className="
 mb-4 bg-gray-900 px-3 py-1.5 text-xs font-medium text-white
 shadow-md transition-all duration-200 
 hover:bg-gray-800 hover:shadow-lg
 transform hover:scale-105
 rounded-full relative
 overflow-hidden
 group
 "
 >
 <span className="relative z-10">
 {(isNew || newText) && (
 <span className="mr-2 rounded-full bg-white px-1.5 py-0.5 text-[10px] font-bold text-gray-900">
 {newText}
 </span>
 )}
 {text}
 </span>
 <span className="absolute inset-0 bg-gradient-to-r from-white to-gray-300 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
 </Badge>
 </Link>
 );
};

export default PillLink;