Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 520x 1594x 1594x 1x 1594x 1594x 1594x 1594x 1594x 1x | import dayjs from "dayjs";
import { ReactElement, useRef } from "react";
import { capitalize } from "remeda";
import styled from "styled-components";
import { MOBILE_MARGIN } from "client/globalStyle";
import { useTimeNow } from "client/utils/useTimeNow";
import { getFormattedTime } from "client/views/program-item/programItemUtils";
interface Props {
startTime: string;
}
export const ProgramItemListTitle = ({ startTime }: Props): ReactElement => {
const intersectionRef = useRef<HTMLDivElement | null>(null);
return (
<ProgramItemListTitleContainer key={startTime} ref={intersectionRef}>
{/* Include the date outside event week so the weekday isn't ambiguous */}
<StyledHeader>
{capitalize(getFormattedTime(dayjs(startTime), useTimeNow()))}
</StyledHeader>
</ProgramItemListTitleContainer>
);
};
const ProgramItemListTitleContainer = styled.div`
z-index: 2;
margin: 20px 0 20px 0;
padding: 8px;
background: ${(props) => props.theme.backgroundCard};
color: ${(props) => props.theme.textLighter};
border-radius: 4px;
position: sticky;
top: 0;
box-shadow: ${(props) => props.theme.shadowHigher};
@media (max-width: ${(props) => props.theme.breakpointPhone}) {
border-radius: 0;
}
@media (max-width: ${(props) => props.theme.breakpointDesktop}) {
margin-left: -${MOBILE_MARGIN}px;
margin-right: -${MOBILE_MARGIN}px;
}
`;
const StyledHeader = styled.h2`
margin: 4px 0 4px 0;
`;
|