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

2
apps/tasks/eslint.config.js
View File

@@ -3,7 +3,7 @@ import baseConfig from "@homarr/eslint-config/base";
/** @type {import('typescript-eslint').Config} */ /** @type {import('typescript-eslint').Config} */
export default [ export default [
{ {
ignores: ["build/**"], ignores: ["tasks.cjs"],
}, },
...baseConfig, ...baseConfig,
]; ];

7
apps/websocket/eslint.config.js
View File

@@ -1,4 +1,9 @@
import baseConfig from "@homarr/eslint-config/base"; import baseConfig from "@homarr/eslint-config/base";
/** @type {import('typescript-eslint').Config} */ /** @type {import('typescript-eslint').Config} */
export default [...baseConfig]; export default [
{
ignores: ["wssServer.cjs"],
},
...baseConfig,
];

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

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