51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { type Service } from '../types';
|
|
import { Globe, X } from 'lucide-react';
|
|
|
|
interface ServiceCardProps {
|
|
service: Service;
|
|
onDelete: (id: string) => void;
|
|
}
|
|
|
|
const ServiceCard: React.FC<ServiceCardProps> = ({ service, onDelete }) => {
|
|
const IconComponent = typeof service.icon === 'string' ? Globe : service.icon;
|
|
|
|
const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (window.confirm(`Are you sure you want to delete ${service.name}?`)) {
|
|
onDelete(service.id);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<a
|
|
href={service.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group relative block p-6 bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl hover:bg-gray-700 transition-all duration-300 transform hover:-translate-y-1"
|
|
>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="absolute top-2 right-2 p-1.5 bg-gray-700/50 text-gray-400 rounded-full hover:bg-red-500/50 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100 z-10"
|
|
aria-label={`Delete ${service.name}`}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
|
|
<div className="flex items-center mb-4">
|
|
<div className="p-3 bg-gray-900 rounded-lg mr-4">
|
|
<IconComponent className="h-6 w-6 text-teal-400" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-100 truncate">{service.name}</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-400 h-10 overflow-hidden">
|
|
{service.description}
|
|
</p>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default ServiceCard;
|