66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import type { SchedulingView } from '../types'
|
|
|
|
interface SchedulingCardProps {
|
|
title: string
|
|
description: string
|
|
icon: React.ReactNode
|
|
status: {
|
|
label: string
|
|
color: 'green' | 'blue' | 'yellow'
|
|
}
|
|
footer: {
|
|
left: string
|
|
right: string
|
|
}
|
|
onClick: () => void
|
|
}
|
|
|
|
export function SchedulingCard({ title, description, icon, status, footer, onClick }: SchedulingCardProps) {
|
|
const statusColors = {
|
|
green: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400',
|
|
blue: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400',
|
|
yellow: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400',
|
|
}
|
|
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-gray-200 dark:border-gray-700 hover:border-blue-300"
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColors[status.color]}`}>
|
|
{status.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
{title}
|
|
</h3>
|
|
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
|
{description}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
|
|
<span>{footer.left}</span>
|
|
<div className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
|
|
<span className="mr-1">{footer.right}</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|