diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 2b23ee3..5e19b69 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,3 +1,4 @@ +import Locales from "@/components/Home/Locales"; import Image from "next/image"; export default function Page(): JSX.Element { @@ -82,113 +83,7 @@ export default function Page(): JSX.Element { -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
By clicking on 'LOGIN TO SPOTIFY', you accept the use of cookies diff --git a/apps/web/app/playing/page.tsx b/apps/web/app/playing/page.tsx new file mode 100644 index 0000000..0e29790 --- /dev/null +++ b/apps/web/app/playing/page.tsx @@ -0,0 +1,7 @@ +export default function Playing() { + return ( +
+
Playing
+
+ ); +} diff --git a/apps/web/components/Home/Locales.tsx b/apps/web/components/Home/Locales.tsx new file mode 100644 index 0000000..5ea35ef --- /dev/null +++ b/apps/web/components/Home/Locales.tsx @@ -0,0 +1,21 @@ +"use client"; + +import useLocales from "@/hooks/useLocales"; + +export default function Locales() { + const { locales, setLocale } = useLocales(); + + return ( +
+ {locales.map((locale) => ( + + ))} +
+ ); +} diff --git a/apps/web/hooks/useLocales.ts b/apps/web/hooks/useLocales.ts new file mode 100644 index 0000000..49ea2e7 --- /dev/null +++ b/apps/web/hooks/useLocales.ts @@ -0,0 +1,106 @@ +import { useLocalStorage } from "usehooks-ts"; + +const locales = [ + { + code: "en", + name: "English", + flag: "/flags/uk.svg", + }, + { + code: "fr", + name: "Français", + flag: "/flags/fr.svg", + }, + { + code: "it", + name: "Italiano", + flag: "/flags/it.svg", + }, + { + code: "es", + name: "Español", + flag: "/flags/es.svg", + }, + { + code: "ru", + name: "Pусский", + flag: "/flags/ru.svg", + }, + { + code: "de", + name: "Deutsch", + flag: "/flags/de.svg", + }, + { + code: "id", + name: "Indonesia", + flag: "/flags/id.svg", + }, + { + code: "cz", + name: "Czech", + flag: "/flags/cz.svg", + }, + { + code: "tr", + name: "Turkish", + flag: "/flags/tr.svg", + }, + { + code: "gr", + name: "Greece", + flag: "/flags/gr.svg", + }, + { + code: "zh_tw", + name: "Traditionnal Chinese", + flag: "/flags/zh_tw.svg", + }, + { + code: "ar", + name: "Arabic", + flag: "/flags/ar.svg", + }, + { + code: "eo", + name: "Esperanto", + flag: "/flags/eo.svg", + }, + { + code: "nl", + name: "Dutch", + flag: "/flags/nl.svg", + }, + { + code: "az", + name: "Azərbaycan", + flag: "/flags/az.png", + }, +] as const; + +function getBrowserLocale() { + if (typeof navigator === "undefined") return "en"; + + return navigator.language?.split("-")[0] ?? "en"; +} + +function getInitialLocale() { + const browserLocale = getBrowserLocale(); + return locales.find((locale) => locale.code === browserLocale) ?? locales[0]; +} + +export default function useLocales() { + const [currentLocale, setCurrentLocale] = useLocalStorage( + "locale", + getInitialLocale() + ); + + const setLocale = (locale: (typeof locales)[number]["code"]) => { + const newLocale = locales.find((l) => l.code === locale); + if (newLocale) { + setCurrentLocale(newLocale); + } + }; + + return { locales, currentLocale, setLocale }; +} diff --git a/apps/web/next.config.js b/apps/web/next.config.js index a5b0aec..4d5bb5c 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -1,4 +1,15 @@ /** @type {import('next').NextConfig} */ module.exports = { transpilePackages: ["@repo/ui"], + + async redirects() { + // Remove .php extension + return [ + { + source: "/:path*.php", + destination: "/:path*", + permanent: true, + }, + ]; + }, }; diff --git a/apps/web/package.json b/apps/web/package.json index 7e53f19..cfb82ff 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,7 +11,8 @@ "dependencies": { "next": "^14.1.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "usehooks-ts": "^3.1.0" }, "devDependencies": { "@next/eslint-plugin-next": "^14.1.1", diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index c1d99ba..5727278 100644 --- a/apps/web/tsconfig.json +++ b/apps/web/tsconfig.json @@ -5,7 +5,11 @@ { "name": "next" } - ] + ], + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } }, "include": [ "next-env.d.ts", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac2e1d4..0363f6a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + usehooks-ts: + specifier: ^3.1.0 + version: 3.1.0(react@18.2.0) devDependencies: '@next/eslint-plugin-next': specifier: ^14.1.1 @@ -3469,6 +3472,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash.debounce@4.0.8: + resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} + dev: false + /lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} dev: true @@ -5135,6 +5142,16 @@ packages: punycode: 2.3.0 dev: true + /usehooks-ts@3.1.0(react@18.2.0): + resolution: {integrity: sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==} + engines: {node: '>=16.15.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + dependencies: + lodash.debounce: 4.0.8 + react: 18.2.0 + dev: false + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true