Initial commit

components/ServiceCard.tsx

@@ -0,0 +1,50 @@
+
+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;