62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
"use client";
|
|
import style from "./ServiceItem.module.css";
|
|
import Avatar from "@components/Avatar/Avatar";
|
|
import { AppointmentEventByClient } from "@core/Models/Appointments.model";
|
|
import dayjs from "dayjs";
|
|
import "dayjs/locale/es";
|
|
import { testContrast } from "@core/app/theme/scheduleView";
|
|
import { formatDateLarge, formatTimeInterval } from "@core/helpers/format";
|
|
import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";
|
|
|
|
dayjs.locale("es");
|
|
|
|
interface ServiceItemProps {
|
|
style?: React.CSSProperties;
|
|
data: AppointmentEventByClient;
|
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
}
|
|
|
|
export default function ServiceItem(props: ServiceItemProps): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={style.serviceCard}
|
|
style={{
|
|
border: `1px solid ${props.data.color || "var(--primary)"}`,
|
|
borderLeft: `6px solid ${props.data.color || "var(--primary)"}`
|
|
}}
|
|
onClick={props.onClick}
|
|
>
|
|
<div className={style.cardHeader}>
|
|
<div className={style.serviceTitle}>{props.data.serviceName}</div>
|
|
<div className={style.serviceTimeBadge} style={{ backgroundColor: props.data.color || "var(--primary)" }}>
|
|
{formatTimeInterval(props.data.startTime, props.data.endTime)}
|
|
</div>
|
|
</div>
|
|
|
|
{props.data.serviceDescription && (
|
|
<div className={style.serviceDescription}>{props.data.serviceDescription}</div>
|
|
)}
|
|
|
|
<ServiceRatingSummary serviceId={props.data.serviceId} variant="card" />
|
|
|
|
<div className={style.cardFooter}>
|
|
<div className={style.collaboratorInfo}>
|
|
<Avatar
|
|
name={props.data.collaboratorName}
|
|
size="small"
|
|
border="none"
|
|
src={props.data.collaboratorAvatar}
|
|
alt={props.data.collaboratorName}
|
|
/>
|
|
<div className={style.collaboratorName} style={{ color: props.data.color }}>
|
|
{props.data.collaboratorName}
|
|
</div>
|
|
</div>
|
|
<div className={style.appointmentDate}>
|
|
{formatDateLarge(props.data.appointmentDate)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|