jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Clock widget scalability (#644)

Browse Source
This commit is contained in:
SeDemal
2024-06-08 23:35:35 +02:00
committed by GitHub
parent 2c1b52aff9
commit bac09d8be5
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/widgets/src/clock/component.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { Flex, Stack, Text } from "@mantine/core";
import { Stack, Text } from "@mantine/core";
import dayjs from "dayjs";
import advancedFormat from "dayjs/plugin/advancedFormat";
import timezones from "dayjs/plugin/timezone";
@@ -20,21 +20,21 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
const time = useCurrentTime(options);
return (
<Flex classNames={{ root: "clock-wrapper" }} align="center" justify="center" h="100%">
<Stack classNames={{ root: "clock-text-stack" }} align="center" gap="xs">
{options.customTitleToggle && (
<Text classNames={{ root: "clock-customTitle-text" }}>{options.customTitle}</Text>
)}
<Text classNames={{ root: "clock-time-text" }} fw={700} size="2.125rem" lh="1">
{dayjs(time).tz(timezone).format(timeFormat)}
<Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="10cqmin">
{options.customTitleToggle && (
<Text className="clock-customTitle-text" size="12.5cqmin" ta="center">
{options.customTitle}
</Text>
{options.showDate && (
<Text classNames={{ root: "clock-date-text" }} lineClamp={1}>
{dayjs(time).tz(timezone).format(dateFormat)}
</Text>
)}
</Stack>
</Flex>
)}
<Text className="clock-time-text" fw={700} size="22.5cqmin" lh="1">
{dayjs(time).tz(timezone).format(timeFormat)}
</Text>
{options.showDate && (
<Text className="clock-date-text" size="12.5cqmin" lineClamp={1}>
{dayjs(time).tz(timezone).format(dateFormat)}
</Text>
)}
</Stack>
);
}