97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { Service } from '@/lib/data';
|
|
|
|
interface ServiceCardProps {
|
|
service: Service;
|
|
}
|
|
|
|
const statusConfig = {
|
|
online: {
|
|
bgColor: 'bg-green-50 dark:bg-green-950',
|
|
textColor: 'text-green-700 dark:text-green-300',
|
|
dotColor: 'bg-green-500',
|
|
label: 'Online',
|
|
},
|
|
warning: {
|
|
bgColor: 'bg-amber-50 dark:bg-amber-950',
|
|
textColor: 'text-amber-700 dark:text-amber-300',
|
|
dotColor: 'bg-amber-500',
|
|
label: 'Warnung',
|
|
},
|
|
offline: {
|
|
bgColor: 'bg-red-50 dark:bg-red-950',
|
|
textColor: 'text-red-700 dark:text-red-300',
|
|
dotColor: 'bg-red-500',
|
|
label: 'Offline',
|
|
},
|
|
};
|
|
|
|
export function ServiceCard({ service }: ServiceCardProps) {
|
|
const config = statusConfig[service.status];
|
|
|
|
return (
|
|
<a
|
|
href={service.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group block"
|
|
>
|
|
<div className="h-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden hover:border-slate-300 dark:hover:border-slate-600">
|
|
<div className="p-6 flex flex-col gap-4 h-full">
|
|
{/* Header mit Name und Status */}
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 flex items-center gap-3">
|
|
{service.icon && <span className="text-2xl">{service.icon}</span>}
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
|
{service.name}
|
|
</h3>
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
|
{service.category}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className={`flex items-center gap-2 px-3 py-1 rounded-full ${config.bgColor}`}>
|
|
<span className={`w-2 h-2 rounded-full ${config.dotColor} animate-pulse`} />
|
|
<span className={`text-xs font-medium ${config.textColor}`}>
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Beschreibung */}
|
|
<p className="text-sm text-slate-600 dark:text-slate-400 flex-grow">
|
|
{service.description}
|
|
</p>
|
|
|
|
{/* Button */}
|
|
<div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.open(service.url, '_blank');
|
|
}}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 group/btn"
|
|
>
|
|
Öffnen
|
|
<svg
|
|
className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
}
|