Merge branch 'release/1.1.0'

Author: nekofar

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0] - 2023-08-21
+
+### <!-- 01 -->Features
+
+- Add Light/Dark Theme Switch functionality
+
+### <!-- 04 -->Refactor
+
+- Implement dark mode via Tailwind CSS classes
+- Add index files and change functions to default exports
+- Add ThemeSwitcher and updated color scheme for better visibility
+
+### <!-- 08 -->Miscellaneous Tasks
+
+- Add `usehooks-ts` dependency to the project
+
 ## [1.0.25] - 2023-08-19
 
 ### <!-- 07 -->Continuous Integrations

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-lingui-template",
-  "version": "1.0.25",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -22,7 +22,8 @@
     "langs": "2.0.0",
     "next": "13.4.13",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
     "@lingui/cli": "4.4.0",

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+export { default as Layout } from './layout'
+export { default as LocaleSwitcher } from './locale-switcher'
+export { default as ThemeSwitcher } from './theme-switcher'

src/components/index.ts

@@ -6,7 +6,7 @@ import { Trans } from '@lingui/macro'
 import clsx from 'clsx'
 import { Fragment } from 'react'
 
-export function LocaleSwitcher() {
+export default function LocaleSwitcher() {
   const { changeLocale } = useLocaleSwitcher()
 
   return (
@@ -15,7 +15,7 @@ export function LocaleSwitcher() {
       className="relative inline-block ltr:text-left rtl:text-right"
     >
       <div>
-        <Menu.Button className="-bg-gray-800 -text-gray-400 -hover:text-white -focus:outline-none -focus:ring-2 -focus:ring-white -focus:ring-offset-2 -focus:ring-offset-gray-800 flex items-center rounded-full">
+        <Menu.Button className="flex items-center rounded-full text-gray-900 dark:text-white">
           <span className="sr-only">
             <Trans>Open options</Trans>
           </span>

src/components/locale-switcher.tsx

@@ -0,0 +1,47 @@
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { t } from '@lingui/macro'
+import { useEffect, useState } from 'react'
+import { useIsMounted } from 'usehooks-ts'
+
+enum Theme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+const { Dark, Light } = Theme
+
+export default function ThemeSwitcher() {
+  const isMounted = useIsMounted()
+  const [theme, setTheme] = useState<Theme>(Light)
+
+  const isDarkMode = theme === Dark
+
+  useEffect(() => {
+    document.documentElement.classList.remove(Dark, Light)
+    document.documentElement.classList.add(theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === Light ? Dark : Light))
+  }
+
+  if (!isMounted) return null
+
+  return (
+    <div className="relative inline-block ltr:text-left rtl:text-right">
+      <button
+        onClick={toggleTheme}
+        className="flex items-center rounded-full text-gray-900 dark:text-white"
+      >
+        {isDarkMode ? (
+          <SunIcon className="h-7 w-7" />
+        ) : (
+          <MoonIcon className="h-7 w-7" />
+        )}
+        <span className="sr-only">
+          {isDarkMode ? t`Switch to light theme` : t`Switch to dark theme`}
+        </span>
+      </button>
+    </div>
+  )
+}

src/components/theme-switcher.tsx

@@ -0,0 +1,4 @@
+export * from './use-language-and-direction'
+export * from './use-lingui-init'
+export * from './use-locale'
+export * from './use-locale-switcher'

src/hooks/index.ts

@@ -25,6 +25,14 @@ msgstr "Next.js & Lingui: بناء موقع متعدد اللغات"
 msgid "Open options"
 msgstr "افتح الخيارات"
 
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to dark theme"
+msgstr "التبديل إلى المظهر المظلم"
+
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to light theme"
+msgstr "التبديل إلى المظهر الفاتح"
+
 #: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "مرحبًا بك في موقعنا التجريبي لـ Next.js و Lingui! اكتشف قوة الجمع بين Next.js، إطار عمل React القوي لبناء تطبيقات تتم رسمها من جانب الخادم، مع Lingui، الحل النهائي للدعم متعدد اللغات في مشاريع الويب الخاصة بك."

src/locales/ar/messages.po

@@ -25,6 +25,14 @@ msgstr "Next.js & Lingui: Building a Multi-Lingual Website"
 msgid "Open options"
 msgstr "Open options"
 
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to dark theme"
+msgstr "Switch to dark theme"
+
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to light theme"
+msgstr "Switch to light theme"
+
 #: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."

src/locales/en/messages.po

@@ -25,6 +25,14 @@ msgstr "Next.js & Lingui: ساخت یک وب سایت چند زبانه"
 msgid "Open options"
 msgstr "باز کردن گزینه ها"
 
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to dark theme"
+msgstr "تغییر به تم تاریک"
+
+#: src/components/theme-switcher.tsx:42
+msgid "Switch to light theme"
+msgstr "تغییر به تم روشن"
+
 #: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "به سایت دمو Next.js و Lingui ما خوش آمدید! قدرت ترکیب Next.js، یک فریم‌ورک React قدرتمند برای ساخت برنامه های رندر شده در سمت سرور، با Lingui، راه حل نهایی برای پشتیبانی چند زبانه در پروژه های وب خود را کشف کنید."