3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-03 00:19:03 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use locale to format dates and times (#123)

Browse source 
* Use deployment url in demo description.

Close #131
This commit is contained in:
Luke Vella 2022-04-26 20:10:59 +01:00 • committed by GitHub
parent 8263926168
commit 8aec24308e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
40 changed files with 1240 additions and 864 deletions
Download patch file Download diff file Expand all files Collapse all files

83
components/preferences.tsx Normal file
View file

@ -0,0 +1,83 @@
import clsx from "clsx";
import { useTranslation } from "next-i18next";
import React from "react";
import Calendar from "@/components/icons/calendar.svg";
import { usePreferences } from "./preferences/use-preferences";
const Preferences: React.VoidFunctionComponent = () => {
const { t } = useTranslation("app");
const { weekStartsOn, setWeekStartsOn, timeFormat, setTimeFormat } =
usePreferences();
return (
<div className="-mb-2">
<div className="mb-4 flex items-center space-x-2 text-base font-semibold">
<Calendar className="inline-block w-5" />
<span>{t("timeAndDate")}</span>
</div>
<div className="grow">
<div className="mb-2">
<div className="mb-2 grow text-sm text-slate-500">Week starts on</div>
<div>
<div className="segment-button inline-flex">
<button
className={clsx({
"segment-button-active": weekStartsOn === "monday",
})}
onClick={() => {
setWeekStartsOn("monday");
}}
type="button"
>
{t("monday")}
</button>
<button
className={clsx({
"segment-button-active": weekStartsOn === "sunday",
})}
onClick={() => {
setWeekStartsOn("sunday");
}}
type="button"
>
{t("sunday")}
</button>
</div>
</div>
</div>
<div className="mb-2">
<div className="mb-2 grow text-sm text-slate-500">Time format</div>
<div className="segment-button inline-flex">
<button
className={clsx({
"segment-button-active": timeFormat === "12h",
})}
onClick={() => {
setTimeFormat("12h");
}}
type="button"
>
{t("12h")}
</button>
<button
className={clsx({
"segment-button-active": timeFormat === "24h",
})}
onClick={() => {
setTimeFormat("24h");
}}
type="button"
>
{t("24h")}
</button>
</div>
</div>
</div>
</div>
);
};
export default Preferences;