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"
}
}

5
messages/fa.json
View File

@@ -1,4 +1,5 @@
{
"loading": "درحال دریافت داده",
"error_fetch_data": "مشکلی در دریافت داده رخ داده است."
"Home": {
"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/image-types/global" />
import "./.next/types/routes.d.ts";
import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited
// 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,
"scripts": {
"dev": "next dev",

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

@@ -1,37 +1,33 @@
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 { getLocale, getMessages } from "next-intl/server";
import { NextIntlClientProvider } from "next-intl";
import { hasLocale, NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
export const metadata: Metadata = {
title: {
template: "%s | Theater of dreams",
default: "Theater of dreams",
},
description: "Theater of dreams",
authors: {
name: "شرکت دانش بنیان ویرا ارتباطات یکتا تلفن (وایتل)",
url: "https://witel.ir",
},
manifest: "/manifest.json",
icons: {
icon: "/logo/192px.png",
apple: "/logo/512px.png",
},
};
export const viewport = {
width: "device-width",
initialScale: 1,
maximumScale: 1,
title: "Theater of dreams",
};
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const locale = await getLocale();
const messages = await getMessages({ locale });
export default async function RootLayout({
children,
params,
}: Readonly<{
children: React.ReactNode;
params: Promise<{ locale: string }>;
}>) {
const { locale } = await params;
if (!hasLocale(routing.locales, locale)) {
notFound();
}
const messages = await getMessages();
const dir = getDirection(locale);
return (
<html lang="en" suppressHydrationWarning>
<html dir={dir} lang={locale} suppressHydrationWarning>
<head>
{/* Prevent theme flicker before hydration */}
<script
@@ -49,7 +45,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
/>
</head>
<body className="bg-primary">
<body className="bg-background">
<NextIntlClientProvider locale={locale} messages={messages}>
<ClientAppProvider>{children}</ClientAppProvider>
</NextIntlClientProvider>

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)

9
src/i18n/request.ts
View File

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

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;
}
@theme {
--color-primary: #cbd5e1;
--color-text: #273343;
button {
cursor: pointer;
}
/* constants */
--color-neo-aqua: #16a795;
--color-core-red: #ef4444;
--color-warning: #eedd55;
--color-information: #0ea5e9;
--color-error: #ef4444;
--color-success: #22c55e;
@theme {
/* Core */
--color-background: #f4f6f8;
--color-text: #1e242e;
/* Brand */
--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"] {
--color-primary: #273343;
--color-text: #cbd5e1;
--color-background: #1a1f27;
--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);
}