Add localization for summary page

@@ -0,0 +1,31 @@import LocalizedStrings from "react-localization";const strings = new LocalizedStrings({  en: {    title: "Summary",    totalHours: "Total number of hours spent across all tags.",    varHours: (n) => `${n} hours`,    tagHours: "The number of hours you've spent per-tag.",    numHours: "# of hours",    logEmpty: "Your log is empty.",  },  // None of this is accurate past this line, someone please help me translate...  jp: {    title: "概要",    totalHours: "すべてのタグで費やされた合計時間数。",    varHours: (n) => `${n}時間`,    tagHours: "タグごとに費やした時間数。",    numHours: "時間数",    logEmpty: "ログは空です。",  },  pl: {    title: "Streszczenie",    totalHours: "Całkowita liczba godzin spędzonych na wszystkich tagach.",    varHours: (n) => `${n} godzin`,    tagHours: "Liczba godzin spędzonych na tagu.",    numHours: "liczba godzin",    logEmpty: "Twój dziennik nie ma wpisów.",  },});export default strings;

@@ -42,14 +42,14 @@ const About = () => {          </Creator>          <DescriptionContainer>            <KeysColumn>              <SectionTitle>Timer</SectionTitle>              <SectionTitle>{strings.sectionTimer}</SectionTitle>              <KeysDescription>                <span>⎇+r</span> {strings.keyReset}              </KeysDescription>              <KeysDescription>                <span>⎇+a</span> {strings.keyAddLog}              </KeysDescription>              <SectionTitle>Navigation</SectionTitle>              <SectionTitle>{strings.sectionNavigation}</SectionTitle>              <KeysDescription>                <span>⎇+t</span> {strings.keyTimerPage}              </KeysDescription>

@@ -61,7 +61,7 @@ const About = () => {              </KeysDescription>            </KeysColumn>            <KeysColumn>              <SectionTitle>Log</SectionTitle>              <SectionTitle>{strings.sectionLog}</SectionTitle>              <KeysDescription>                <span>↓</span> {strings.keyNextLogEntry}              </KeysDescription>

@@ -4,13 +4,13 @@ import Chart from "chart.js/auto";import Page from "../components/page";import { Context } from "../components/context";import strings from "../l10n/summary";const Summary = () => {  const { state, dispatch } = useContext(Context);  strings.setLanguage(state.language);  const canvasRef = useRef(null);  // strings.setLanguage(state.language);  const getLabels = (entries) => {    let tags = [];    entries.map((entry) => tags.push(...entry.tags));

@@ -51,7 +51,7 @@ const Summary = () => {        labels: getLabels(state.log),        datasets: [          {            label: "# of Hours",            label: strings.numHours,            data: getDatasets(state.log),            backgroundColor: [              "rgba(255, 99, 132, 0.5)",

@@ -69,7 +69,7 @@ const Summary = () => {    return () => {      chart.destroy();    };  }, []);  }, [state.language]);  return (    <Page title="Summary">

@@ -77,16 +77,16 @@ const Summary = () => {        <Main className={state.log.length <= 0 ? "empty" : ""} tabIndex="1">          {state.log.length > 0 ? (            <>              <Title>Summary</Title>              <p>Total number of hours spent across all tags.</p>              <TotalTime>{getTotalTime(state.log)} hours</TotalTime>              <p>The number of hours you've spent per-tag.</p>              <Title>{strings.title}</Title>              <p>{strings.totalHours}</p>              <TotalTime>{strings.varHours(getTotalTime(state.log))}</TotalTime>              <p>{strings.tagHours}</p>              <CanvasWrapper>                <canvas ref={canvasRef} />              </CanvasWrapper>            </>          ) : (            <Nothing>Your log is empty.</Nothing>            <Nothing>{strings.logEmpty}</Nothing>          )}        </Main>      </Grid>