You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.2 KiB
47 lines
1.2 KiB
import classNames from "classnames";
|
|
|
|
import Event from "./event";
|
|
|
|
const colorVariants = {
|
|
// https://tailwindcss.com/docs/content-configuration#dynamic-class-names
|
|
amber: "bg-amber-500",
|
|
blue: "bg-blue-500",
|
|
cyan: "bg-cyan-500",
|
|
emerald: "bg-emerald-500",
|
|
fuchsia: "bg-fuchsia-500",
|
|
gray: "bg-gray-500",
|
|
green: "bg-green-500",
|
|
indigo: "bg-indigo-500",
|
|
lime: "bg-lime-500",
|
|
neutral: "bg-neutral-500",
|
|
orange: "bg-orange-500",
|
|
pink: "bg-pink-500",
|
|
purple: "bg-purple-500",
|
|
red: "bg-red-500",
|
|
rose: "bg-rose-500",
|
|
sky: "bg-sky-500",
|
|
slate: "bg-slate-500",
|
|
stone: "bg-stone-500",
|
|
teal: "bg-teal-500",
|
|
violet: "bg-violet-500",
|
|
white: "bg-white-500",
|
|
yellow: "bg-yellow-500",
|
|
zinc: "bg-zinc-500",
|
|
};
|
|
|
|
export default function Agenda({ tasks }) {
|
|
return (
|
|
<div className="pl-1 pr-1 pb-1">
|
|
<div className={classNames("flex flex-col", !tasks.length && "animate-pulse")}>
|
|
{tasks.map((task) => (
|
|
<Event
|
|
key={task.id} // Use the unique task ID as the key
|
|
task={task} // Pass the task object to the Event component
|
|
colorVariants={colorVariants} // Pass color variants to Event component
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|