add minor ticks to timeline

This commit is contained in:
Josh Hawkins 2024-03-12 08:24:51 -05:00
parent 1c5d6765a1
commit 6f2d24a05a

View File

@ -64,8 +64,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
className={`h-0.5 ${ className={`h-0.5 ${
timestamp.getMinutes() % timestampSpread === 0 && timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0 timestamp.getSeconds() === 0
? "w-[12px] bg-gray-400" ? "w-[12px] bg-neutral-600"
: "w-[8px] bg-gray-600" : timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) ===
0 && timestamp.getSeconds() === 0
? "w-[8px] bg-neutral-500 dark:bg-neutral-600" // Minor tick mark
: "w-[5px] bg-neutral-400 dark:bg-neutral-700"
}`} }`}
></div> ></div>
</div> </div>
@ -81,11 +84,11 @@ export function Timestamp({
segmentKey, segmentKey,
}: TimestampSegmentProps) { }: TimestampSegmentProps) {
return ( return (
<div className="absolute left-[15px] top-[1px] h-2 z-10"> <div className="absolute left-[15px] h-2 z-10">
{!isFirstSegmentInMinimap && !isLastSegmentInMinimap && ( {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
<div <div
key={`${segmentKey}_timestamp`} key={`${segmentKey}_timestamp`}
className="text-[8px] text-gray-400" className="text-[8px] text-neutral-600"
> >
{timestamp.getMinutes() % timestampSpread === 0 && {timestamp.getMinutes() % timestampSpread === 0 &&
timestamp.getSeconds() === 0 && timestamp.getSeconds() === 0 &&