Add calendar overview panel

Adds a new panel to display an overview of upcoming conferences and their deadlines. This provides users with a convenient way to see all deadlines at a glance.

src/App.tsx

@@ -1,3 +1,4 @@
+
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -5,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
+import Calendar from "./pages/Calendar";
 
 const queryClient = new QueryClient();
 
@@ -16,7 +18,7 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="/calendar" element={<Calendar />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>

src/components/Header.tsx

@@ -1,4 +1,8 @@
+
 import { Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Link } from "react-router-dom";
+import { CalendarDays } from "lucide-react";
 
 interface HeaderProps {
   onSearch: (query: string) => void;
@@ -6,26 +10,35 @@ interface HeaderProps {
 
 const Header = ({ onSearch }: HeaderProps) => {
   return (
-    <header className="w-full py-6 px-4 sm:px-6 lg:px-8 bg-white shadow-sm animate-fade-in">
-      <div className="max-w-7xl mx-auto">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <img 
-              src="https://huggingface.co/front/assets/huggingface_logo.svg" 
-              alt="Hugging Face Logo" 
-              className="h-8 w-auto"
-            />
-            <div className="h-6 w-px bg-neutral-200 mx-2" />
-            <h1 className="text-2xl font-bold text-neutral-dark">AI Conference Deadlines</h1>
+    <header className="bg-white border-b">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center gap-8">
+            <Link to="/" className="text-2xl font-bold text-primary">
+              AI Deadlines
+            </Link>
+            <nav className="hidden md:flex space-x-4">
+              <Link
+                to="/calendar"
+                className="text-neutral-600 hover:text-primary flex items-center gap-2"
+              >
+                <CalendarDays className="h-5 w-5" />
+                Calendar
+              </Link>
+            </nav>
           </div>
-          <div className="relative w-full max-w-md ml-4">
-            <input
-              type="text"
-              placeholder="Search conferences..."
-              onChange={(e) => onSearch(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary bg-neutral-50"
-            />
-            <Search className="absolute left-3 top-2.5 h-5 w-5 text-neutral" />
+          <div className="max-w-lg w-full lg:max-w-xs">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Search className="h-5 w-5 text-neutral-400" />
+              </div>
+              <Input
+                type="search"
+                placeholder="Search conferences..."
+                className="pl-10"
+                onChange={(e) => onSearch(e.target.value)}
+              />
+            </div>
           </div>
         </div>
       </div>

src/pages/Calendar.tsx

@@ -0,0 +1,102 @@
+
+import { useState } from "react";
+import conferencesData from "@/data/conferences.yml";
+import { Conference } from "@/types/conference";
+import { Calendar as CalendarIcon, Tag } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { parseISO, format, isValid } from "date-fns";
+
+const CalendarPage = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
+  
+  // Get all unique dates (deadlines and conference dates)
+  const getDatesWithEvents = () => {
+    const dates = new Set<string>();
+    conferencesData.forEach((conf: Conference) => {
+      if (conf.deadline && conf.deadline !== 'TBD' && isValid(parseISO(conf.deadline))) {
+        dates.add(format(parseISO(conf.deadline), 'yyyy-MM-dd'));
+      }
+      if (conf.start && isValid(parseISO(conf.start))) {
+        dates.add(format(parseISO(conf.start), 'yyyy-MM-dd'));
+      }
+    });
+    return Array.from(dates).map(date => parseISO(date));
+  };
+
+  // Get conferences for selected date
+  const getConferencesForDate = (date: Date) => {
+    const formattedDate = format(date, 'yyyy-MM-dd');
+    return conferencesData.filter((conf: Conference) => {
+      const deadlineDate = conf.deadline && conf.deadline !== 'TBD' ? format(parseISO(conf.deadline), 'yyyy-MM-dd') : null;
+      const startDate = conf.start ? format(parseISO(conf.start), 'yyyy-MM-dd') : null;
+      return deadlineDate === formattedDate || startDate === formattedDate;
+    });
+  };
+
+  const selectedDateConferences = selectedDate ? getConferencesForDate(selectedDate) : [];
+
+  return (
+    <div className="min-h-screen bg-neutral-light p-6">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">Calendar Overview</h1>
+        <div className="grid md:grid-cols-2 gap-8">
+          <div>
+            <Calendar
+              mode="single"
+              selected={selectedDate}
+              onSelect={setSelectedDate}
+              className="bg-white rounded-lg p-4 shadow-sm"
+              modifiers={{
+                event: getDatesWithEvents()
+              }}
+              modifiersStyles={{
+                event: {
+                  fontWeight: 'bold',
+                  color: '#0284C7',
+                  textDecoration: 'underline'
+                }
+              }}
+            />
+          </div>
+          <div className="space-y-4">
+            {selectedDate && (
+              <>
+                <h2 className="text-xl font-semibold flex items-center gap-2">
+                  <CalendarIcon className="h-5 w-5" />
+                  Events on {format(selectedDate, 'MMMM d, yyyy')}
+                </h2>
+                {selectedDateConferences.length === 0 ? (
+                  <p className="text-neutral-600">No events on this date.</p>
+                ) : (
+                  <div className="space-y-4">
+                    {selectedDateConferences.map((conf: Conference) => (
+                      <div key={conf.id} className="bg-white p-4 rounded-lg shadow-sm">
+                        <h3 className="font-semibold text-lg">{conf.title}</h3>
+                        {conf.deadline && format(parseISO(conf.deadline), 'yyyy-MM-dd') === format(selectedDate, 'yyyy-MM-dd') && (
+                          <p className="text-red-600">Submission Deadline</p>
+                        )}
+                        {conf.start && format(parseISO(conf.start), 'yyyy-MM-dd') === format(selectedDate, 'yyyy-MM-dd') && (
+                          <p className="text-green-600">Conference Start Date</p>
+                        )}
+                        <div className="mt-2 flex flex-wrap gap-2">
+                          {conf.tags.map((tag) => (
+                            <span key={tag} className="tag text-sm">
+                              <Tag className="h-3 w-3 mr-1" />
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPage;