diff --git a/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx b/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx new file mode 100644 index 000000000..158372db8 --- /dev/null +++ b/src/core/client/admin/routes/Configure/sections/General/Announcement.tsx @@ -0,0 +1,66 @@ +import { Localized } from "@fluent/react/compat"; +import { DateTime } from "luxon"; +import React, { FunctionComponent, useMemo } from "react"; + +import { useCoralContext } from "coral-framework/lib/bootstrap"; +import { + FormField, + FormFieldFooter, + FormFieldHeader, + Label, + Textarea, +} from "coral-ui/components/v2"; + +interface Props { + content: string; + createdAt: string; + duration: number; +} + +const Announcement: FunctionComponent = ({ + content, + createdAt, + duration, +}) => { + const { locales } = useCoralContext(); + const formattedDate = useMemo(() => { + const disableAt = DateTime.fromISO(createdAt) + .plus({ seconds: duration }) + .toJSDate(); + return new Intl.DateTimeFormat(locales, { + day: "2-digit", + month: "2-digit", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + }).format(new Date(disableAt)); + }, [createdAt, duration]); + return ( + + + + + + +