laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
94 lines (93 loc) • 3.89 kB
JavaScript
"use client";
import { jsx as l, jsxs as s } from "react/jsx-runtime";
import c from "../../../_virtual/dayjs.min.js";
import { l as n } from "../../../_virtual/lodash.js";
import { useMemo as m } from "react";
import { hexContrast as b, hexToRgba as u, cn as v } from "../../../lib/utils.js";
import { TooltipProvider as g, Tooltip as T, TooltipTrigger as N, TooltipContent as y } from "../tooltip.js";
import { Typo as C } from "../typo.js";
import { useCalendar as k } from "./calendar-context.js";
const H = ({ appointment: e }) => {
const { setSelectedAppointmentId: h } = k(), f = m(() => {
if (e.color)
return {
backgroundColor: u(e.color, 0.75),
borderColor: u(e.color, 1),
color: b(e.color),
backdropFilter: "blur(5px)"
};
}, [e.color]), o = e.endTime || c(`2000-01-01 ${e.startTime}`).add(1, "hour").format("HH:mm"), x = m(() => {
const r = c(`2000-01-01 ${e.startTime}`), a = c(`2000-01-01 ${o}`).diff(r, "minute"), i = Math.floor(a / 60), d = a % 60;
return i === 0 ? `${d}m` : d === 0 ? `${i}h` : `${i}h ${d}m`;
}, [e.startTime, o]);
return /* @__PURE__ */ l(g, { delayDuration: 300, children: /* @__PURE__ */ s(T, { children: [
/* @__PURE__ */ l(N, { asChild: !0, children: /* @__PURE__ */ s(
"div",
{
onClick: (r) => {
r.preventDefault(), r.stopPropagation(), h(e.id);
},
style: f,
className: v(
"border-d-border flex h-full cursor-pointer flex-col justify-start rounded-r-md border border-l-4 p-2 shadow-md transition-all duration-200 ease-in-out hover:scale-105",
e.className
),
children: [
/* @__PURE__ */ l("div", { className: "text-sm font-semibold", children: e?.title?.length > 15 ? e?.title?.slice(0, 15) + "..." : e?.title }),
/* @__PURE__ */ s("div", { className: "text-xs", children: [
e?.startTime,
" - ",
o
] }),
e?.attributes?.filter((r) => r.showPreview).map((r, t) => /* @__PURE__ */ s(
"div",
{
className: "bg-d-background/30 mt-1 rounded p-1 text-xs",
children: [
/* @__PURE__ */ l("span", { className: "font-semibold", children: r.key }),
":",
" ",
/* @__PURE__ */ l("span", { className: "font-medium", children: r.value })
]
},
t
))
]
}
) }),
/* @__PURE__ */ s(y, { side: "right", variant: "card", children: [
e?.title && /* @__PURE__ */ s(C, { children: [
e?.title,
" (",
x,
")"
] }),
/* @__PURE__ */ s("div", { className: "text-d-accent-foreground", children: [
e?.startTime,
" - ",
o
] }),
/* @__PURE__ */ s("div", { className: "mt-2 mb-3.5 flex flex-col", children: [
/* @__PURE__ */ l("span", { className: "font-medium", children: "Descrizione:" }),
/* @__PURE__ */ l("span", { className: "text-d-accent-foreground text-xs", children: e?.description || "-" })
] }),
e?.attributes && e.attributes.filter((r) => r.showTooltip).length > 0 && /* @__PURE__ */ l("div", { className: "space-y-1", children: e.attributes.filter((r) => r.showTooltip).map((r, t) => /* @__PURE__ */ s(
"div",
{
className: "flex items-start justify-between gap-4 py-1 text-right",
children: [
/* @__PURE__ */ s("span", { className: "font-medium", children: [
n.upperFirst(r.key),
":"
] }),
/* @__PURE__ */ l("span", { className: "text-d-accent-foreground max-w-[200px]", children: typeof r.value == "string" ? n.upperFirst(r.value) : r.value })
]
},
t
)) })
] })
] }) });
};
export {
H as AppointmentCard
};