diff --git a/src/app/[name]/[id]/page.tsx b/src/app/[name]/[id]/page.tsx index d61d91f..241df54 100644 --- a/src/app/[name]/[id]/page.tsx +++ b/src/app/[name]/[id]/page.tsx @@ -12,16 +12,16 @@ type Props = object function FoodPage({ }: Props) { const quantity = useReceiptStore(state => state.items[0]?.quantity || 0); - const increment = useReceiptStore(state => state.increment); const decrement = useReceiptStore(state => state.decrement); + const price = 0; // TODO: Replace with actual price if needed return (
Food image
-
+
کباب چوبی مخصوص -
+ @@ -65,12 +65,12 @@ function FoodPage({ }: Props) {
- محتویات:
- گوشت، سبزیجات، پیاز، ادویه جات معطر و .... +

محتویات:

+

گوشت، سبزیجات، پیاز، ادویه جات معطر و ....

- {0} T + {price} T -
افزودن
+ افزودن ) : ( <> @@ -100,8 +100,6 @@ function FoodPage({ }: Props) { > {quantity}
- -
- +
+ +
-
+
{sortings.map((v, i) => { @@ -180,7 +190,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) { })}
-
+ ) } diff --git a/src/app/[name]/about/layout.tsx b/src/app/[name]/about/layout.tsx index 53f8e98..8d34297 100644 --- a/src/app/[name]/about/layout.tsx +++ b/src/app/[name]/about/layout.tsx @@ -29,7 +29,7 @@ export async function generateStaticParams() { async function layout({ children }: Readonly<{ children: React.ReactNode; params: Promise }>) { return ( -
{children}
+ <>{children} ) } diff --git a/src/app/[name]/about/page.tsx b/src/app/[name]/about/page.tsx index 7dd4eb3..2a9167a 100644 --- a/src/app/[name]/about/page.tsx +++ b/src/app/[name]/about/page.tsx @@ -9,6 +9,6 @@ export default async function Page({ params }: { params: Promise }) { const data = await getAboutData(name); return ( -
+ <> ); } diff --git a/src/app/[name]/layout.tsx b/src/app/[name]/layout.tsx index 737c9b0..de2fa66 100644 --- a/src/app/[name]/layout.tsx +++ b/src/app/[name]/layout.tsx @@ -1,4 +1,3 @@ -import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider"; import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper"; import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx"; @@ -13,12 +12,10 @@ export default function MenuLayout({ }>) { return ( - - - - {children} - - - + + + {children} + + ); } diff --git a/src/app/[name]/orders/layout.tsx b/src/app/[name]/orders/layout.tsx index b1c3f62..cf42605 100644 --- a/src/app/[name]/orders/layout.tsx +++ b/src/app/[name]/orders/layout.tsx @@ -1,5 +1,3 @@ -import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper"; - export const metadata = { title: 'Orders', } @@ -11,8 +9,8 @@ export default function MenuLayout({ }>) { return ( - + <> {children} - + ); } diff --git a/src/app/[name]/page.tsx b/src/app/[name]/page.tsx index f0eb180..a4f2d0a 100644 --- a/src/app/[name]/page.tsx +++ b/src/app/[name]/page.tsx @@ -155,37 +155,37 @@ const MenuIndex = () => { const wrapperRef: React.RefObject = useRef(null); const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false); - useEffect(() => { - let m_wrapperRef = null; - if (wrapperRef.current) { - m_wrapperRef = wrapperRef; - wrapperRef.current?.parentElement?.addEventListener('scroll', onScroll); - } - - return () => { - if (m_wrapperRef?.current) - m_wrapperRef.current?.parentElement?.removeEventListener('scroll', onScroll) - } - }) - - const onScroll = () => { + const onScroll = useCallback(() => { if (!wrapperRef?.current?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return; - if (wrapperRef?.current?.parentElement?.scrollTop >= smallCategoriesRef.current?.offsetTop) { + + if (wrapperRef.current.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) { setSmallCategoriesVisibility(true); } else { setSmallCategoriesVisibility(false); } - } + }, [wrapperRef, smallCategoriesRef]); + + useEffect(() => { + if (!wrapperRef.current) return; + + const parent = wrapperRef.current.parentElement; + if (!parent) return; + + parent.addEventListener('scroll', onScroll); + + return () => { + parent.removeEventListener('scroll', onScroll); + } + }, [onScroll]); + const updateSearch = useCallback((e: React.ChangeEvent) => { setSearch(e.target.value); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [setSearch]); const updateCategory = useCallback((id: number) => { setSelectedCategory(String(id)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [setSelectedCategory]); const toggleFilterModal = useCallback(() => { setFilterModal((state) => !state); @@ -242,7 +242,6 @@ const MenuIndex = () => {
-
{categories[+selectedCategory]?.title} diff --git a/src/app/[name]/transactions/page.tsx b/src/app/[name]/transactions/page.tsx index dd19f1e..84886b8 100644 --- a/src/app/[name]/transactions/page.tsx +++ b/src/app/[name]/transactions/page.tsx @@ -3,22 +3,36 @@ import React from 'react' function TransactionsIndex() { return ( -
-
کدهای تخفیف
+
+

کدهای تخفیف

-
- -
-
کدهای تخفیف شما
-

کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت ها استفاده کنید

+
+
+
+ + + + + + + + +
+

کدهای تخفیف شما

+

کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت‌ها استفاده کنید

-

- Your -
+ className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal' + style={{ + background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)', + }} + > +

+ Your
Coupon

@@ -43,47 +57,34 @@ function TransactionsIndex() {
+
-
- -
-
-
مبلغ تخفیف: 50,000 تومان
-

قابل استفاده برای همه ی منو ها و محصولات

- -
-
-

- F12BB587 -

-
-
-
-
-
مبلغ تخفیف: 50,000 تومان
-

قابل استفاده برای همه ی منو ها و محصولات

- -
-
-

- F12BB587 -

-
-
-
-
-
مبلغ تخفیف: 50,000 تومان
-

قابل استفاده برای همه ی منو ها و محصولات

- -
-
-

- F12BB587 -

-
-
-
+
+ {[1, 2, 3].map((_, i) => ( +
+
+

مبلغ تخفیف: 50,000 تومان

+

قابل استفاده برای همه‌ی منوها و محصولات

+ +
+
+

+ F12BB587 +

+
+
+ ))} +
+
) } -export default TransactionsIndex \ No newline at end of file +export default TransactionsIndex diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx index dec5f88..9b47fac 100644 --- a/src/app/auth/layout.tsx +++ b/src/app/auth/layout.tsx @@ -1,5 +1,3 @@ - -import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider' import { Metadata } from 'next' export const metadata: Metadata = { @@ -8,10 +6,8 @@ export const metadata: Metadata = { export default function AuthLayout({ children }: { children: React.ReactNode }) { return ( - -
- {children} -
-
+
+ {children} +
) } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 634c0f6..aa4c07c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import { Metadata } from "next"; import "./globals.css"; +import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider"; export const metadata: Metadata = { title: 'Dashboard', @@ -19,7 +20,9 @@ export default function RootLayout({ dir="rtl" className={`antialiased bg-background h-full`} > - {children} + + {children} + ); diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx index 7d36da9..b71b6bf 100644 --- a/src/app/profile/layout.tsx +++ b/src/app/profile/layout.tsx @@ -1,13 +1,9 @@ "use client" -import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider' - export default function ProfileLayout({ children }: { children: React.ReactNode }) { return ( - -
- {children} -
-
+
+ {children} +
) } diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx index 292ea1c..242d839 100644 --- a/src/components/menu/SideMenu.tsx +++ b/src/components/menu/SideMenu.tsx @@ -1,8 +1,7 @@ 'use client'; -import React, { useMemo, useRef, useState } from 'react' +import React, { useMemo, useRef, useState } from 'react'; import { motion, PanInfo, Variants } from 'framer-motion'; -import MenuItemType from './SideMenuItem' import SideMenuItem from './SideMenuItem'; import NotificationBellIcon from '../icons/NotificationBellIcon'; import CupIcon from '../icons/CupIcon'; @@ -13,9 +12,9 @@ import GameControllerIcon from '../icons/GameControllerIcon'; import ThumbsUpIcon from '../icons/ThumbsUpIcon'; import NoteBoardIcon from '../icons/NoteBoardIcon'; import DirectboxReceiveIcon from '../icons/DirectboxReceiveIcon'; -import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer'; import SettingIcon from '../icons/SettingsIcon'; import ExitIcon from '../icons/ExitIcon'; +import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer'; import NightModeSwitch from '../button/NightModeSwitch'; import Button from '../button/PrimaryButton'; import { useAuthStore } from '@/zustand/authStore'; @@ -27,61 +26,39 @@ type MenuItemType = { title: string; icon: React.ReactElement; auth?: boolean; -} +}; const menuItems: Array> = [ [ - { - href: '/', title: 'اعلان ها', icon: - }, - { - href: 'my-services', title: 'باشگاه مشتریان', icon: - }, - { - href: 'services', title: 'کد های تخفیف', icon: - }, - { - href: 'orders', title: 'لیست سفارشات', icon: - }, - { - href: 'transactions', title: 'لیست تراکنش ها', icon: - }, - { - href: '/', title: 'بازی و سرگرمی ها', icon: - }, - { - href: 'my-services', title: 'معرفی به دوستان', icon: - }, - { - href: 'services', title: 'گزارش اشکال', icon: - }, - { - href: 'invoices', title: 'نصب اپلیکیشن', icon: - }, + { href: '/', title: 'اعلان ها', icon: }, + { href: 'my-services', title: 'باشگاه مشتریان', icon: }, + { href: 'services', title: 'کد های تخفیف', icon: }, + { href: 'orders', title: 'لیست سفارشات', icon: }, + { href: 'transactions', title: 'لیست تراکنش ها', icon: }, + { href: '/', title: 'بازی و سرگرمی ها', icon: }, + { href: 'my-services', title: 'معرفی به دوستان', icon: }, + { href: 'services', title: 'گزارش اشکال', icon: }, + { href: 'invoices', title: 'نصب اپلیکیشن', icon: } ], [], [ - { - auth: true, href: undefined, title: 'تنظیمات', icon: - }, - { - auth: true, href: '?logout', title: 'خروج', icon: - }, + { auth: true, href: undefined, title: 'تنظیمات', icon: }, + { auth: true, href: '?logout', title: 'خروج', icon: } ] -] +]; type Props = { - menuState: boolean, - toggleMenuState: React.MouseEventHandler | undefined - nightModeState: boolean, - togglenightModeState: React.MouseEventHandler | undefined -} + menuState: boolean; + toggleMenuState: React.MouseEventHandler | undefined; + nightModeState: boolean; + togglenightModeState: React.MouseEventHandler | undefined; +}; function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) { const menuStateMemo = useMemo(() => menuState, [menuState]); const [logoutModalVisible, setLogoutModalVisible] = useState(false); - const closeRef: React.Ref | undefined = useRef(null); - const userIsAuthenticated = true; //useAuthStore((state) => state.isAuthenticated); + const closeRef = useRef(null); + const userIsAuthenticated = true; // useAuthStore((state) => state.isAuthenticated); const authLogout = useAuthStore((state) => state.logout); const router = useRouter(); const params = useParams(); @@ -89,35 +66,20 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS const pathname = usePathname(); const variants: Variants = { - hidden: { - x: '100%', - transition: { - duration: 0.1, - ease: 'easeInOut', - }, - }, - visible: { - x: 0, - transition: { - delay: 0.075, - duration: 0.1, - ease: 'easeInOut', - }, - }, + hidden: { x: '100%', transition: { duration: 0.1, ease: 'easeInOut' } }, + visible: { x: 0, transition: { delay: 0.075, duration: 0.1, ease: 'easeInOut' } } }; const onDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { - if (info.offset.x > 20) { - if (closeRef.current) { - closeRef.current.click(); - } + if (info.offset.x > 20 && closeRef.current) { + closeRef.current.click(); } - } + }; - const toggleLogoutModalVisiblity = (e: React.MouseEvent | React.MouseEvent | React.MouseEvent | undefined) => { + const toggleLogoutModalVisiblity = (e?: React.MouseEvent) => { e?.stopPropagation(); setLogoutModalVisible((state) => !state); - } + }; const onLogout = (e: React.MouseEvent | null) => { if (!e) return; @@ -127,102 +89,105 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS } }; - const hrefOnClicks: Array<{ href: string, handler: React.MouseEventHandler | undefined }> = [ - { href: '?logout', handler: toggleLogoutModalVisiblity } - ] + const hrefOnClicks = [{ href: '?logout', handler: toggleLogoutModalVisiblity }]; return ( <> -
+
- { e.stopPropagation(); }} - className={`fixed top-0 bottom-0 right-0 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}> -
    -
  • -
    -
    -
    منو
    - {menuItems[0].filter((x) => x.auth ? userIsAuthenticated && x : x).map((v, i) => { - const isActive = pathname === `/${name}/${v.href}` - return - {v.icon} -
    - } - /> - })} -
    -
- -
  • - {menuItems[2].filter((x) => x.auth ? userIsAuthenticated && x : x).map((v, i) => { - return i.href === v.href)?.handler || undefined} - title={v.title} - icon={
    {v.icon}
    } - /> - })} - }> -
  • - - +
    - -
    - -
    خروج از سیستم
    -
    آیا میخواهید از سیستم خارج شوید؟
    -
    - - + {/* Logout Modal */} + +
    + +

    خروج از سیستم

    +

    آیا میخواهید از سیستم خارج شوید؟

    +
    + +
    - ) + ); } -export default SideMenu; +export default SideMenu; \ No newline at end of file diff --git a/src/components/menu/SideMenuItem.tsx b/src/components/menu/SideMenuItem.tsx index c9af430..1182595 100644 --- a/src/components/menu/SideMenuItem.tsx +++ b/src/components/menu/SideMenuItem.tsx @@ -11,11 +11,16 @@ export default function SideMenuItem({ href, title, icon, className, children, . + className={` + inline-flex gap-2 ps-8 items-center h-6 overflow-hidden text-nowrap + text-[0.7rem] font-light text-disabled-text border-transparent + data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black + ${className} + `} + > {children} - {icon} -
    {title}
    + {icon} + {title} ) } \ No newline at end of file diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx index 13f9104..7e7f7dc 100644 --- a/src/components/navigation/BottomNavBar.tsx +++ b/src/components/navigation/BottomNavBar.tsx @@ -35,8 +35,8 @@ function BottomNavBar() { {/* 🔽 Your HTML content inside SVG */} -
    } value="سبد خرید" /> } value="پیجر" /> @@ -52,7 +52,7 @@ function BottomNavBar() { value="منو" /> } value="اعلان ها" /> } value="پسند ها" /> -
    +
    diff --git a/src/components/utils/Comment.tsx b/src/components/utils/Comment.tsx index aa06ca9..defd278 100644 --- a/src/components/utils/Comment.tsx +++ b/src/components/utils/Comment.tsx @@ -23,17 +23,17 @@ function Comment({ user, rating, date, text, tags, className = '' }: Props) { {date}
    -
    +

    {text} -

    +

    -
    +
      {tags.map((v, i) => ( -
      +
    • {v} -
    • + ))} -
    +
    ) }