add: isr for aboutus page

src/app/[name]/about/AboutPage.tsx

@@ -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

src/app/[name]/about/layout.tsx

@@ -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

src/app/[name]/about/page.tsx

@@ -1,142 +1,14 @@
-import { ArrowDown2, CallCalling, Clock, Gallery, Instagram, Location, MouseCircle, Whatsapp } from 'iconsax-react';
+import React from 'react';
-import { Metadata } from 'next';
+import AboutPage from './AboutPage';
-import Image from 'next/image';
+import { getAboutData } from '@/lib/api/info/getAboutData';
-import React from 'react'
 
 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><AboutPage data={data} /></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>
-  )
 }
-
-
-export default AboutIndex

src/components/tab/TabContainer.tsx

@@ -29,50 +29,51 @@ function TabContainer({ itemRenderer, children, ...restProps }: Props) {
         <div className='h-full'>
             <HorizontalScrollView
                 style={{
+                    width: '100%',
                     backgroundColor: '#FFFFFF70',
                     justifyContent: 'center',
                     border: '2px solid white',
                     borderRadius: '32px',
+                    display: 'inline-flex',
+                    justifyItems: 'center',
+                    gap: '40px'
                 }}
                 itemRenderer={itemRenderer}
                 {...restProps}>
-                <div
+                {items.map((item, index) => {
-                    className='inline-flex gap-10'>
+                    const { title, imageSrc, icon }: TabItemProps = item.props;
-                    {items.map((item, index) => {
+                    return (
-                        const { title, imageSrc, icon }: TabItemProps = item.props;
+                        <TabHeaderRenderer
-                        return (
+                            key={index}
-                            <TabHeaderRenderer
+                            className={''}
-                                key={index}
+                            onClick={() => updateTab(index)}
-                                className={''}
+                        >
-                                onClick={() => updateTab(index)}
+                            {imageSrc &&
-                            >
+                                <Image
-                                {imageSrc &&
+                                    priority
-                                    <Image
+                                    src={imageSrc}
-                                        priority
+                                    width={24}
-                                        src={imageSrc}
+                                    height={24}
-                                        width={24}
+                                    alt="category image"
-                                        height={24}
+                                />
-                                        alt="category image"
+                            }
-                                    />
+                            {icon &&
-                                }
-                                {icon &&
-                                    <span className={clsx(
-                                        'text-xs transition-all duration-150',
-                                        index === selectedTab ? 'stroke-black' : 'stroke-disabled-text'
-                                    )}>
-                                        {icon}
-                                    </span>
-                                }
                                 <span className={clsx(
                                     'text-xs transition-all duration-150',
-                                    index === selectedTab ? 'text-black' : 'text-disabled-text'
+                                    index === selectedTab ? 'stroke-black' : 'stroke-disabled-text'
                                 )}>
-                                    {title}
+                                    {icon}
                                 </span>
-                            </TabHeaderRenderer>
+                            }
-                        )
+                            <span className={clsx(
-                    })}
+                                'text-xs transition-all duration-150',
-                </div>
+                                index === selectedTab ? 'text-black' : 'text-disabled-text'
+                            )}>
+                                {title}
+                            </span>
+                        </TabHeaderRenderer>
+                    )
+                })}
             </HorizontalScrollView>
 
             <div>

src/lib/api/info/getAboutData.tsx

@@ -0,0 +1,62 @@
+
+// const baseURL = process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com'
+// const headers = { 'Content-Type': 'application/json' }
+export type AboutDataModel = {
+  name: string,
+  title_fa: string,
+  description: string,
+  foundationDate: string,
+  offering: string,
+  address: string,
+  metadata: {
+    title: string,
+    description: string,
+  },
+  contacts: {
+    instagram: string,
+    whatsapp: string,
+    telegram: string,
+    phone: string,
+  },
+  open: Array<{ day: string, open: string, close: string }>
+}
+
+export async function getAboutData(name: string) {
+  // const res = await fetch(`${baseURL}/info/${name}`, {
+  //   next: { revalidate: 60 }, // or 'force-cache' for build-time caching
+  //   headers
+  // });
+  // return res.json();
+
+  let title_fa = '';
+  if (name.toLocaleLowerCase() == 'zhivan') title_fa = 'کافه رستوران ژیوان'
+  if (name.toLocaleLowerCase() == 'boote') title_fa = 'کافه رستوران بوته'
+
+  return {
+    name,
+    title_fa,
+    description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد',
+    foundationDate: String(Math.round(Math.random() * 10000)),
+    offering: 'ایرانی، خارجی',
+    address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر',
+    metadata: {
+      title: 'درباره ما | ' + name,
+      description: 'همه چیز درباره مجموعه ' + name
+    },
+    contacts: {
+      instagram: 'instagram',
+      whatsapp: 'whatsapp',
+      telegram: 'telegram',
+      phone: 'phone',
+    },
+    open: [
+      { day: 'شنبه', open: '00:00', close: '12:00' },
+      { day: 'یک شنبه', open: '05:00', close: '12:00' },
+      { day: 'دو شنبه', open: '10:00', close: '14:00' },
+      { day: 'سه شنبه', open: '08:00', close: '10:00' },
+      { day: 'چهار شنبه', open: '15:00', close: '18:00' },
+      { day: 'پنج شنبه', open: '20:00', close: '24:00' },
+      { day: 'جمعه', open: '07:00', close: '13:00' },
+    ]
+  }
+}