Merge branch 'develop' of https://git.witel.ir/witel-flix/frontend into develop

2026-04-15 12:49:03 +03:30
parent 415d794147 de9457cb80
commit 817bad53ec
22 changed files with 386 additions and 280 deletions
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,38 +1,38 @@
-import { getDirection } from '@/i18n/direction'
-import { routing } from '@/i18n/routing'
-import { ClientAppProvider } from '@/providers/ClientAppProvider'
-import '@/styles/globals.css'
-import type { Metadata } from 'next'
-import { hasLocale, NextIntlClientProvider } from 'next-intl'
-import { getMessages } from 'next-intl/server'
-import { notFound } from 'next/navigation'
+import { getDirection } from "@/i18n/direction";
+import { routing } from "@/i18n/routing";
+import { ClientAppProvider } from "@/providers/ClientAppProvider";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import { notFound } from "next/navigation";

 export const metadata: Metadata = {
-  title: 'Theater of dreams',
-}
+    title: "Theater of dreams",
+};

 export default async function RootLayout({
-  children,
-  params,
+    children,
+    params,
 }: Readonly<{
-  children: React.ReactNode
-  params: Promise<{ locale: string }>
+    children: React.ReactNode;
+    params: Promise<{ locale: string }>;
 }>) {
-  const { locale } = await params
-  if (!hasLocale(routing.locales, locale)) {
-    notFound()
-  }
+    const { locale } = await params;
+    if (!hasLocale(routing.locales, locale)) {
+        notFound();
+    }

-  const messages = await getMessages()
-  const dir = getDirection(locale)
+    const messages = await getMessages();
+    const dir = getDirection(locale);

-  return (
-    <html dir={dir} lang={locale} suppressHydrationWarning>
-      <head>
-        {/* Prevent theme flicker before hydration */}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
+    return (
+        <html dir={dir} lang={locale} suppressHydrationWarning>
+            <head>
+                {/* Prevent theme flicker before hydration */}
+                <script
+                    dangerouslySetInnerHTML={{
+                        __html: `
              (function() {
                try {
                  const stored = localStorage.getItem('theme');
@@ -41,15 +41,15 @@ export default async function RootLayout({
                } catch (e) {}
              })();
            `,
-          }}
-        />
-      </head>
+                    }}
+                />
+            </head>

-      <body className='bg-primary'>
-        <NextIntlClientProvider locale={locale} messages={messages}>
-          <ClientAppProvider>{children}</ClientAppProvider>
-        </NextIntlClientProvider>
-      </body>
-    </html>
-  )
+            <body className="bg-primary">
+                <NextIntlClientProvider locale={locale} messages={messages}>
+                    <ClientAppProvider>{children}</ClientAppProvider>
+                </NextIntlClientProvider>
+            </body>
+        </html>
+    );
 }
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,13 +1,14 @@
-import ThemeToggle from '@/components/UI/ThemeToggle'
-import { useTranslations } from 'next-intl'
+import ThemeToggle from "@/components/UI/ThemeToggle";
+import { useTranslations } from "next-intl";

 export default function Home() {
-  const t = useTranslations('Home')
-  return (
-    <main>
-      <ThemeToggle />
-      <h1>{t('title')}</h1>
-      <p>This project was generated completely offline.</p>
-    </main>
-  )
+    const t = useTranslations("Home");
+    return (
+        <main>
+            <ThemeToggle />
+            <h1>{t("title")}</h1>
+            <p>This project was generated completely offline.</p>
+        </main>
+    );
 }
