add: aboutus second tab

2025-07-16 01:12:17 +03:30
parent 16f1173f80
commit 1c4b791047
3 changed files with 136 additions and 88 deletions
@@ -1,12 +1,34 @@
 'use client'
+import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
+import EqualizerIcon from '@/components/icons/EqualizerIcon';
 import TabContainer from '@/components/tab/TabContainer';
 import { TabHeader } from '@/components/tab/TabHeader';
+import Comment from '@/components/utils/Comment';
+import RateBar from '@/components/utils/RateBar';
 import { AboutDataModel } from '@/lib/api/info/getAboutData';
 import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, MouseCircle, Star1, Whatsapp } from 'iconsax-react';
+import { useQueryState } from 'next-usequerystate';
 import Image from 'next/image';
-import React from 'react'
+import React, { useCallback, useState } from 'react'
+
+const sortings = [
+  'جدیدترین',
+  'قدیمی ترین'
+]

 function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
+  const [sortingModal, setSortingModal] = useState(false);
+  const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
+
+  const toggleSortingModal = useCallback(() => {
+    setSortingModal((state) => !state);
+  }, []);
+
+  const changeSorting = (index: number) => {
+    setSorting(() => String(index));
+    setSortingModal(false);
+  }
+
  const firstTab = () => {
    return (
      <div className='py-4'>
@@ -107,100 +129,57 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
  }

  const secondTab = () => {
+
    return (
      <div className='py-4'>
-        <div className="bg-container rounded-container shadow-container p-4">
-          <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
-            <div className="">
-              <div className='text-sm2 font-bold leading-5'>{data.title_fa}</div>
-              <div className="text-sm2 leading-5 mt-4">تاسیس:{data.foundationDate}</div>
-              <div className="text-sm2 leading-5 mt-2">نوع محصولات: {data.offering}</div>
-            </div>
-            <div className="rounded-normal overflow-clip">
-              <Image
-                alt='logo'
-                src={'/assets/images/food-preview.png'}
-                width={88}
-                height={88}
-                unoptimized
-                priority
-              />
-            </div>
-          </div>
-          <div className="mt-[23px]">
-            <div className="text-sm2 font-bold leading-5">درباره مجموعه</div>
-            <p className="text-sm2 leading-5 mt-3 border-spacing-48" style={{ wordSpacing: '0.01em' }}>
-              {data.description}
-            </p>
-            <div className='inline-flex gap-2 mt-[23px] items-center'>
-              <Gallery size={20} className='stroke-disabled-text' />
-              <span className='text-sm2 text-disabled-text font-medium pt-0.5'>عکس های رستوران</span>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
-          <div className='text-sm2 font-medium leading-5'>ارتباط</div>
-          <div className='col-span-1 text-center flex justify-center gap-4'>
-            {data.contacts.phone &&
-              <a href={`tel://${data.contacts.phone}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
-                <CallCalling className='stroke-foreground' size={24} />
-              </a>
-            }
-            {data.contacts.telegram &&
-              <a href={`https://t.me/${data.contacts.telegram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
-                <MouseCircle variant='Linear' className='stroke-foreground' size={24} />
-              </a>
-            }
-            {data.contacts.whatsapp &&
-              <a href={`https://whatsapp.com/?phone=${data.contacts.whatsapp}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
-                <Whatsapp className='stroke-foreground' size={24} />
-              </a>
-            }
-            {data.contacts.instagram &&
-              <a href={`https://instagram.com/${data.contacts.instagram}`} className='bg-[#EAEDF5] p-2 rounded-normal'>
-                <Instagram className='stroke-foreground' size={24} />
-              </a>
-            }
-          </div>
-        </div>
-
-        <div className="bg-container rounded-container shadow-container px-4 pt-6 pb-6 mt-4">
-          <div className='text-sm2 font-medium leading-5'>آدرس</div>
-          <div className='text-sm2 mt-[9px] leading-5'>{data.address}</div>
-          <div className='inline-flex gap-2 mt-[23px] items-center '>
-            <Location size={20} className='stroke-disabled-text' />
-            <span className='text-sm2 text-disabled-text '>عکس های رستوران</span>
-          </div>
-        </div>
-
-        <div className="bg-container rounded-container shadow-container 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>
-            <div className='size-1.5 bg-[#D9D9D9] rounded-full'></div>
-            <div className='text-sm2 mt-0.5'>امروز از ساعت 10:30 تا 17:30 </div>
+        <div className="bg-container rounded-container shadow-container p-4 py-6 grid grid-cols-2 items-center">
+          <div className="text-center font-bold text-5xl">
+            4.1
          </div>
          <div className="">
-            <ArrowDown2 size={16} className='stroke-[#292D32]' />
+            <RateBar className='mt-1' content='5' percentage='55' />
+            <RateBar className='mt-1' content='4' percentage='32' />
+            <RateBar className='mt-1' content='3' percentage='70' />
+            <RateBar className='mt-1' content='2' percentage='12' />
+            <RateBar className='mt-1' content='1' percentage='89' />
          </div>
        </div>

-        {data.open.map((v, index) => {
-          return (
-            <div
-              key={index}
-              style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-              className="bg-[#F6F6FA] rounded-container leading-5 py-6 px-4 mt-4 flex justify-between items-center">
-              <div className="text-sm2">
-                {v.day}
-              </div>
-              <div className='text-sm2 font-light'>
-                {v.close} - {v.open}
-              </div>
-            </div>
-          )
-        })}
+        <div className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4">
+          <div className="flex justify-between items-center border-b-[1.5px] border-border pb-2">
+            <div className='text-sm2 font-medium leading-5'>نظرات کاربران</div>
+            <button onClick={toggleSortingModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+              <EqualizerIcon />
+              <span className="text-xs leading-5 font-medium">{sortings[+sorting]}</span>
+            </button>
+          </div>
+          <div className="">
+
+            <Comment
+              className='pt-8'
+              user='علیرضا عابدزاده'
+              rating={5.0}
+              date='18 آذر 1401'
+              text='لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است'
+              tags={['پیتزا قارچ مخصوص', 'چیز برگر ژیوان']}
+            />
+
+          </div>
+        </div>
+        <AnimatedBottomSheet title="مرتب کردن بر اساس" visible={sortingModal} inDelay={150} onClick={toggleSortingModal}>
+          <div className="px-8.5 py-10 justify-between">
+            {sortings.map((v, i) => {
+              return (
+                <div key={i}>
+                  <div onClick={() => changeSorting(i)} className="text-sm2 font-medium cursor-pointer">
+                    {v}
+                  </div>
+                  {i < sortings.length - 1 && <hr className="text-white/40 mb-4 mt-4" />}
+                </div>
+              )
+            })}
+          </div>
+        </AnimatedBottomSheet>
      </div>
    )
  }
@@ -0,0 +1,41 @@
+import { Star1 } from 'iconsax-react'
+import React from 'react'
+
+type Props = {
+    user: string;
+    rating: number;
+    date: string;
+    text: string;
+    tags: Array<string>;
+    className?: string;
+}
+
+function Comment({ user, rating, date, text, tags, className = '' }: Props) {
+    return (
+        <div className={className}>
+            <div className="flex items-center justify-start">
+                <span className="rounded-sm bg-primary h-5 mb-1 w-13 flex items-center justify-center gap-1">
+                    <Star1 className='fill-white mb-0.5' size={12} />
+                    <span className='text-sm2 font-medium text-white mt-1'>{rating}</span>
+                </span>
+                <span className='ms-2 text-sm2'>{user}</span>
+                <span className='ms-3 mb-1 size-1.5 bg-border rounded-full'></span>
+                <span className='ms-3 text-sm2'>{date}</span>
+            </div>
+
+            <div className='text-xs mt-3'>
+                {text}
+            </div>
+
+            <div className='mt-3 flex flex-wrap items-center justify-start gap-2'>
+                {tags.map((v, i) => (
+                    <div key={i} className='text-xs py-1.5 px-3 bg-[#F2F2F2] rounded-sm text-center'>
+                        {v}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Comment
@@ -0,0 +1,28 @@
+import { Star1 } from 'iconsax-react'
+import React from 'react'
+import { motion } from 'framer-motion'
+
+type Props = {
+    percentage: string;
+    content: string;
+    className?: string;
+}
+
+function RateBar({ percentage, content, className = '' }: Props) {
+    return (
+        <div className={`flex items-center justify-center ${className}`}>
+            <span className='text-xs font-medium text-[#999999] me-3'>{percentage}%</span>
+            <span className='mb-1 me-3 relative w-[67px] h-1 bg-border rounded-full'>
+                <motion.span
+                    animate={{ width: [0, `${percentage}%`] }}
+                    className='absolute top-0 left-0 w-[10%] h-1 bg-primary rounded-full'
+                >
+                </motion.span>
+            </span>
+            <Star1 className='fill-black me-1 mb-1' size={12} />
+            <span className='text-xs font-medium'>{content}</span>
+        </div>
+    )
+}
+
+export default RateBar