alma/NeahFront7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agenda widget

Browse Source
This commit is contained in:
Alma 2025-04-13 19:31:39 +02:00
parent 0a53c97f61
commit ebb7bba8ea
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/calendar.tsx
View File

@ -79,10 +79,18 @@ export function Calendar() {
}).format(date); }).format(date);
}; };
const formatTime = (dateString: string) => {
const date = new Date(dateString);
return new Intl.DateTimeFormat('fr-FR', {
hour: '2-digit',
minute: '2-digit',
}).format(date);
};
return ( return (
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg"> <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100"> <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
<CardTitle className="text-lg font-semibold text-gray-800">Calendar</CardTitle> <CardTitle className="text-lg font-semibold text-gray-800">Agenda</CardTitle>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@ -110,24 +118,36 @@ export function Calendar() {
> >
<div className="flex gap-2"> <div className="flex gap-2">
<div <div
className="flex-shrink-0 w-12 h-12 rounded-lg flex flex-col items-center justify-center border" className="flex-shrink-0 w-14 h-14 rounded-lg flex flex-col items-center justify-center border"
style={{ style={{
backgroundColor: `${event.calendarColor}10`, backgroundColor: `${event.calendarColor}10`,
borderColor: event.calendarColor borderColor: event.calendarColor
}} }}
> >
<CalendarIcon className="h-4 w-4" style={{ color: event.calendarColor }} />
<span <span
className="text-[10px] font-medium mt-0.5" className="text-[10px] font-medium"
style={{ color: event.calendarColor }} style={{ color: event.calendarColor }}
> >
{formatDate(event.start)} {formatDate(event.start)}
</span> </span>
<span
className="text-[10px] font-bold mt-0.5"
style={{ color: event.calendarColor }}
>
{formatTime(event.start)}
</span>
</div> </div>
<div className="flex-1 min-w-0 space-y-1"> <div className="flex-1 min-w-0 space-y-1">
<p className="text-sm font-medium text-gray-800 line-clamp-2"> <div className="flex items-start justify-between gap-2">
<p className="text-sm font-medium text-gray-800 line-clamp-2 flex-1">
{event.title} {event.title}
</p> </p>
{!event.allDay && (
<span className="text-[10px] text-gray-500 whitespace-nowrap">
{formatTime(event.start)} - {formatTime(event.end)}
</span>
)}
</div>
<div <div
className="flex items-center text-[10px] px-1.5 py-0.5 rounded-md" className="flex items-center text-[10px] px-1.5 py-0.5 rounded-md"
style={{ style={{