glass other page

2026-06-21 15:02:18 +03:30
parent de45b1f197
commit d34a3a92f1
33 changed files with 106 additions and 65 deletions
@@ -7,6 +7,7 @@ import { toast, toastLoginRequired } from "@/components/Toast";
 import { getToken } from "@/lib/api/func";
 import { ef } from "@/lib/helpers/utfNumbers";
 import clsx from "clsx";
+import { glassSurface, glassSurfaceCard, glassSurfaceFlat } from "@/lib/styles/glassSurface";
 import { motion } from "framer-motion";
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
 import { useParams, useRouter } from "next/navigation";
@@ -135,7 +136,7 @@ function FoodPage({}: Props) {
        !isAvailable && "opacity-50",
      )}
    >
-      <div className="relative w-full  lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
+      <div className={glassSurface('relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:!bg-transparent lg:!border-0 lg:!shadow-none lg:[backdrop-filter:none]')}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          className="lg:object-cover lg:h-full object-cover bg-[#F2F2F9] w-full"
@@ -146,12 +147,12 @@ function FoodPage({}: Props) {
          }}
        />
        <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
-          <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
+          <div className={glassSurfaceFlat('whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold')}>
            {categoryName || "-"}
          </div>
          <button
            onClick={handleBackToMenu}
-            className="p-2 rounded-full bg-container/40"
+            className={glassSurfaceFlat('p-2 rounded-full')}
          >
            <ArrowLeft
              size={18}
