jsonwebtoken.github.io/src/features/common/components/layout/page-layout/page-layout.component.tsx at 5d3c36235e95557e26da76310161ecfa9eabec58 · jsonwebtoken/jsonwebtoken.github.io · GitHub

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React, { PropsWithChildren } from "react";
import styles from "./page-layout.module.scss";
import { getLayoutDictionary } from "@/features/localization/services/language-dictionary.service";
import { ShellComponent } from "@/features/common/components/shell/shell.component";
import { FooterComponent } from "@/features/common/components/footer/footer.component";
import { ThemeCookieValues } from "@/features/common/values/theme.values";
import { PageHeaderComponent } from "@/features/common/components/layout/page-header/page-header.component";

interface LayoutComponentProps extends PropsWithChildren {
  languageCode: string;
  themeCode: ThemeCookieValues;
}

export const PageLayoutComponent: React.FC<LayoutComponentProps> = ({
  languageCode,
  themeCode,
  children,
}) => {
  const layoutDictionary = getLayoutDictionary(languageCode);

  return (
    <html lang={languageCode} data-theme={themeCode}>
      <head>
        {languageCode === "ja" && (
          <link rel="stylesheet" href="/fonts/japanese-fonts.css" />
        )}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                const setTheme = function(theme) {
                  document.documentElement.setAttribute('data-theme', theme);
                  document.cookie = 'preferred_theme=' + encodeURIComponent(theme) + '; path=/; max-age=31536000'; // 1 year
                };

                // Function to get cookie value
                const getCookie = function(name) {
                  let cookieValue = null;
                  if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                      const cookie = cookies[i].trim();
                      if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                      }
                    }
                  }
                  return cookieValue;
                };

                // Check if cookie exists and has a valid value
                const cookieValue = getCookie('preferred_theme');
                const validThemes = ['dark', 'light', 'system-dark', 'system-light'];

                if (cookieValue && validThemes.includes(cookieValue)) {
                  setTheme(cookieValue);
                  return;
                }

                // If no valid cookie, detect system preference
                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                  setTheme('system-dark');
                  return;
                }

                setTheme('system-light');
              })();
            `,
          }}
        />
      </head>
      <ShellComponent languageCode={languageCode} themeCode={themeCode}>
        <PageHeaderComponent
          languageCode={languageCode}
          themeCode={themeCode}
        />
        <main className={styles.main}>{children}</main>
        <FooterComponent
          languageCode={languageCode}
          dictionary={layoutDictionary.footer}
        />
      </ShellComponent>
    </html>
  );
};