-
Notifications
You must be signed in to change notification settings - Fork 42
/
ramadan-timer.tsx
52 lines (43 loc) · 1.65 KB
/
ramadan-timer.tsx
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
import { HTMLAttributes, useContext } from "react";
import { CommonStoreContext } from "@/stores/common";
import Trans from "next-translate/Trans";
import { TimeNames } from "@/types";
import useTranslation from "next-translate/useTranslation";
export default function RamadanTimer() {
const { t } = useTranslation("common");
const { timerRamadan, times, settings } = useContext(CommonStoreContext);
const now = times?.time?.now;
if (!now) return null;
if (!settings.ramadanTimer) return null;
if (![TimeNames.Imsak, TimeNames.Gunes, TimeNames.Ogle].includes(now))
return null;
return (
<div className="relative z-0 px-4 py-1 flex gap-1 items-center text-base md:text-xl">
<span className="absolute -z-10 inset-0 rounded-xl bg-white bg-opacity-80 dark:bg-black dark:bg-opacity-20 shadow" />
<span>{t("iftarTime")}</span>
<span className="flex items-center gap-1">
{timerRamadan[0] > 0 && (
<span className="flex items-baseline gap-px">
<Trans
ns="common"
i18nKey="timerHour"
components={[<ValueComp key="hour" className="font-semibold" />]}
values={{ hour: timerRamadan[0] }}
/>
</span>
)}
<span className="flex items-baseline gap-px">
<Trans
ns="common"
i18nKey="timerMinute"
components={[<ValueComp key="minute" className="font-semibold" />]}
values={{ minute: timerRamadan[1] }}
/>
</span>
</span>
</div>
);
}
const ValueComp = (props: HTMLAttributes<HTMLSpanElement>) => (
<b className="tabular-nums" {...props} />
);