99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { queryDocumentList } from '@/services/user/document';
|
|
import { getTutorialList } from '@/utils/tutorial';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { TutorialButton } from './tutorial-button';
|
|
|
|
export default function Page() {
|
|
const locale = useLocale();
|
|
const t = useTranslations('document');
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ['queryDocumentList'],
|
|
queryFn: async () => {
|
|
const response = await queryDocumentList();
|
|
const list = response.data.data?.list || [];
|
|
return {
|
|
tags: Array.from(new Set(list.reduce((acc: string[], item) => acc.concat(item.tags), []))),
|
|
list,
|
|
};
|
|
},
|
|
});
|
|
const { tags, list: DocumentList } = data || { tags: [], list: [] };
|
|
|
|
const { data: TutorialList } = useQuery({
|
|
queryKey: ['getTutorialList', locale],
|
|
queryFn: async () => {
|
|
const list = await getTutorialList();
|
|
return list.get(locale);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className='max-w-[532px] space-y-4'>
|
|
{/*{DocumentList?.length > 0 && (
|
|
<>
|
|
<h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
|
|
<Tabs defaultValue='all'>
|
|
<TabsList className='h-full flex-wrap'>
|
|
<TabsTrigger value='all'>{t('all')}</TabsTrigger>
|
|
{tags?.map((item) => (
|
|
<TabsTrigger key={item} value={item}>
|
|
{item}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
<TabsContent value='all'>
|
|
<DocumentButton items={DocumentList} />
|
|
</TabsContent>
|
|
{tags?.map((item) => (
|
|
<TabsContent value={item} key={item}>
|
|
<DocumentButton
|
|
items={DocumentList.filter((docs) => (item ? docs.tags.includes(item) : true))}
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</>
|
|
)}*/}
|
|
|
|
{TutorialList && TutorialList?.length > 0 && (
|
|
<div className='rounded-[46px] bg-[#EAEAEA] px-[23px] py-[19px] sm:px-[34px] sm:py-[28px]'>
|
|
<div className='font-semibold text-[#666]'>{t('tutorialTitle')}</div>
|
|
<div className={'mb-2.5 text-xs text-[#666] sm:text-sm'}>{t('tutorialDescription')}</div>
|
|
<Tabs defaultValue={TutorialList?.[0]?.title}>
|
|
<TabsList className='h-full flex-wrap justify-start gap-1 bg-transparent'>
|
|
{TutorialList?.map((tutorial) => (
|
|
<TabsTrigger
|
|
key={tutorial.title}
|
|
value={tutorial.title}
|
|
className={
|
|
'rounded-full bg-[#EAEAEA] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)] data-[state=active]:bg-[#225BA9] data-[state=active]:text-white'
|
|
}
|
|
>
|
|
{tutorial.title}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
{TutorialList?.map((tutorial) => (
|
|
<TabsContent key={tutorial.title} value={tutorial.title}>
|
|
<TutorialButton
|
|
key={tutorial.path}
|
|
items={
|
|
tutorial.subItems && tutorial.subItems?.length > 0
|
|
? tutorial.subItems
|
|
: [tutorial]
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|