@@ -161,7 +162,7 @@ function FoodPage({}: Props) {
        </div>
      </div>

-      <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto">
+      <div className={glassSurfaceCard('relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:h-full lg:min-h-0 w-full overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto rounded-3xl')}>
        <div className="w-full inline-flex justify-between items-center shrink-0">
          <h5 className="text-base font-bold">{foodName}</h5>
          <button
@@ -249,7 +250,7 @@ function FoodPage({}: Props) {
                <button
                  onClick={handleAddToCart}
                  disabled={!isAvailable}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+                  className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all disabled:opacity-40 disabled:pointer-events-none')}
                >
                  <PlusIcon className="text-foreground" />
                </button>
@@ -264,7 +265,7 @@ function FoodPage({}: Props) {
                </motion.div>
                <button
                  onClick={handleRemoveFromCart}
-                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
+                  className={glassSurfaceFlat('hover:brightness-95 active:brightness-90 rounded-sm p-2 transition-all')}
                >
                  <MinusIcon className="text-foreground" />
                </button>
@@ -13,6 +13,7 @@ import Image from 'next/image';
 import React from 'react'
 import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
 import AboutSkeleton from './components/AboutSkeleton';
+import { glassSurfaceCard, glassSurfaceCardFlat, glassSurfaceFlat } from '@/lib/styles/glassSurface';

 const sortings = [
  'جدیدترین',
@@ -81,7 +82,7 @@ function AboutPage() {
    return (
      <section aria-labelledby="about-title" className='py-4'>
        <section
-          className="bg-container rounded-container shadow-container p-4">
+          className={glassSurfaceCard('p-4')}>
          <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
            <div className="">
              <h2 className='text-sm2 font-bold leading-5'>{restaurant.name}</h2>
@@ -123,7 +124,7 @@ function AboutPage() {

        {(restaurant.phone || restaurant.telegram || restaurant.whatsapp || restaurant.instagram) && (
          <section
-            className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+            className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
            <h2 className='text-sm2 font-medium leading-5'>ارتباط</h2>
            <div className='col-span-1 text-center flex justify-center gap-4'>
              {restaurant.phone &&
@@ -151,7 +152,7 @@ function AboutPage() {
        )}

        {restaurant.address && (
-          <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+          <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
            <h2 className='text-sm2 font-medium leading-5'>آدرس</h2>
            <p className='text-sm2 mt-[9px] leading-5'>{restaurant.address}</p>
            {restaurant.latitude && restaurant.longitude && (
@@ -166,7 +167,7 @@ function AboutPage() {
        {schedules.length > 0 && getTodaySchedule() && (
          <section
            aria-label='ساعات کاری'
-            className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+            className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
            <div className="flex items-center gap-2 justify-start">
              <Clock size={16} className='stroke-disabled-text' />
              <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
@@ -186,8 +187,7 @@ function AboutPage() {
              .map(([weekDay, daySchedules]) => (
                <div
                  key={weekDay}
-                  style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-                  className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+                  className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
                  <div className="text-sm2">
                    {getDayName(Number(weekDay))}
                  </div>
@@ -254,7 +254,7 @@ function AboutPage() {
      <section aria-labelledby="reviews-title" className='py-4'>
        <section
          aria-label='امتیاز کاربران'
-          className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+          className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
          <div className="text-center font-bold text-5xl">
            {averageRating.toFixed(1)}
          </div>
@@ -267,10 +267,10 @@ function AboutPage() {
          </div>
        </section>

-        <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+        <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
          <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
            <h2 className='text-sm2 font-medium leading-5'>نظرات کاربران</h2>
-            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-container pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 pattern-secondary-bg ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
              <EqualizerIcon className='dark:text-white' />
              <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
            </button>
@@ -4,12 +4,13 @@ import { Skeleton } from "@/components/ui/skeleton";
 import TabContainer from "@/components/tab/TabContainer";
 import { TabHeader } from "@/components/tab/TabHeader";
 import { InfoCircle, Star1 } from 'iconsax-react';
+import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';

 const AboutSkeleton = () => {
  const firstTabSkeleton = () => (
    <section className='py-4'>
      {/* اطلاعات رستوران */}
-      <section className="bg-container rounded-container shadow-container p-4">
+      <section className={glassSurfaceCard('p-4')}>
        <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
          <div className="flex-1">
            <Skeleton className="h-6 w-32 rounded-md mb-4" />
@@ -31,7 +32,7 @@ const AboutSkeleton = () => {
      </section>

      {/* ارتباط */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center')}>
        <Skeleton className="h-5 w-16 rounded-md" />
        <div className='col-span-1 text-center flex justify-center gap-4'>
          {[...Array(3)].map((_, index) => (
@@ -41,7 +42,7 @@ const AboutSkeleton = () => {
      </section>

      {/* آدرس */}
-      <section className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
+      <section className={glassSurfaceCard('px-4 pt-6 pb-6 mt-4')}>
        <Skeleton className="h-5 w-12 rounded-md mb-[9px]" />
        <Skeleton className="h-4 w-full rounded-md mb-2" />
        <Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
@@ -52,7 +53,7 @@ const AboutSkeleton = () => {
      </section>

      {/* ساعات کاری امروز */}
-      <section className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+      <section className={glassSurfaceCard('py-6 px-4 mt-4 flex justify-between items-center')}>
        <div className="flex items-center gap-2">
          <Skeleton className="w-4 h-4 rounded-full" />
          <Skeleton className="h-5 w-8 rounded-md" />
@@ -66,7 +67,7 @@ const AboutSkeleton = () => {
      {[...Array(3)].map((_, index) => (
        <div
          key={index}
-          className="bg-[#F6F6FA] dark:bg-border rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
+          className={glassSurfaceCardFlat('leading-5 py-6 px-4 mt-4 flex justify-between items-center')}>
          <Skeleton className="h-5 w-20 rounded-md" />
          <Skeleton className="h-5 w-24 rounded-md" />
        </div>
@@ -77,7 +78,7 @@ const AboutSkeleton = () => {
  const secondTabSkeleton = () => (
    <section className='py-4'>
      {/* امتیاز کاربران */}
-      <section className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+      <section className={glassSurfaceCard('p-4 py-6 grid grid-cols-2 items-center')}>
        <Skeleton className="h-16 w-20 rounded-md mx-auto" />
        <div className="flex flex-col w-fit items-end gap-1">
          {[...Array(5)].map((_, index) => (
@@ -87,7 +88,7 @@ const AboutSkeleton = () => {
      </section>

      {/* نظرات کاربران */}
-      <section className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+      <section className={glassSurfaceCard('pt-3 pb-3.5 px-[16px] mt-4')}>
        <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
          <Skeleton className="h-5 w-24 rounded-md" />
          <Skeleton className="h-8 w-28 rounded-xl" />
@@ -16,6 +16,7 @@ import CartSkeleton from "./components/CartSkeleton";
 import CartSummary from "./components/CartSummary";
 import { useCart } from "./hook/useCart";
 import { useCartPageState } from "./hooks/useCartPageState";
+import { glassSurfaceCard } from "@/lib/styles/glassSurface";

 const CartPage = () => {
  const { t } = useTranslation("parallels", { keyPrefix: "Cart" });
@@ -42,7 +43,7 @@ const CartPage = () => {
  };

  return (
-    <div className="overflow-y-auto h-full noscrollbar flex flex-col bg-background">
+    <div className="overflow-y-auto h-full noscrollbar flex flex-col">
      <div className="grid grid-cols-3 items-center mt-6">
        {isCartEmpty || isLoading ? (
          <span></span>
@@ -93,7 +94,7 @@ const CartPage = () => {
        ) : (
          <div className="flex flex-col gap-4 pb-24">
            {!isPremium && (
-              <div className="bg-container rounded-container p-4 border border-border shadow-sm">
+              <div className={glassSurfaceCard('p-4')}>
                <div className="flex items-start gap-3 mb-4">
                  <div className="shrink-0 mt-0.5">
                    <NotificationBellIcon
@@ -11,6 +11,7 @@ import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileD
 import { useGetCartItems } from '../hooks/useCartData';
 import { useCartStore } from '../store/Store';
 import { guestCartItemsToFoods } from '../lib/cartUtils';
+import { glassSurfaceNav } from '@/lib/styles/glassSurface';

 interface CartSummaryProps {
  isPremium: boolean;
@@ -73,7 +74,7 @@ const CartSummary = ({ isPremium, hasItems }: CartSummaryProps) => {
        </div>
      )}

-      <div className='fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-container border-t border-border p-4 w-full'>
+      <div className={glassSurfaceNav('fixed bottom-0 left-0 right-0 z-50 border-t border-border p-4 w-full')}>
        <div className='flex justify-between items-center gap-4'>
          <div className='flex flex-col'>
            <div className='text-xs text-gray-400 dark:text-disabled-text'>{t('PayableAmountLabel')}</div>
@@ -4,6 +4,7 @@ import { ef } from '@/lib/helpers/utfNumbers'
 import { EmojiHappy, Microphone2, Paperclip2 } from 'iconsax-react'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { glassSurfaceCard } from '@/lib/styles/glassSurface'

 type Props = object

@@ -64,7 +65,7 @@ function ChatIndex ({}: Props) {
    <section className='flex flex-col h-full pt-6'>
      <h1 className='font-medium'>علی مصلحی</h1>

-      <div className='bg-container rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden'>
+      <div className={glassSurfaceCard('rounded-[30px] flex flex-col justify-between mt-6 flex-1 px-6 pt-7 pb-8 overflow-hidden')}>
        <div className='overflow-y-auto flex flex-col-reverse'>
          <ul className='grid gap-6 pb-6 '>
            {messagesMemo.map((v, i) => {
@@ -16,6 +16,7 @@ import {
 import { useRouter } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import Prompt from '@/components/utils/Prompt'
+import { glassSurfaceFlat } from '@/lib/styles/glassSurface'

 type Props = object

@@ -170,7 +171,7 @@ function ChatIndex ({}: Props) {
        {selectedChats.length > 0 ? (
          <span
            onClick={toggleDeleteModal}
-            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+            className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
          >
            <Trash
              size={24}
@@ -180,7 +181,7 @@ function ChatIndex ({}: Props) {
        ) : (
          <Link
            href={'chat/nearby'}
-            className='bg-container p-2 rounded-xl active:bg-gray-50 dark:active:bg-neutral-500'
+            className={glassSurfaceFlat('p-2 rounded-xl active:brightness-95 cursor-pointer')}
          >
            <Radar2
              size={24}
@@ -198,7 +199,7 @@ function ChatIndex ({}: Props) {
                <li
                  key={i}
                  {...longPress(chat.id)}
-                  className='select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 bg-background rounded-xl'
+                  className={glassSurfaceFlat('select-none flex items-center gap-x-2 hover:brightness-105 cursor-default active:brightness-102 p-2 rounded-xl')}
                >
                  <div className='size-[49px] min-w-[49px]'>
                    {selectedChats.includes(chat.id) ? (
@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useGetOrders } from './hooks/useHistoryData';
 import { HistoryOrderItem } from './types/Types';
 import { OrderStatus } from './enum/Enum';
+import { glassSurface } from '@/lib/styles/glassSurface';

 const fallbackImage = '/assets/images/food-preview.png';

@@ -80,7 +81,7 @@ function OrdersIndex() {
            const items: HistoryOrderItem[] = order.items || [];

            return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
+                <div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
                    <div className="text-sm2">
                        <div className='flex items-center justify-between mb-2'>
                            <div className='flex gap-2 items-center'>
@@ -165,7 +166,7 @@ function OrdersIndex() {
            const items: HistoryOrderItem[] = order.items || [];

            return (
-                <div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
+                <div key={order.id} className={glassSurface('w-full px-[17px] mb-4 pt-8 pb-6 rounded-3xl')}>
                    <div className="text-sm2">
                        <div className='flex items-center justify-between mb-2'>
                            <div className='flex gap-2 items-center'>
@@ -14,6 +14,7 @@ import { CreateRateType } from '../types/Types';
 import { toast } from '@/components/Toast';
 import { PositivePointEnum, NegativePointEnum } from '../enum/Enum';
 import { extractErrorMessage } from '@/lib/func';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';

 type Props = object

@@ -148,7 +149,7 @@ function RatingOrderIndex({ }: Props) {
        <section className='flex flex-col h-full pt-6'>
            <h1 className='font-medium'>{t("Heading")}</h1>

-            <form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
+            <form onSubmit={submitForm} className={glassSurfaceCard('flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4')}>

                <div>
                    <div className='w-full'>
@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import { useGetAbout } from '../../../about/hooks/useAboutData';
 import { toast } from '@/components/Toast';
 import { extractErrorMessage } from '@/lib/func';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';

 function TransactionsIndex() {

@@ -37,7 +38,7 @@ function TransactionsIndex() {

            <section
                aria-label="درباره باشگاه مشتریان"
-                className='mt-3 bg-container dark:bg-container rounded-normal grid grid-cols-4 items-center border border-transparent dark:border-border/50'
+                className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
            >
                <div className='col-span-3 py-5 pe-7 ps-5 relative h-36.5'>
                    <div className='w-full h-full absolute top-0 left-0 overflow-clip text-muted-foreground/30 dark:text-foreground/20'>
@@ -78,7 +79,7 @@ function TransactionsIndex() {
            </section>

            {/* بخش نمایش اعتبار کاربر */}
-            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
+            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                <div className='flex items-center gap-2 mb-4'>
                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                    <h2 className='font-bold text-base dark:text-foreground'>اعتبار شما</h2>
@@ -92,7 +93,7 @@ function TransactionsIndex() {
            </section>

            {/* بخش تبدیل امتیاز به اعتبار */}
-            <section className='mt-6 bg-container dark:bg-container rounded-normal p-5 border border-transparent dark:border-border/50'>
+            <section className={glassSurfaceCard('mt-6 rounded-normal p-5')}>
                <div className='flex items-center gap-2 mb-4'>
                    <MoneyRecive color='currentColor' size={24} className='text-primary dark:text-foreground' variant='Bold' />
                    <h2 className='font-bold text-base dark:text-foreground'>تبدیل امتیاز به اعتبار</h2>
@@ -4,6 +4,7 @@ import React, { useCallback } from 'react'
 import { useGetMyCoupons } from '../hooks/useTransactionData';
 import { toast } from '@/components/Toast';
 import type { Coupon } from '../types/Types';
+import { glassSurfaceCard, glassSurfaceCardFlat } from '@/lib/styles/glassSurface';

 function TransactionsIndex() {
    const { data: myCoupons, isLoading } = useGetMyCoupons();
@@ -32,7 +33,7 @@ function TransactionsIndex() {

            <section
                aria-label="درباره کدهای تخفیف"
-                className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'
+                className={glassSurfaceCard('mt-3 rounded-normal grid grid-cols-4 items-center')}
            >
                <div className='col-span-3 py-9.5 pe-7 ps-5 relative'>
                    <div className='w-full h-full absolute top-0 left-0 overflow-clip'>
@@ -94,7 +95,7 @@ function TransactionsIndex() {
                    {coupons.map((coupon) => (
                        <article
                            key={coupon.id}
-                            className='bg-container rounded-normal flex justify-between items-center'
+                            className={glassSurfaceCardFlat('rounded-normal flex justify-between items-center')}
                        >
                            <div className='py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
                                <h3 className='font-bold text-sm2'>مبلغ تخفیف: {formatDiscount(coupon)}</h3>
@@ -3,6 +3,7 @@ import React from 'react'
 import { useGetTransactions } from './hooks/useTransactionData';
 import { TransactionsTable } from './components/TransactionsTable';
 import LoadingOverlay from '@/components/overlays/LoadingOverlay';
+import { glassSurfaceCard } from '@/lib/styles/glassSurface';

 function TransactionsReviewIndex() {
  const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();
@@ -56,7 +57,7 @@ function TransactionsReviewIndex() {
        </div>
      </div> */}

-      <div className='w-full h-full bg-container rounded-3xl mt-0'>
+      <div className={glassSurfaceCard('w-full h-full mt-0 rounded-3xl')}>
        <TransactionsTable transactions={transactions} />
      </div>
    </section>