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 51 52 53 54 55 56 57 58 59 60 61 | 2x 4x 4x | import { Stack } from "@mui/material";
import { InfoIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import GiveDateTooltip from "@shared/Tooltip/GiveDateTooltip";
import { EDIT_WARN_MESSAGE } from "../constants";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import moment from "moment";
import { PLATFORM_TIMEZONE } from "@utils/timezones";
type Props = {
endDate: number;
hasEnded?: boolean;
hasEndedMessage: string;
showTime?: boolean;
};
const EventsEndDateSection = ({
endDate,
hasEnded,
hasEndedMessage,
showTime,
}: Props) => {
const { isMobileView } = useCustomThemeV2();
return (
<Stack gap="12px">
<GiveText color="secondary" variant="bodyXS">
End Date:
</GiveText>
<Stack gap="3px">
<Stack direction="row" alignItems="center" gap="4px">
<GiveDateTooltip>
<GiveText color={hasEnded ? "secondary" : "primary"} variant="bodyS">
{moment(endDate).tz(PLATFORM_TIMEZONE).format("MMMM D, YYYY")}
</GiveText>
</GiveDateTooltip>
<GiveTooltip
width="compact"
alignment="left"
placement={isMobileView ? "top" : "top-start"}
title={hasEnded ? hasEndedMessage : EDIT_WARN_MESSAGE}
color="default"
customTooltipStyles={{ width: "fit-content" }}
>
<InfoIcon size={14} />
</GiveTooltip>
</Stack>
{showTime && (
<GiveText color="secondary" variant="bodyXS">
{moment(endDate).tz(PLATFORM_TIMEZONE).format("hh:mm A")}
</GiveText>
)}
</Stack>
</Stack>
);
};
export default EventsEndDateSection;
|