huggingface/ai-deadlines

1import { CalendarDays, Globe, Tag, Clock, AlarmClock } from "lucide-react";2import { Conference } from "@/types/conference";3import { formatDistanceToNow, parseISO, isValid, isPast } from "date-fns";4import ConferenceDialog from "./ConferenceDialog";5import { useState } from "react";6import { getDeadlineInLocalTime } from '@/utils/dateUtils';7import { getNextUpcomingDeadline, getPrimaryDeadline } from '@/utils/deadlineUtils';8 9const ConferenceCard = ({10  title,11  full_name,12  year,13  date,14  deadline,15  timezone,16  tags = [],17  link,18  note,19  abstract_deadline,20  city,21  country,22  venue,23  ...conferenceProps24}: Conference) => {25  const [dialogOpen, setDialogOpen] = useState(false);26  27  // Get the next upcoming deadline or primary deadline for display28  const conference = {29    title, full_name, year, date, deadline, timezone, tags, link, note,30    abstract_deadline, city, country, venue, ...conferenceProps31  };32  33  const nextDeadline = getNextUpcomingDeadline(conference) || getPrimaryDeadline(conference);34  const deadlineDate = nextDeadline ? getDeadlineInLocalTime(nextDeadline.date, nextDeadline.timezone || timezone) : null;35  36  // Add validation before using formatDistanceToNow37  const getTimeRemaining = () => {38    if (!deadlineDate || !isValid(deadlineDate)) {39      return 'TBD';40    }41    42    if (isPast(deadlineDate)) {43      return 'Deadline passed';44    }45    46    try {47      return formatDistanceToNow(deadlineDate, { addSuffix: true });48    } catch (error) {49      console.error('Error formatting time remaining:', error);50      return 'Invalid date';51    }52  };53 54  const timeRemaining = getTimeRemaining();55 56  // Create location string by concatenating city and country57  const location = [city, country].filter(Boolean).join(", ");58 59  // Determine countdown color based on days remaining60  const getCountdownColor = () => {61    if (!deadlineDate || !isValid(deadlineDate)) return "text-neutral-600";62    try {63      const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));64      if (daysRemaining <= 7) return "text-red-600";65      if (daysRemaining <= 30) return "text-orange-600";66      return "text-green-600";67    } catch (error) {68      console.error('Error calculating countdown color:', error);69      return "text-neutral-600";70    }71  };72 73  const handleCardClick = (e: React.MouseEvent) => {74    if (!(e.target as HTMLElement).closest('a') && 75        !(e.target as HTMLElement).closest('.tag-button')) {76      setDialogOpen(true);77    }78  };79 80  const handleTagClick = (e: React.MouseEvent, tag: string) => {81    e.stopPropagation();82    const searchParams = new URLSearchParams(window.location.search);83    const currentTags = searchParams.get('tags')?.split(',') || [];84    85    let newTags;86    if (currentTags.includes(tag)) {87      newTags = currentTags.filter(t => t !== tag);88    } else {89      newTags = [...currentTags, tag];90    }91    92    if (newTags.length > 0) {93      searchParams.set('tags', newTags.join(','));94    } else {95      searchParams.delete('tags');96    }97    98    const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;99    window.history.pushState({}, '', newUrl);100    window.dispatchEvent(new CustomEvent('urlchange', { detail: { tag } }));101  };102 103  return (104    <>105      <div 106        className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-4 flex flex-col cursor-pointer"107        onClick={handleCardClick}108      >109        <div className="flex justify-between items-start mb-2">110          <h3 className="text-lg font-semibold text-primary">111            {title} {year}112          </h3>113          {link && (114            <a 115              href={link}116              target="_blank"117              rel="noopener noreferrer" 118              className="hover:underline"119              onClick={(e) => e.stopPropagation()}120            >121              <Globe className="h-4 w-4 mr-2 flex-shrink-0" />122            </a>123          )}124        </div>125        126        <div className="flex flex-col gap-2 mb-3">127          <div className="flex items-center text-neutral">128            <CalendarDays className="h-4 w-4 mr-2 flex-shrink-0" />129            <span className="text-sm truncate">{date}</span>130          </div>131          {location && (132            <div className="flex items-center text-neutral">133              <Globe className="h-4 w-4 mr-2 flex-shrink-0" />134              <span className="text-sm truncate">{location}</span>135            </div>136          )}137          <div className="flex items-center text-neutral">138            <Clock className="h-4 w-4 mr-2 flex-shrink-0" />139            <span className="text-sm truncate">140              {nextDeadline ? `${nextDeadline.label}: ${nextDeadline.date}` : (deadline === 'TBD' ? 'TBD' : deadline)}141            </span>142          </div>143          <div className="flex items-center">144            <AlarmClock className={`h-4 w-4 mr-2 flex-shrink-0 ${getCountdownColor()}`} />145            <span className={`text-sm font-medium truncate ${getCountdownColor()}`}>146              {timeRemaining}147            </span>148          </div>149        </div>150 151        {Array.isArray(tags) && tags.length > 0 && (152          <div className="flex flex-wrap gap-2">153            {tags.map((tag) => (154              <button155                key={tag}156                className="tag tag-button"157                onClick={(e) => handleTagClick(e, tag)}158              >159                <Tag className="h-3 w-3 mr-1" />160                {tag}161              </button>162            ))}163          </div>164        )}165      </div>166 167      <ConferenceDialog168        conference={{169          title,170          full_name,171          year,172          date,173          deadline,174          timezone,175          tags,176          link,177          note,178          abstract_deadline,179          city,180          country,181          venue,182          ...conferenceProps183        }}184        open={dialogOpen}185        onOpenChange={setDialogOpen}186      />187    </>188  );189};190 191export default ConferenceCard;192