58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { querySubscribeList } from '@/services/user/subscribe';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useState } from 'react';
|
|
|
|
import { LoginDialogProvider } from '@/app/auth/LoginDialogContext';
|
|
import TabContent from '@/components/SubscribePlan/PlanContent/index';
|
|
import PlanTabs from '@/components/SubscribePlan/PlanTabs/PlanTabs';
|
|
|
|
export default function Page() {
|
|
const t = useTranslations('subscribe');
|
|
const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
|
|
|
|
const {
|
|
data = [],
|
|
isLoading,
|
|
error,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: ['querySubscribeList'],
|
|
queryFn: async () => {
|
|
const { data } = await querySubscribeList();
|
|
return data?.data?.list?.filter((v) => v.unit_time === 'Month') || [];
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<LoginDialogProvider>
|
|
<div className={'hidden text-4xl font-bold text-[#0F2C53] sm:block md:mb-4 md:text-center'}>
|
|
{t('title')}
|
|
</div>
|
|
<div
|
|
className={
|
|
'mt-0 text-right text-base font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
|
|
}
|
|
>
|
|
{t('description')}
|
|
</div>
|
|
<div>
|
|
<div className={'m-auto flex w-full sm:w-[362px]'}>
|
|
<PlanTabs tabValue={tabValue} setTabValue={setTabValue} discount={20} />
|
|
</div>
|
|
<TabContent
|
|
tabValue={tabValue}
|
|
subscribeData={data}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
onRetry={refetch}
|
|
/>
|
|
</div>
|
|
</LoginDialogProvider>
|
|
</>
|
|
);
|
|
}
|