Add conference details modal

Adds a modal that displays detailed conference information when a user clicks on a conference tile.

src/components/ConferenceCard.tsx

@@ -2,6 +2,8 @@
 import { CalendarDays, Globe, Tag, Clock, AlarmClock } from "lucide-react";
 import { Conference } from "@/types/conference";
 import { formatDistanceToNow, parseISO, isValid } from "date-fns";
+import ConferenceDialog from "./ConferenceDialog";
+import { useState } from "react";
 
 const ConferenceCard = ({
   title,
@@ -14,7 +16,9 @@ const ConferenceCard = ({
   link,
   note,
   abstract_deadline,
+  ...conferenceProps
 }: Conference) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
   const deadlineDate = deadline && deadline !== 'TBD' ? parseISO(deadline) : null;
   const daysLeft = deadlineDate && isValid(deadlineDate) ? formatDistanceToNow(deadlineDate, { addSuffix: true }) : 'TBD';
   
@@ -27,65 +31,81 @@ const ConferenceCard = ({
     return "text-green-600";
   };
 
+  const handleCardClick = (e: React.MouseEvent) => {
+    // Only open dialog if the click wasn't on a link or interactive element
+    if (!(e.target as HTMLElement).closest('a')) {
+      setDialogOpen(true);
+    }
+  };
+
   return (
-    <div className="conference-card">
-      <div className="mb-3">
-        {link ? (
-          <a 
-            href={link}
-            target="_blank"
-            rel="noopener noreferrer" 
-            className="hover:underline"
-          >
-            <h3 className="text-lg font-semibold text-primary">{title}</h3>
-          </a>
-        ) : (
-          <h3 className="text-lg font-semibold">{title}</h3>
-        )}
-        {full_name && <p className="text-xs text-neutral-600 truncate">{full_name}</p>}
-      </div>
-      
-      <div className="flex flex-col gap-2 mb-3">
-        <div className="flex items-center text-neutral">
-          <CalendarDays className="h-4 w-4 mr-2 flex-shrink-0" />
-          <span className="text-sm truncate">{date}</span>
+    <>
+      <div className="conference-card cursor-pointer" onClick={handleCardClick}>
+        <div className="mb-3">
+          {link ? (
+            <a 
+              href={link}
+              target="_blank"
+              rel="noopener noreferrer" 
+              className="hover:underline"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h3 className="text-lg font-semibold text-primary">{title}</h3>
+            </a>
+          ) : (
+            <h3 className="text-lg font-semibold">{title}</h3>
+          )}
+          {full_name && <p className="text-xs text-neutral-600 truncate">{full_name}</p>}
         </div>
-        <div className="flex items-center text-neutral">
-          <Globe className="h-4 w-4 mr-2 flex-shrink-0" />
-          <span className="text-sm truncate">{place}</span>
-        </div>
-        <div className="flex items-center text-neutral">
-          <Clock className="h-4 w-4 mr-2 flex-shrink-0" />
-          <span className="text-sm truncate">
-            {deadline === 'TBD' ? 'TBD' : deadline}
-          </span>
-        </div>
-        <div className="flex items-center">
-          <AlarmClock className={`h-4 w-4 mr-2 flex-shrink-0 ${getCountdownColor()}`} />
-          <span className={`text-sm font-medium truncate ${getCountdownColor()}`}>
-            {daysLeft}
-          </span>
-        </div>
-      </div>
-
-      {Array.isArray(tags) && tags.length > 0 && (
-        <div className="flex flex-wrap gap-1 mt-auto">
-          {tags.map((tag) => (
-            <span key={tag} className="tag text-xs py-0.5">
-              <Tag className="h-3 w-3 mr-1" />
-              {tag}
+        
+        <div className="flex flex-col gap-2 mb-3">
+          <div className="flex items-center text-neutral">
+            <CalendarDays className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="text-sm truncate">{date}</span>
+          </div>
+          <div className="flex items-center text-neutral">
+            <Globe className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="text-sm truncate">{place}</span>
+          </div>
+          <div className="flex items-center text-neutral">
+            <Clock className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="text-sm truncate">
+              {deadline === 'TBD' ? 'TBD' : deadline}
+            </span>
+          </div>
+          <div className="flex items-center">
+            <AlarmClock className={`h-4 w-4 mr-2 flex-shrink-0 ${getCountdownColor()}`} />
+            <span className={`text-sm font-medium truncate ${getCountdownColor()}`}>
+              {daysLeft}
             </span>
-          ))}
+          </div>
         </div>
-      )}
 
-      {note && (
-        <div 
-          className="text-xs text-neutral-600 mt-2"
-          dangerouslySetInnerHTML={{ __html: note }}
-        />
-      )}
-    </div>
+        {Array.isArray(tags) && tags.length > 0 && (
+          <div className="flex flex-wrap gap-1 mt-auto">
+            {tags.map((tag) => (
+              <span key={tag} className="tag text-xs py-0.5">
+                <Tag className="h-3 w-3 mr-1" />
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {note && (
+          <div 
+            className="text-xs text-neutral-600 mt-2"
+            dangerouslySetInnerHTML={{ __html: note }}
+          />
+        )}
+      </div>
+
+      <ConferenceDialog
+        conference={{ title, full_name, date, place, deadline, timezone, tags, link, note, abstract_deadline, ...conferenceProps }}
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+      />
+    </>
   );
 };
 

src/components/ConferenceDialog.tsx

@@ -0,0 +1,111 @@
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { CalendarDays, Globe, Tag, Clock, AlarmClock } from "lucide-react";
+import { Conference } from "@/types/conference";
+import { formatDistanceToNow, parseISO, isValid } from "date-fns";
+
+interface ConferenceDialogProps {
+  conference: Conference;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogProps) => {
+  const deadlineDate = conference.deadline && conference.deadline !== 'TBD' ? parseISO(conference.deadline) : null;
+  const daysLeft = deadlineDate && isValid(deadlineDate) ? formatDistanceToNow(deadlineDate, { addSuffix: true }) : 'TBD';
+
+  const getCountdownColor = () => {
+    if (!deadlineDate || !isValid(deadlineDate)) return "text-neutral-600";
+    const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+    if (daysRemaining <= 7) return "text-red-600";
+    if (daysRemaining <= 30) return "text-orange-600";
+    return "text-green-600";
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold">
+            {conference.title}
+          </DialogTitle>
+          {conference.full_name && (
+            <p className="text-sm text-neutral-600">{conference.full_name}</p>
+          )}
+        </DialogHeader>
+        
+        <div className="space-y-4 py-4">
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center text-neutral">
+              <CalendarDays className="h-5 w-5 mr-3 flex-shrink-0" />
+              <span>{conference.date}</span>
+            </div>
+            <div className="flex items-center text-neutral">
+              <Globe className="h-5 w-5 mr-3 flex-shrink-0" />
+              <span>{conference.place}</span>
+            </div>
+            <div className="flex items-center text-neutral">
+              <Clock className="h-5 w-5 mr-3 flex-shrink-0" />
+              <div className="flex flex-col">
+                <span>Deadline: {conference.deadline === 'TBD' ? 'TBD' : conference.deadline}</span>
+                {conference.timezone && (
+                  <span className="text-sm text-neutral-500">Timezone: {conference.timezone}</span>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center">
+              <AlarmClock className={`h-5 w-5 mr-3 flex-shrink-0 ${getCountdownColor()}`} />
+              <span className={`font-medium ${getCountdownColor()}`}>
+                {daysLeft}
+              </span>
+            </div>
+          </div>
+
+          {conference.abstract_deadline && (
+            <div className="text-sm text-neutral-600">
+              Abstract Deadline: {conference.abstract_deadline}
+            </div>
+          )}
+
+          {Array.isArray(conference.tags) && conference.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {conference.tags.map((tag) => (
+                <span key={tag} className="tag">
+                  <Tag className="h-3 w-3 mr-1" />
+                  {tag}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {conference.note && (
+            <div 
+              className="text-sm text-neutral-600 mt-2 p-3 bg-neutral-50 rounded-lg"
+              dangerouslySetInnerHTML={{ __html: conference.note }}
+            />
+          )}
+
+          {conference.link && (
+            <div className="pt-2">
+              <a
+                href={conference.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-primary hover:underline"
+              >
+                Visit Conference Website →
+              </a>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ConferenceDialog;