add: isr for aboutus page

2025-07-16 00:06:47 +03:30
parent daa1b1660d
commit 16f1173f80
5 changed files with 366 additions and 168 deletions
@@ -0,0 +1,227 @@
+'use client'
+import TabContainer from '@/components/tab/TabContainer';
+import { TabHeader } from '@/components/tab/TabHeader';
+import { AboutDataModel } from '@/lib/api/info/getAboutData';
+import { ArrowDown2, CallCalling, Clock, Gallery, InfoCircle, Instagram, Location, MouseCircle, Star1, Whatsapp } from 'iconsax-react';
+import Image from 'next/image';
+import React from 'react'
+
+function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
+  const firstTab = () => {
+    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>
+          <div className="">
+            <ArrowDown2 size={16} className='stroke-[#292D32]' />
+          </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>
+    )
+  }
+
+  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>
+          <div className="">
+            <ArrowDown2 size={16} className='stroke-[#292D32]' />
+          </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>
+    )
+  }
+
+  return (
+    <div>
+      <TabContainer
+
+        className='h-[72px] !pt-3 !pb-2 overflow-y-hidden'>
+        <TabHeader
+          viewRenderer={firstTab()}
+          title='درباره ما' icon={<InfoCircle size={24} />}>
+        </TabHeader>
+        <TabHeader
+          viewRenderer={secondTab()}
+          title='امتیازات و نظرات' icon={<Star1 size={24} />}>
+        </TabHeader>
+      </TabContainer>
+    </div>
+  )
+}
+
+
+export default AboutPage
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Metadata } from 'next';
+import { getAboutData } from '@/lib/api/info/getAboutData';
+
+export type AboutPageProps = { name: string }
+
+type Params = { name: string };
+
+export const revalidate = 60
+
+export const dynamicParams = false // or false, to 404 on unknown paths
+
+export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
+    const { name } = await params;
+    const data = await getAboutData(name);
+
+    return {
+        title: data.metadata.title || `About | ${name}`,
+        description: data.metadata.description || `This is the about-us page for ${name}.`,
+    };
+}
+
+export async function generateStaticParams() {
+    return [
+        { name: 'zhivan' }, 
+        { name: 'boote' }, 
+    ];
+}
+
+async function layout({ children }: Readonly<{ children: React.ReactNode; params: Promise<Params> }>) {
+    return (
+        <div>{children}</div>
+    )
+}
+
+export default layout
@@ -1,142 +1,14 @@
-import { ArrowDown2, CallCalling, Clock, Gallery, Instagram, Location, MouseCircle, Whatsapp } from 'iconsax-react';
-import { Metadata } from 'next';
-import Image from 'next/image';
-import React from 'react'
+import React from 'react';
+import AboutPage from './AboutPage';
+import { getAboutData } from '@/lib/api/info/getAboutData';

 type Params = { name: string };

-export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+export default async function Page({ params }: { params: Promise<Params> }) {
  const { name } = await params;
-  const data = { title: 'درباره ما | ' + name, description: 'همه چیز درباره مجموعه ' + name }
+  const data = await getAboutData(name);

-  return {
-    title: data.title || `About | ${name}`,
-    description: data.description || `This is the about-us page for ${name}.`,
-  };
-}
-
-export async function generateStaticParams() {
-  return [{ name: 'zhivan' }, { name: 'dake' }];
-}
-
-function AboutIndex() {
  return (
-    <div>
-      <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'>کافه رستوران ژیوان</div>
-            <div className="text-sm2 leading-5 mt-4">تاسیس:1392</div>
-            <div className="text-sm2 leading-5 mt-2">نوع محصولات: ایرانی، خارجی</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' }}>
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
-          </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'>
-          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
-            <CallCalling className='stroke-foreground' size={24} />
-          </a>
-          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
-            <MouseCircle variant='Linear' className='stroke-foreground' size={24} />
-          </a>
-          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
-            <Whatsapp className='stroke-foreground' size={24} />
-          </a>
-          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
-            <Instagram className='stroke-foreground' size={24} />
-          </a>
-        </div>
-      </div>
-
-      <div className="bg-container rounded-container shadow-container p-4 mt-4">
-        <div className='text-sm2 font-medium leading-5'>آدرس</div>
-        <div className='text-sm2 mt-[9px]'>خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر</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 pt-0.5'>عکس های رستوران</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>
-        <div className="">
-          <ArrowDown2 size={16} className='stroke-[#292D32]' />
-        </div>
-      </div>
-
-      <div
-        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
-        <div className="text-sm2">
-          شنبه
-        </div>
-        <div className='text-sm2 font-light'>
-          10:30 - 17:30
-        </div>
-      </div>
-
-      <div
-        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
-        <div className="text-sm2">
-          شنبه
-        </div>
-        <div className='text-sm2 font-light'>
-          10:30 - 17:30
-        </div>
-      </div>
-
-      <div
-        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
-        <div className="text-sm2">
-          شنبه
-        </div>
-        <div className='text-sm2 font-light'>
-          10:30 - 17:30
-        </div>
-      </div>
-
-      <div
-        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
-        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
-        <div className="text-sm2">
-          شنبه
-        </div>
-        <div className='text-sm2 font-light'>
-          10:30 - 17:30
-        </div>
-      </div>
-    </div>
-  )
+    <div><AboutPage data={data} /></div>
+  );
 }
-
-
-export default AboutIndex