add colors and error components
This commit is contained in:
3
src/app/(main)/(home)/Layout.tsx
Normal file
3
src/app/(main)/(home)/Layout.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return <div className={"bg-bg"}>{children}</div>;
|
||||||
|
}
|
||||||
11
src/app/(main)/(home)/page.tsx
Normal file
11
src/app/(main)/(home)/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
"use client";
|
||||||
|
import { useDeviceStore } from "@/stores/useDeviceStore";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
const HomeMobile = dynamic(() => import("@/components/Home/Mobile"), { ssr: false });
|
||||||
|
const HomeDesktop = dynamic(() => import("@/components/Home/Desktop"), { ssr: false });
|
||||||
|
|
||||||
|
export default function HomePage() {
|
||||||
|
const isMobile = useDeviceStore((state) => state.isMobile);
|
||||||
|
return isMobile ? <HomeMobile /> : <HomeDesktop />;
|
||||||
|
}
|
||||||
42
src/app/global-error.tsx
Normal file
42
src/app/global-error.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
export default function GlobalError() {
|
||||||
|
return (
|
||||||
|
<html>
|
||||||
|
<body className="bg-bg text-text-primary flex min-h-screen items-center justify-center">
|
||||||
|
<div className="bg-card mx-4 w-full max-w-md rounded-xl p-8 text-center shadow-lg">
|
||||||
|
{/* آیکون هشدار */}
|
||||||
|
<div className="mb-4 flex justify-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="text-warning h-16 w-16"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* متن خطا */}
|
||||||
|
<h2 className="mb-3 text-2xl font-bold">مشکلی در سامانه رخ داده است</h2>
|
||||||
|
|
||||||
|
<p className="text-text-secondary mb-8 leading-relaxed">لطفاً ساعاتی بعد مجدد تلاش کنید.</p>
|
||||||
|
|
||||||
|
{/* دکمه رفرش */}
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="bg-primary-100 hover:bg-primary-200 focus:ring-primary-300 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none"
|
||||||
|
>
|
||||||
|
تلاش مجدد
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
src/app/not-found.tsx
Normal file
22
src/app/not-found.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="bg-bg text-text-primary flex min-h-screen items-center justify-center">
|
||||||
|
<div className="bg-card mx-4 w-full max-w-md rounded-xl p-8 text-center shadow-lg">
|
||||||
|
<h2 className="mb-2 text-2xl font-bold">صفحه مورد نظر یافت نشد</h2>
|
||||||
|
|
||||||
|
<p className="text-text-secondary mb-6 leading-relaxed">
|
||||||
|
متأسفانه صفحهای که به دنبال آن هستید وجود ندارد.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="bg-primary-100 hover:bg-primary-200 inline-block rounded-lg px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:shadow-lg"
|
||||||
|
>
|
||||||
|
بازگشت به صفحه اصلی
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { useTranslations } from "next-intl";
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
const t = useTranslations("HomePage");
|
|
||||||
return <h1>{t("title")}</h1>;
|
|
||||||
}
|
|
||||||
3
src/components/Header/Desktop/index.tsx
Normal file
3
src/components/Header/Desktop/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function DesktopHeader() {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
3
src/components/Header/Mobile/index.tsx
Normal file
3
src/components/Header/Mobile/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function MobileHeader() {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
3
src/components/Home/Desktop/index.tsx
Normal file
3
src/components/Home/Desktop/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function DesktopHome() {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
3
src/components/Home/Mobile/index.tsx
Normal file
3
src/components/Home/Mobile/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function MobileHome() {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
@@ -114,3 +114,89 @@ body {
|
|||||||
.maplibregl-popup-tip {
|
.maplibregl-popup-tip {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-family: "Ravi", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-map-bg: var(--color-surface);
|
||||||
|
--color-pwa-primary: var(--color-primary-100);
|
||||||
|
--color-pwa-text: var(--color-text-primary);
|
||||||
|
--color-navbar-dot: var(--color-gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* =====================
|
||||||
|
Primary (Purple)
|
||||||
|
====================== */
|
||||||
|
--color-primary-100: #7d34b9;
|
||||||
|
--color-primary-200: #9a5cff;
|
||||||
|
--color-primary-300: #b38bff;
|
||||||
|
--color-primary-400: #d1c2ff;
|
||||||
|
--color-primary-500: #ede9ff;
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
Background & Surface
|
||||||
|
====================== */
|
||||||
|
--color-bg: #ffffff;
|
||||||
|
--color-surface: #f8f9fb;
|
||||||
|
--color-card: #ffffff;
|
||||||
|
--color-border: #e5e7eb;
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
Text
|
||||||
|
====================== */
|
||||||
|
--color-text-primary: #111827;
|
||||||
|
--color-text-secondary: #6b7280;
|
||||||
|
--color-text-muted: #9ca3af;
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
State colors
|
||||||
|
====================== */
|
||||||
|
--color-success: #22c55e;
|
||||||
|
--color-warning: #facc15;
|
||||||
|
--color-error: #ef4444;
|
||||||
|
--color-info: #0ea5e9;
|
||||||
|
|
||||||
|
/* =====================
|
||||||
|
Gray scale
|
||||||
|
====================== */
|
||||||
|
--color-gray-50: #fcfcfc;
|
||||||
|
--color-gray-100: #f5f5f5;
|
||||||
|
--color-gray-200: #f0f0f0;
|
||||||
|
--color-gray-300: #d9d9d9;
|
||||||
|
--color-gray-400: #bfbfbf;
|
||||||
|
--color-gray-500: #8c8c8c;
|
||||||
|
--color-gray-600: #595959;
|
||||||
|
--color-gray-700: #454545;
|
||||||
|
--color-gray-800: #262626;
|
||||||
|
--color-gray-900: #1f1f1f;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--color-bg: #121212;
|
||||||
|
--color-surface: #181818;
|
||||||
|
--color-card: #1f1f1f;
|
||||||
|
--color-border: #2a2a2a;
|
||||||
|
|
||||||
|
--color-text-primary: #ffffff;
|
||||||
|
--color-text-secondary: #d1d5db;
|
||||||
|
--color-text-muted: #9ca3af;
|
||||||
|
|
||||||
|
--color-primary-100: #b38bff;
|
||||||
|
--color-primary-200: #9a5cff;
|
||||||
|
--color-primary-300: #7d34b9;
|
||||||
|
|
||||||
|
--color-gray-50: #1f1f1f;
|
||||||
|
--color-gray-100: #262626;
|
||||||
|
--color-gray-200: #2a2a2a;
|
||||||
|
--color-gray-300: #404040;
|
||||||
|
--color-gray-400: #525252;
|
||||||
|
--color-gray-500: #737373;
|
||||||
|
--color-gray-600: #a3a3a3;
|
||||||
|
--color-gray-700: #d4d4d4;
|
||||||
|
--color-gray-800: #e5e5e5;
|
||||||
|
--color-gray-900: #fafafa;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user