40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { useId } from "react";
|
|
|
|
import dayjs from "@calcom/dayjs";
|
|
|
|
export const HorizontalLines = ({
|
|
hours,
|
|
numberOfGridStopsPerCell,
|
|
containerOffsetRef,
|
|
}: {
|
|
hours: dayjs.Dayjs[];
|
|
numberOfGridStopsPerCell: number;
|
|
containerOffsetRef: React.RefObject<HTMLDivElement>;
|
|
}) => {
|
|
const finalHour = hours[hours.length - 1].add(1, "hour").format("h A");
|
|
const id = useId();
|
|
return (
|
|
<div
|
|
className=" col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-300"
|
|
style={{
|
|
gridTemplateRows: `repeat(${hours.length}, minmax(${1.75 * numberOfGridStopsPerCell}rem,1fr)`,
|
|
}}>
|
|
<div className="row-end-1 h-7 " ref={containerOffsetRef} />
|
|
{hours.map((hour) => (
|
|
<>
|
|
<div key={`${id}-${hour.get("hour")}`}>
|
|
<div className="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400">
|
|
{hour.format("h A")}
|
|
</div>
|
|
</div>
|
|
</>
|
|
))}
|
|
<div key={`${id}-${finalHour}`}>
|
|
<div className="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400">
|
|
{finalHour}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|