witel/base-front-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'feature/components' (#5) from feature/components into develop

Browse Source 
Reviewed-on: Ruya/frontend#5
This commit is contained in:
behzadaslani
2026-04-21 11:58:52 +00:00
parent de9457cb80 c14a8a6b5a
commit 7b224c6158
19 changed files with 296 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
messages/ar.json Normal file
View File

@@ -0,0 +1,5 @@
{
"Home": {
"title": "مرحبا"
}
}

5
messages/en.json Normal file
View File

@@ -0,0 +1,5 @@
{
"Home": {
"title": "hello"
}
}

9
messages/fa.json
View File

@@ -1,4 +1,5 @@
{ {
"loading": "درحال دریافت داده", "Home": {
"error_fetch_data": "مشکلی در دریافت داده رخ داده است." "title": "سلام"
} }
}

5
messages/ku.json Normal file
View File

@@ -0,0 +1,5 @@
{
"Home": {
"title": "مرحبا"
}
}

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

2
package.json
View File

@@ -1,5 +1,5 @@
{ {
"name": "witelflix", "name": "cinematales",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",

114
src/app/layout.tsx → src/app/[locale]/layout.tsx
View File

@@ -1,59 +1,55 @@
import { ClientAppProvider } from "@/providers/ClientAppProvider"; import { getDirection } from "@/i18n/direction";
import "@/styles/globals.css"; import { routing } from "@/i18n/routing";
import type { Metadata } from "next"; import { ClientAppProvider } from "@/providers/ClientAppProvider";
import { getLocale, getMessages } from "next-intl/server"; import "@/styles/globals.css";
import { NextIntlClientProvider } from "next-intl"; import type { Metadata } from "next";
import { hasLocale, NextIntlClientProvider } from "next-intl";
export const metadata: Metadata = { import { getMessages } from "next-intl/server";
title: { import { notFound } from "next/navigation";
template: "%s | Theater of dreams",
default: "Theater of dreams", export const metadata: Metadata = {
}, title: "Theater of dreams",
description: "Theater of dreams", };
authors: {
name: "شرکت دانش بنیان ویرا ارتباطات یکتا تلفن (وایتل)", export default async function RootLayout({
url: "https://witel.ir", children,
}, params,
}: Readonly<{
manifest: "/manifest.json", children: React.ReactNode;
icons: { params: Promise<{ locale: string }>;
icon: "/logo/192px.png", }>) {
apple: "/logo/512px.png", const { locale } = await params;
}, if (!hasLocale(routing.locales, locale)) {
}; notFound();
export const viewport = { }
width: "device-width",
initialScale: 1, const messages = await getMessages();
maximumScale: 1, const dir = getDirection(locale);
};
return (
export default async function RootLayout({ children }: { children: React.ReactNode }) { <html dir={dir} lang={locale} suppressHydrationWarning>
const locale = await getLocale(); <head>
const messages = await getMessages({ locale }); {/* Prevent theme flicker before hydration */}
return ( <script
<html lang="en" suppressHydrationWarning> dangerouslySetInnerHTML={{
<head> __html: `
{/* Prevent theme flicker before hydration */} (function() {
<script try {
dangerouslySetInnerHTML={{ const stored = localStorage.getItem('theme');
__html: ` const theme = stored || 'dark';
(function() { document.documentElement.setAttribute('data-theme', theme);
try { } catch (e) {}
const stored = localStorage.getItem('theme'); })();
const theme = stored || 'dark'; `,
document.documentElement.setAttribute('data-theme', theme); }}
} catch (e) {} />
})(); </head>
`,
}} <body className="bg-background">
/> <NextIntlClientProvider locale={locale} messages={messages}>
</head> <ClientAppProvider>{children}</ClientAppProvider>
</NextIntlClientProvider>
<body className="bg-primary"> </body>
<NextIntlClientProvider locale={locale} messages={messages}> </html>
<ClientAppProvider>{children}</ClientAppProvider> );
</NextIntlClientProvider> }
</body>
</html>
);
}

14
src/app/[locale]/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
import ComponentsConteiner from "@/components/ComponentsConteiner";
import { useTranslations } from "next-intl";
export default function Home() {
const t = useTranslations("Home");
return (
<main>
<h1>{t("title")}</h1>
<p>This project was generated completely offline.</p>
<ComponentsConteiner />
</main>
);
}

11
src/app/page.tsx
View File

@@ -1,11 +0,0 @@
import ThemeToggle from "@/components/UI/ThemeToggle";
export default function Home() {
return (
<main>
<ThemeToggle />
<h1>Offline Next.js Template 🚀</h1>
<p>This project was generated completely offline.</p>
</main>
);
}

27
src/components/ComponentsConteiner.tsx Normal file
View File

@@ -0,0 +1,27 @@
"use client";
import { useState } from "react";
import PrimaryButton from "./buttons/PrimaryButton";
import ThemeToggle from "./UI/ThemeToggle";
import { Home } from "lucide-react";
export default function ComponentsConteiner() {
const [isLoading, setIsloading] = useState(false);
function dummyLoading() {
setIsloading(true);
setTimeout(() => {
setIsloading(false);
}, 1500);
}
return (
<div className="flex flex-col items-start gap-2 p-4">
<ThemeToggle />
<div className="w-36">
<PrimaryButton onClick={() => dummyLoading()} loading={isLoading}>
<Home size={20} />
<p>test icon</p>
</PrimaryButton>
</div>
</div>
);
}

69
src/components/buttons/PrimaryButton.tsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion";
import { LoaderPinwheel } from "lucide-react";
type PrimaryButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
loading?: boolean;
children: React.ReactNode;
};
export default function PrimaryButton({ children, loading, className, onClick }: PrimaryButtonProps) {
return (
<button
onClick={onClick}
className={cn(
"bg-primary grid w-full place-items-center overflow-hidden rounded-xl px-4 py-2 text-white hover:scale-102 active:scale-98",
className
)}
>
<AnimatePresence mode="wait">
{loading ? (
<motion.div
key={"loading"}
initial={{
opacity: 0,
x: -80,
}}
animate={{
opacity: 1,
x: 0,
}}
exit={{
opacity: 0,
x: -80,
}}
transition={{
duration: 0.2,
}}
>
<LoaderPinwheel className="animate-spin" />
</motion.div>
) : (
<motion.div
key="content"
initial={{
opacity: 0,
x: 80,
}}
animate={{
opacity: 1,
x: 0,
}}
exit={{
opacity: 0,
x: 80,
}}
transition={{
duration: 0.2,
}}
className="flex items-center justify-center gap-2"
>
{children}
</motion.div>
)}
</AnimatePresence>
</button>
);
}

12
src/i18n/direction.ts Normal file
View File

@@ -0,0 +1,12 @@
export type Direction = "ltr" | "rtl";
export const localeDirectionMap: Record<string, Direction> = {
en: "ltr",
ar: "rtl",
ku: "rtl",
fa: "rtl",
};
export function getDirection(locale: string): Direction {
return localeDirectionMap[locale] ?? "ltr";
}

4
src/i18n/navigation.ts Normal file
View File

@@ -0,0 +1,4 @@
import { createNavigation } from 'next-intl/navigation'
import { routing } from './routing'
export const { Link, redirect, usePathname, useRouter, getPathname } = createNavigation(routing)

25
src/i18n/request.ts
View File

@@ -1,12 +1,13 @@
import { cookies } from "next/headers"; import { getRequestConfig } from "next-intl/server";
import { getRequestConfig } from "next-intl/server"; import { hasLocale } from "next-intl";
import { routing } from "./routing";
export default getRequestConfig(async () => {
const cookieStore = await cookies(); export default getRequestConfig(async ({ requestLocale }) => {
const locale = cookieStore.get("language")?.value || "fa"; const requested = await requestLocale;
const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
return {
locale, return {
messages: (await import(`../../messages/${locale}.json`)).default, locale,
}; messages: (await import(`../../messages/${locale}.json`)).default,
}); };
});

7
src/i18n/routing.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineRouting } from "next-intl/routing";
export const routing = defineRouting({
locales: ["en", "ar", "ku", "fa"],
defaultLocale: "en",
localePrefix: "never",
});

9
src/i18n/useDirection.ts Normal file
View File

@@ -0,0 +1,9 @@
'use client'
import { useLocale } from 'next-intl'
import { Direction, getDirection } from './direction'
export function useDirection(): Direction {
const locale = useLocale()
return getDirection(locale)
}

6
src/lib/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

8
src/proxy.ts Normal file
View File

@@ -0,0 +1,8 @@
import createMiddleware from 'next-intl/middleware'
import { routing } from './i18n/routing'
export default createMiddleware(routing)
export const config = {
matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
}

62
src/styles/globals.css
View File

@@ -24,20 +24,58 @@ body {
margin: 0; margin: 0;
} }
@theme { button {
--color-primary: #cbd5e1; cursor: pointer;
--color-text: #273343; }
/* constants */ @theme {
--color-neo-aqua: #16a795; /* Core */
--color-core-red: #ef4444; --color-background: #f4f6f8;
--color-warning: #eedd55; --color-text: #1e242e;
--color-information: #0ea5e9;
--color-error: #ef4444; /* Brand */
--color-success: #22c55e; --color-primary: #2a7fff;
--color-secondary: #64748b;
--color-accent: #ff6b3d;
/* Feedback */
--color-warning: #f5c04f;
--color-information: #3abff8;
--color-error: #ef5350;
--color-success: #4ade80;
/* Surfaces */
--color-surface: #ffffff;
--color-surface-alt: #e9eef2;
--color-border: #d4d9df;
--color-muted-text: #6c7480;
/* Overlays */
--color-overlay-light: rgba(0, 0, 0, 0.05);
--color-overlay-medium: rgba(0, 0, 0, 0.15);
--color-overlay-strong: rgba(0, 0, 0, 0.35);
/* Gradients */
--gradient-primary: linear-gradient(135deg, #2a7fff, #1a5fd1);
--gradient-accent: linear-gradient(135deg, #ff6b3d, #ff784d);
} }
[data-theme="dark"] { [data-theme="dark"] {
--color-primary: #273343; --color-background: #1a1f27;
--color-text: #cbd5e1; --color-text: #e5e9f0;
--color-secondary: #94a3b8;
--color-accent: #ff8a5c;
--color-surface: #232833;
--color-surface-alt: #2c323e;
--color-border: #3a404c;
--color-muted-text: #a6aebc;
--color-overlay-light: rgba(255, 255, 255, 0.05);
--color-overlay-medium: rgba(255, 255, 255, 0.12);
--color-overlay-strong: rgba(255, 255, 255, 0.25);
--gradient-primary: linear-gradient(135deg, #63a6ff, #3d7dce);
--gradient-accent: linear-gradient(135deg, #ff8a5c, #ff9c75);
} }