spb/uqo-chat

1import { BookOpen, Calculator, FileSpreadsheet, ListChecks, MessageSquareText, Sparkles } from 'lucide-react';2import type { Course } from '@/lib/types';34const ICONS = [Sparkles, Calculator, ListChecks, FileSpreadsheet, MessageSquareText];56export function EmptyState({ course, onPick, term }: { course?: Course; onPick: (t: string) => void; term: string }) {7  return (8    <div className="mx-auto max-w-[780px] px-3 sm:px-4 pt-3 sm:pt-10 pb-6 animate-fadein">9      <section className="relative overflow-hidden rounded-[24px] bg-uqo-gradient text-white px-5 py-6 sm:px-8 sm:py-8 shadow-float">10        <svg className="absolute -right-10 -top-10 h-56 w-56 opacity-15" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="100" fill="white" /></svg>11        <svg className="absolute right-16 bottom-[-60px] h-40 w-40 opacity-10" viewBox="0 0 200 200" aria-hidden="true"><circle cx="100" cy="100" r="100" fill="#78BE20" /></svg>12        <img src="/uqo-logo-white.png" alt="UQO" className="h-9 sm:h-11 w-auto" />13        <h1 className="mt-4 text-[22px] sm:text-[28px] font-bold leading-tight tracking-tight">Bonjour ! Sur quoi travaille-t-on aujourd'hui ?</h1>14        <p className="mt-2 text-sm sm:text-base text-white/85">15          {course ? <><span className="inline-block rounded-md bg-white/15 px-1.5 py-0.5 font-semibold text-white">{course.code}</span> {course.title}</> : 'Tuteur IA en évaluation immobilière'}16          {term ? <span className="text-white/70"> · {term}</span> : null}17        </p>18        <ul className="mt-4 flex flex-wrap gap-1.5 text-[11.5px] text-white/85">19          {['Explique et cite tes notes de cours', 'Calcule en Python vérifié', 'Crée et modifie des Excel', 'Quiz et fiches Word'].map((t) => (20            <li key={t} className="rounded-full bg-white/12 px-2.5 py-1 backdrop-blur">{t}</li>21          ))}22        </ul>23      </section>2425      {course?.announcement && (26        <div className="mt-3 rounded-2xl border border-uqo-gold/40 bg-[#fff8dc] px-4 py-3 text-sm shadow-soft">27          <b className="text-[#7a6300]">Annonce du professeur</b>28          <p className="mt-0.5">{course.announcement}</p>29        </div>30      )}3132      <h2 className="mt-5 mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-muted">Pour commencer</h2>33      <div className="grid gap-2 sm:grid-cols-2">34        {(course?.suggestions || []).map((s, i) => {35          const Icon = ICONS[i % ICONS.length];36          return (37            <button key={s} onClick={() => onPick(s)} className="group flex items-center gap-3 rounded-2xl border border-neutral-line bg-white px-4 py-3.5 text-left text-[14.5px] hover:border-uqo-blue/50 hover:shadow-soft active:scale-[0.99] transition min-h-[58px]">38              <span className="h-9 w-9 rounded-xl bg-uqo-blue-light text-uqo-blue inline-flex items-center justify-center shrink-0 group-hover:bg-uqo-blue group-hover:text-white transition"><Icon size={17} /></span>39              <span className="text-neutral-text">{s}</span>40            </button>41          );42        })}43      </div>4445      {course?.site && (46        <a href={course.site} target="_blank" rel="noopener noreferrer" className="mt-3 flex items-center gap-3 rounded-2xl border border-dashed border-neutral-line px-4 py-3 text-sm text-neutral-muted hover:border-uqo-blue/50 hover:text-uqo-blue-dark">47          <BookOpen size={16} className="text-uqo-blue" /> Notes de cours interactives : {course.site.replace('https://', '')}48        </a>49      )}5051      {course?.deadlines?.length ? (52        <div className="mt-5">53          <h2 className="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-neutral-muted">Échéances</h2>54          <ul className="rounded-2xl border border-neutral-line bg-white divide-y divide-neutral-line/70">55            {course.deadlines.map((d) => <li key={d.label} className="flex justify-between px-4 py-2.5 text-sm"><span>{d.label}</span><span className="text-neutral-muted tabular-nums">{d.date}</span></li>)}56          </ul>57        </div>58      ) : null}59    </div>60  );61}62