update and add: update adaptability and added Loader
This commit is contained in:
parent
148fd20b66
commit
62e544d120
@ -100,7 +100,7 @@ export function CorporateDashboard() {
|
||||
<div className='flex min-h-screen flex-col px-2.5'>
|
||||
<main className='flex-1 py-10'>
|
||||
<div className='container mx-auto max-w-6xl'>
|
||||
<div className='mb-8 flex items-center justify-between'>
|
||||
<div className='mb-4 flex flex-col gap-4 items-start sm:justify-between sm:items-center sm:mb-8 sm:flex-row'>
|
||||
<h1 className='text-3xl font-bold'>{t('corporate.pageTitle')}</h1>
|
||||
<Button variant='outline' className='gap-2'>
|
||||
<LogOut className='h-4 w-4' />
|
||||
@ -110,7 +110,7 @@ export function CorporateDashboard() {
|
||||
|
||||
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
||||
{/* Company Card */}
|
||||
<Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2'>
|
||||
<Card data-aos='zoom-in' data-aos-mirror="true" className='md:col-span-2 order-2 md:order-1'>
|
||||
<CardHeader className='pb-2'>
|
||||
<CardTitle className='flex items-center gap-2'>
|
||||
<Building2 className='h-5 w-5 text-red-600' />
|
||||
@ -166,7 +166,7 @@ export function CorporateDashboard() {
|
||||
</Card>
|
||||
|
||||
{/* Fund Card */}
|
||||
<Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
|
||||
<Card data-aos='zoom-in' data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white order-1 md:order-2'>
|
||||
<CardHeader>
|
||||
<CardTitle className='flex items-center gap-2'>
|
||||
<Wallet className='h-5 w-5' />
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
} from '@/shared/shadcn-ui/card';
|
||||
|
||||
import { TransactionsTable } from '@/widgets/transactions-table';
|
||||
import Loader from '@/shared/shadcn-ui/loader';
|
||||
|
||||
export function CustomerDashboard() {
|
||||
const { t } = useTextController();
|
||||
@ -36,8 +37,7 @@ export function CustomerDashboard() {
|
||||
<div className='mb-10 grid gap-3 md:grid-cols-3 md:gap-6'>
|
||||
<Card data-aos="zoom-in" data-aos-mirror="true" className='bg-gradient-to-br from-red-600 to-red-800 text-white'>
|
||||
{!data || isLoading ? (
|
||||
// TODO: Bunyod please add loader here
|
||||
<>Loader here</>
|
||||
<Loader/>
|
||||
) : (
|
||||
<>
|
||||
<CardHeader>
|
||||
@ -82,8 +82,7 @@ export function CustomerDashboard() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!data || isLoading ? (
|
||||
// TODO: Bunyod please add loader here
|
||||
<>Loader here</>
|
||||
<Loader/>
|
||||
) : (
|
||||
<div className='grid gap-6 md:grid-cols-2'>
|
||||
<div>
|
||||
|
||||
@ -251,7 +251,7 @@ export default function AboutPage({ content }: AboutPageProps) {
|
||||
{/* Our Team */}
|
||||
<Container>
|
||||
<section className='bg-gray-50 py-16'>
|
||||
<div className='container mx-auto'>
|
||||
<div className='container mx-auto px-2'>
|
||||
<div className='mb-12 flex flex-col items-center justify-center text-center'>
|
||||
<div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
|
||||
<Users className='h-6 w-6 text-red-600' />
|
||||
|
||||
@ -10,7 +10,19 @@ interface AosInitProps {
|
||||
|
||||
export const AosProvider = ({ children }: AosInitProps) => {
|
||||
useEffect(() => {
|
||||
AOS.init({ once: false, mirror: false, });
|
||||
const timer = setTimeout(() => {
|
||||
AOS.init({
|
||||
once: false,
|
||||
offset: 100,
|
||||
duration: 600,
|
||||
easing: 'ease-out-quart',
|
||||
});
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
AOS.refreshHard();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <>{children}</>;
|
||||
|
||||
9
src/shared/shadcn-ui/loader.tsx
Normal file
9
src/shared/shadcn-ui/loader.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
'use client'
|
||||
|
||||
export default function Loader() {
|
||||
return (
|
||||
<div className="flex justify-center items-center p-8">
|
||||
<div className="animate-spin rounded-full h-14 w-14 border-4 border-black border-t-transparent"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -12,7 +12,7 @@ export const HeroSection = () => {
|
||||
|
||||
return (
|
||||
<section className='relative'>
|
||||
<div className='relative h-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
|
||||
<div className='relative h-[400px] w-full overflow-hidden sm:h-[500px] xl:h-[700px]'>
|
||||
<Image
|
||||
src='/oriyo_bg.jpeg'
|
||||
alt='Gas Station Network'
|
||||
@ -24,14 +24,14 @@ export const HeroSection = () => {
|
||||
<div className='container mx-auto'>
|
||||
<div className='max-w-lg space-y-4 text-white'>
|
||||
<div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
|
||||
<h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
|
||||
<h1 className='font-bold tracking-tight text-4xl md:text-6xl'>
|
||||
{t('home.hero.title')}
|
||||
</h1>
|
||||
</div>
|
||||
<p className='text-gray-200 sm:text-lg'>
|
||||
{t('home.hero.description')}
|
||||
</p>
|
||||
<div className='flex flex-col gap-2 sm:flex-row sm:gap-4'>
|
||||
<div className='flex flex-col mt-6 gap-2 sm:flex-row sm:gap-4'>
|
||||
<Link href='#'>
|
||||
<Button className='bg-red-600 hover:bg-red-700'>
|
||||
{t('common.buttons.findStation')}{' '}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { Gift } from 'lucide-react';
|
||||
|
||||
import { Discounts } from '@/app/api-utlities/@types/main';
|
||||
import { Discounts } from '@/app/api-utlities/@types/index';
|
||||
|
||||
import PromotionSlider from '@/shared/components/promotion-slider';
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
|
||||
@ -110,7 +110,7 @@ export const TransactionsTable = () => {
|
||||
</h2>
|
||||
|
||||
<div className='flex w-full flex-col gap-4 md:w-auto md:flex-row'>
|
||||
<div className='grid grid-cols-2 gap-2'>
|
||||
<div className='grid sm:grid-cols-2 gap-2'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Label htmlFor='start-date'>
|
||||
{t('corporate.transactions.dateFrom')}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { Briefcase } from 'lucide-react';
|
||||
|
||||
import { Jobs } from '@/app/api-utlities/@types/main';
|
||||
import { Jobs } from '@/app/api-utlities/@types/index';
|
||||
|
||||
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
||||
import { cn } from '@/shared/lib/utils';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user