+
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+export default function NotFound() {
+    return (
+        <div className="bg-pwa-primary text-text flex min-h-screen items-center justify-center">
+            <div className="bg-pwa-primary mx-4 w-full max-w-md rounded-xl p-8 text-center">
+                {/* آیکون خطا */}
+                {/*<div className="mb-4 flex justify-center">*/}
+                {/*    <svg*/}
+                {/*        xmlns="http://www.w3.org/2000/svg"*/}
+                {/*        className="h-16 w-16 text-core-red"*/}
+                {/*        fill="none"*/}
+                {/*        viewBox="0 0 24 24"*/}
+                {/*        stroke="currentColor"*/}
+                {/*    >*/}
+                {/*        <path*/}
+                {/*            strokeLinecap="round"*/}
+                {/*            strokeLinejoin="round"*/}
+                {/*            strokeWidth={2}*/}
+                {/*            d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"*/}
+                {/*        />*/}
+                {/*    </svg>*/}
+                {/*</div>*/}
+
+                {/* متن خطا */}
+                <h2 className="text-text mb-2 text-2xl font-bold">صفحه مورد نظر یافت نشد</h2>
+                <p className="text-text mb-6 leading-relaxed">متاسفانه صفحه‌ای مورد نظر وجود ندارد.</p>
+
+                {/* دکمه بازگشت با استفاده از کامپوننت Link */}
+                <Link
+                    href="/"
+                    className="bg-neo-aqua hover:bg-neo-aqua/70 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-colors duration-200 hover:shadow-lg"
+                >
+                    بازگشت به صفحه اصلی
+                </Link>
+            </div>
+        </div>
+    );
+}
--- a/src/components/UI/ThemeToggle.tsx
+++ b/src/components/UI/ThemeToggle.tsx
@@ -1,30 +1,26 @@
-'use client'
-
-import { motion } from 'framer-motion'
-import { Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-
-export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-
-  return (
-    <button
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className='flex cursor-pointer items-center py-2'
-    >
-      <motion.div
-        key={theme}
-        initial={{ rotate: -90, opacity: 0 }}
-        animate={{ rotate: 0, opacity: 1 }}
-        exit={{ rotate: 90, opacity: 0 }}
-        transition={{ duration: 0.5, ease: 'easeInOut' }}
-      >
-        {theme === 'dark' ? (
-          <Moon className='text-text size-6' />
-        ) : (
-          <Sun className='text-text size-6' />
-        )}
-      </motion.div>
-    </button>
-  )
-}
+"use client";
+
+import { motion } from "framer-motion";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+export default function ThemeToggle() {
+    const { theme, setTheme } = useTheme();
+
+    return (
+        <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="flex cursor-pointer items-center py-2"
+        >
+            <motion.div
+                key={theme}
+                initial={{ rotate: -90, opacity: 0 }}
+                animate={{ rotate: 0, opacity: 1 }}
+                exit={{ rotate: 90, opacity: 0 }}
+                transition={{ duration: 0.5, ease: "easeInOut" }}
+            >
+                {theme === "dark" ? <Moon className="text-text size-6" /> : <Sun className="text-text size-6" />}
+            </motion.div>
+        </button>
+    );
+}
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,15 +1,13 @@
-import { getRequestConfig } from 'next-intl/server'
-import { hasLocale } from 'next-intl'
-import { routing } from './routing'
+import { getRequestConfig } from "next-intl/server";
+import { hasLocale } from "next-intl";
+import { routing } from "./routing";

 export default getRequestConfig(async ({ requestLocale }) => {
-  const requested = await requestLocale
-  const locale = hasLocale(routing.locales, requested)
-    ? requested
-    : routing.defaultLocale
+    const requested = await requestLocale;
+    const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;

-  return {
-    locale,
-    messages: (await import(`../../messages/${locale}.json`)).default,
-  }
-})
+    return {
+        locale,
+        messages: (await import(`../../messages/${locale}.json`)).default,
+    };
+});
--- a/src/providers/ClientAppProvider.tsx
+++ b/src/providers/ClientAppProvider.tsx
@@ -1,44 +1,40 @@
-'use client'
-
-import { AnimatePresence, motion } from 'framer-motion'
-import { ThemeProvider } from 'next-themes'
-import { useEffect, useState } from 'react'
-
-export function ClientAppProvider({ children }: { children: React.ReactNode }) {
-  const [mounted, setMounted] = useState(false)
-
-  // wait for hydration
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <ThemeProvider
-      attribute='data-theme'
-      defaultTheme='dark'
-      enableSystem={false}
-    >
-      <AnimatePresence mode='wait'>
-        {!mounted ? (
-          <motion.div
-            key='splash'
-            className='bg-map-bg flex h-dvh w-dvw items-center justify-center'
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          />
-        ) : (
-          <motion.div
-            key='app'
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.3, ease: 'easeOut' }}
-            className='bg-map-bg'
-          >
-            {children}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </ThemeProvider>
-  )
-}
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ThemeProvider } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ClientAppProvider({ children }: { children: React.ReactNode }) {
+    const [mounted, setMounted] = useState(false);
+
+    // wait for hydration
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    return (
+        <ThemeProvider attribute="data-theme" defaultTheme="dark" enableSystem={false}>
+            <AnimatePresence mode="wait">
+                {!mounted ? (
+                    <motion.div
+                        key="splash"
+                        className="bg-map-bg flex h-dvh w-dvw items-center justify-center"
+                        initial={{ opacity: 1 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                    />
+                ) : (
+                    <motion.div
+                        key="app"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ duration: 0.3, ease: "easeOut" }}
+                        className="bg-map-bg"
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </ThemeProvider>
+    );
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,43 +1,43 @@
-@import 'tailwindcss';
-
-*,
-*::before,
-*::after,
-*::-webkit-scrollbar {
-  box-sizing: border-box;
-}
-
-* {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease,
-    border-color 0.3s ease;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-body {
-  margin: 0;
-}
-
-@theme {
-  --color-primary: #cbd5e1;
-  --color-text: #273343;
-
-  /* constants */
-  --color-neo-aqua: #16a795;
-  --color-core-red: #ef4444;
-  --color-warning: #eedd55;
-  --color-information: #0ea5e9;
-  --color-error: #ef4444;
-  --color-success: #22c55e;
-}
-
-[data-theme='dark'] {
-  --color-primary: #273343;
-  --color-text: #cbd5e1;
-}
+@import "tailwindcss";
+
+*,
+*::before,
+*::after,
+*::-webkit-scrollbar {
+    box-sizing: border-box;
+}
+
+* {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    transition:
+        background-color 0.3s ease,
+        color 0.3s ease,
+        border-color 0.3s ease;
+}
+
+*::-webkit-scrollbar {
+    display: none;
+}
+
+body {
+    margin: 0;
+}
+
+@theme {
+    --color-primary: #cbd5e1;
+    --color-text: #273343;
+
+    /* constants */
+    --color-neo-aqua: #16a795;
+    --color-core-red: #ef4444;
+    --color-warning: #eedd55;
+    --color-information: #0ea5e9;
+    --color-error: #ef4444;
+    --color-success: #22c55e;
+}
+
+[data-theme="dark"] {
+    --color-primary: #273343;
+    --color-text: #cbd5e1;
+}