Commit changes before merging to main

scheduling-remote/src/components/scheduling/ui/SchedulingCard.tsx

@@ -0,0 +1,65 @@
+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>
+    )
+}
+