fix: demo首页
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
import { cn } from '@workspace/ui/lib/utils';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export const CloseIcon = ({ className }: { className?: string }) => {
|
||||
return (
|
||||
<motion.svg
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.05,
|
||||
},
|
||||
}}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
strokeWidth='2'
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
className={cn('h-4 w-4', className)}
|
||||
>
|
||||
<path stroke='none' d='M0 0h24v24H0z' fill='none' />
|
||||
<path d='M18 6l-12 12' />
|
||||
<path d='M6 6l12 12' />
|
||||
</motion.svg>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import { queryDocumentDetail } from '@/services/user/document';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Avatar, AvatarFallback } from '@workspace/ui/components/avatar';
|
||||
import { buttonVariants } from '@workspace/ui/components/button';
|
||||
import { Markdown } from '@workspace/ui/custom-components/markdown';
|
||||
import { useOutsideClick } from '@workspace/ui/hooks/use-outside-click';
|
||||
import { cn } from '@workspace/ui/lib/utils';
|
||||
import { formatDate } from '@workspace/ui/utils';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { RefObject, useEffect, useId, useRef, useState } from 'react';
|
||||
import { CloseIcon } from './close-icon';
|
||||
|
||||
export function DocumentButton({ items }: { items: API.Document[] }) {
|
||||
const t = useTranslations('document');
|
||||
const [active, setActive] = useState<API.Document | boolean | null>(null);
|
||||
const id = useId();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data } = useQuery({
|
||||
enabled: !!(active as API.Document)?.id,
|
||||
queryKey: ['queryDocumentDetail', (active as API.Document)?.id],
|
||||
queryFn: async () => {
|
||||
const { data } = await queryDocumentDetail({
|
||||
id: (active as API.Document)?.id,
|
||||
});
|
||||
return data.data?.content;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
setActive(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (active && typeof active === 'object') {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [active]);
|
||||
|
||||
useOutsideClick(ref as RefObject<HTMLDivElement>, () => setActive(null));
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
{active && typeof active === 'object' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='fixed inset-0 z-10 h-full w-full bg-black/20'
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{active && typeof active === 'object' ? (
|
||||
<div className='fixed inset-0 z-[100] grid place-items-center'>
|
||||
<motion.button
|
||||
key={`button-${active.title}-${id}`}
|
||||
layout
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.05,
|
||||
},
|
||||
}}
|
||||
className='bg-foreground absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full text-white dark:text-black'
|
||||
onClick={() => setActive(null)}
|
||||
>
|
||||
<CloseIcon />
|
||||
</motion.button>
|
||||
<motion.div
|
||||
layoutId={`card-${active.id}-${id}`}
|
||||
ref={ref}
|
||||
className='bg-muted flex size-full flex-col overflow-auto p-6 sm:rounded'
|
||||
>
|
||||
<Markdown>{data || ''}</Markdown>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<ul className='flex w-full flex-col gap-4'>
|
||||
{items.map((item, index) => (
|
||||
<motion.div
|
||||
layoutId={`card-${item.id}-${id}`}
|
||||
key={`card-${item.id}-${id}`}
|
||||
onClick={() => setActive(item)}
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<motion.div layoutId={`image-${item.id}-${id}`}>
|
||||
<Avatar className='size-12'>
|
||||
<AvatarFallback className='bg-primary/80 text-white'>
|
||||
{item.title.split('')[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</motion.div>
|
||||
<div className=''>
|
||||
<motion.h3 layoutId={`title-${item.id}-${id}`} className='font-medium'>
|
||||
{item.title}
|
||||
</motion.h3>
|
||||
<motion.p
|
||||
layoutId={`description-${item.id}-${id}`}
|
||||
className='text-sm text-neutral-600 dark:text-neutral-400'
|
||||
>
|
||||
{formatDate(item.updated_at)}
|
||||
</motion.p>
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
layoutId={`button-${item.id}-${id}`}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'secondary',
|
||||
}),
|
||||
'rounded-full',
|
||||
)}
|
||||
>
|
||||
{t('read')}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
'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/ui/components/tabs';
|
||||
import { useLocale, useTranslations } from 'next-intl';
|
||||
import { DocumentButton } from './document-button';
|
||||
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='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 && (
|
||||
<>
|
||||
<h2 className='flex items-center gap-1.5 font-semibold'>{t('tutorial')}</h2>
|
||||
<Tabs defaultValue={TutorialList?.[0]?.title}>
|
||||
<TabsList className='h-full flex-wrap'>
|
||||
{TutorialList?.map((tutorial) => (
|
||||
<TabsTrigger key={tutorial.title} value={tutorial.title}>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import { getTutorial } from '@/utils/tutorial';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
|
||||
import { buttonVariants } from '@workspace/ui/components/button';
|
||||
import { Markdown } from '@workspace/ui/custom-components/markdown';
|
||||
import { useOutsideClick } from '@workspace/ui/hooks/use-outside-click';
|
||||
import { cn } from '@workspace/ui/lib/utils';
|
||||
import { formatDate } from '@workspace/ui/utils';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { RefObject, useEffect, useId, useRef, useState } from 'react';
|
||||
import { CloseIcon } from './close-icon';
|
||||
|
||||
interface Item {
|
||||
path: string;
|
||||
title: string;
|
||||
updated_at?: string;
|
||||
icon?: string;
|
||||
}
|
||||
export function TutorialButton({ items }: { items: Item[] }) {
|
||||
const t = useTranslations('document');
|
||||
|
||||
const [active, setActive] = useState<Item | boolean | null>(null);
|
||||
const id = useId();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { data } = useQuery({
|
||||
enabled: !!(active as Item)?.path,
|
||||
queryKey: ['getTutorial', (active as Item)?.path],
|
||||
queryFn: async () => {
|
||||
const markdown = await getTutorial((active as Item)?.path);
|
||||
return markdown;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
setActive(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (active && typeof active === 'object') {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [active]);
|
||||
|
||||
useOutsideClick(ref as RefObject<HTMLDivElement>, () => setActive(null));
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
{active && typeof active === 'object' && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='fixed inset-0 z-10 h-full w-full bg-black/20'
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<AnimatePresence>
|
||||
{active && typeof active === 'object' ? (
|
||||
<div className='fixed inset-0 z-[100] grid place-items-center'>
|
||||
<motion.button
|
||||
key={`button-${active.title}-${id}`}
|
||||
layout
|
||||
initial={{
|
||||
opacity: 0,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.05,
|
||||
},
|
||||
}}
|
||||
className='bg-foreground absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full text-white dark:text-black'
|
||||
onClick={() => setActive(null)}
|
||||
>
|
||||
<CloseIcon />
|
||||
</motion.button>
|
||||
<motion.div
|
||||
layoutId={`card-${active.title}-${id}`}
|
||||
ref={ref}
|
||||
className='bg-muted flex size-full flex-col overflow-auto p-6 sm:rounded'
|
||||
>
|
||||
<Markdown
|
||||
components={{
|
||||
img: ({ node, className, ...props }) => {
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
{...props}
|
||||
width={800}
|
||||
height={384}
|
||||
className='my-4 inline-block size-auto max-h-96'
|
||||
/>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{data?.content || ''}
|
||||
</Markdown>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
<ul className='flex w-full flex-col gap-4'>
|
||||
{items.map((item, index) => (
|
||||
<motion.div
|
||||
layoutId={`card-${item.title}-${id}`}
|
||||
key={`card-${item.title}-${id}`}
|
||||
onClick={() => setActive(item)}
|
||||
className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-4'>
|
||||
<motion.div layoutId={`image-${item.title}-${id}`}>
|
||||
<Avatar className='size-12'>
|
||||
<AvatarImage alt={item.title ?? ''} src={item.icon ?? ''} />
|
||||
<AvatarFallback className='bg-primary/80 text-white'>
|
||||
{item.title.split('')[0]}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</motion.div>
|
||||
<div className=''>
|
||||
<motion.h3 layoutId={`title-${item.title}-${id}`} className='font-medium'>
|
||||
{item.title}
|
||||
</motion.h3>
|
||||
{item.updated_at && (
|
||||
<motion.p
|
||||
layoutId={`description-${item.title}-${id}`}
|
||||
className='text-center text-neutral-600 md:text-left dark:text-neutral-400'
|
||||
>
|
||||
{formatDate(new Date(item.updated_at), false)}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<motion.button
|
||||
layoutId={`button-${item.title}-${id}`}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: 'secondary',
|
||||
}),
|
||||
'rounded-full',
|
||||
)}
|
||||
>
|
||||
{t('read')}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user