danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

about page skeleton

Browse Source
This commit is contained in:
hamid zarghami
2025-12-23 16:14:15 +03:30
parent 39c37238b5
commit 4c4431198e
2 changed files with 143 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/about/AboutPage.tsx
+10 -3
View File
@@ -12,6 +12,7 @@ import { useQueryState } from 'next-usequerystate';
import Image from 'next/image';
import React from 'react'
import { useGetAbout, useGetReviews, useGetSchedules } from './hooks/useAboutData';
import AboutSkeleton from './components/AboutSkeleton';
const sortings = [
'جدیدترین',
@@ -20,15 +21,21 @@ const sortings = [
function AboutPage() {
const { data: aboutData } = useGetAbout();
const { data: reviewsData } = useGetReviews();
const { data: schedulesData } = useGetSchedules();
const { data: aboutData, isLoading: aboutLoading } = useGetAbout();
const { data: reviewsData, isLoading: reviewsLoading } = useGetReviews();
const { data: schedulesData, isLoading: schedulesLoading } = useGetSchedules();
const [sorting, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
const { state: sortingModal, toggle: toggleSortingModal, set: setSortingModal } = useToggle();
const restaurant = aboutData?.data;
const schedules = schedulesData?.data || [];
const isLoading = aboutLoading || reviewsLoading || schedulesLoading;
if (isLoading) {
return <AboutSkeleton />;
}
const changeSorting = (index: number) => {
setSorting(() => String(index));
setSortingModal(false);
src/app/[name]/(Main)/about/components/AboutSkeleton.tsx
+133
View File
@@ -0,0 +1,133 @@
'use client';
import { Skeleton } from "@/components/ui/skeleton";
import TabContainer from "@/components/tab/TabContainer";
import { TabHeader } from "@/components/tab/TabHeader";
import { InfoCircle, Star1 } from 'iconsax-react';
const AboutSkeleton = () => {
const firstTabSkeleton = () => (
<section className='py-4'>
{/* اطلاعات رستوران */}
<section 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="flex-1">
<Skeleton className="h-6 w-32 rounded-md mb-4" />
<Skeleton className="h-5 w-24 rounded-md mb-2" />
<Skeleton className="h-5 w-40 rounded-md" />
</div>
<Skeleton className="w-22 h-22 rounded-normal shrink-0" />
</div>
<div className="mt-[23px]">
<Skeleton className="h-5 w-28 rounded-md mb-3" />
<Skeleton className="h-4 w-full rounded-md mb-2" />
<Skeleton className="h-4 w-full rounded-md mb-2" />
<Skeleton className="h-4 w-3/4 rounded-md mb-[23px]" />
<div className='inline-flex gap-2 items-center'>
<Skeleton className="w-5 h-5 rounded-md" />
<Skeleton className="h-5 w-24 rounded-md" />
</div>
</div>
</section>
{/* ارتباط */}
<section className="bg-container rounded-container shadow-container 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) => (
<Skeleton key={index} className="w-10 h-10 rounded-normal" />
))}
</div>
</section>
{/* آدرس */}
<section className="bg-container rounded-container shadow-container 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]" />
<div className='inline-flex gap-2 items-center'>
<Skeleton className="w-5 h-5 rounded-md" />
<Skeleton className="h-5 w-24 rounded-md" />
</div>
</section>
{/* ساعات کاری امروز */}
<section 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">
<Skeleton className="w-4 h-4 rounded-full" />
<Skeleton className="h-5 w-8 rounded-md" />
<Skeleton className="w-1.5 h-1.5 rounded-full" />
<Skeleton className="h-5 w-32 rounded-md" />
</div>
<Skeleton className="w-4 h-4 rounded-md" />
</section>
{/* ساعات کاری هفته */}
{[...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">
<Skeleton className="h-5 w-20 rounded-md" />
<Skeleton className="h-5 w-24 rounded-md" />
</div>
))}
</section>
);
const secondTabSkeleton = () => (
<section className='py-4'>
{/* امتیاز کاربران */}
<section className="bg-container rounded-container shadow-container 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) => (
<Skeleton key={index} className="h-4 w-24 rounded-md" />
))}
</div>
</section>
{/* نظرات کاربران */}
<section 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">
<Skeleton className="h-5 w-24 rounded-md" />
<Skeleton className="h-8 w-28 rounded-xl" />
</div>
<div className="">
{[...Array(3)].map((_, index) => (
<div key={index} className="pt-8">
<div className="flex items-center gap-3 mb-3">
<Skeleton className="w-10 h-10 rounded-full" />
<div className="flex-1">
<Skeleton className="h-4 w-24 rounded-md mb-2" />
<Skeleton className="h-3 w-16 rounded-md" />
</div>
<Skeleton className="h-4 w-12 rounded-md" />
</div>
<Skeleton className="h-4 w-full rounded-md mb-2" />
<Skeleton className="h-4 w-3/4 rounded-md mb-4" />
<Skeleton className="h-3 w-20 rounded-md" />
</div>
))}
</div>
</section>
</section>
);
return (
<div className='pt-8 h-full overflow-y-auto noscrollbar'>
<TabContainer>
<TabHeader
viewRenderer={firstTabSkeleton()}
title='درباره ما' icon={<InfoCircle size={24} />}>
</TabHeader>
<TabHeader
viewRenderer={secondTabSkeleton()}
title='امتیازات و نظرات' icon={<Star1 size={24} />}>
</TabHeader>
</TabContainer>
</div>
);
};
export default AboutSkeleton;