Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-18 06:11:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

♻️ refactor: Simplify TemplatePreview component structure by consolidating Sheet and Button elements

Browse Source
This commit is contained in:
web 2025-09-17 02:29:29 -07:00
parent 6dfac27bc3
commit 1b715c5f8b
1 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
apps/admin/app/dashboard/subscribe/template-preview.tsx
View File

@ -3,7 +3,13 @@
import { previewSubscribeTemplate } from '@/services/admin/application'; import { previewSubscribeTemplate } from '@/services/admin/application';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Button } from '@workspace/ui/components/button'; import { Button } from '@workspace/ui/components/button';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@workspace/ui/components/sheet'; import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@workspace/ui/components/sheet';
import { MonacoEditor } from '@workspace/ui/custom-components/editor/monaco-editor'; import { MonacoEditor } from '@workspace/ui/custom-components/editor/monaco-editor';
import { Icon } from '@workspace/ui/custom-components/icon'; import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
@ -68,36 +74,32 @@ export function TemplatePreview({ applicationId, output_format }: TemplatePrevie
} }
}; };
const handleOpenChange = (newOpen: boolean) => {
setIsOpen(newOpen);
};
return ( return (
<> <Sheet open={isOpen} onOpenChange={setIsOpen}>
<Button variant='ghost' size='sm' onClick={() => setIsOpen(true)}> <SheetTrigger asChild>
<Icon icon='mdi:eye' className='mr-2 h-4 w-4' /> <Button variant='ghost'>
{t('preview')} <Icon icon='mdi:eye' className='h-4 w-4' />
</Button> {t('preview')}
<Sheet open={isOpen} onOpenChange={handleOpenChange}> </Button>
<SheetHeader> </SheetTrigger>
<SheetTitle></SheetTitle> <SheetHeader>
</SheetHeader> <SheetTitle></SheetTitle>
<SheetContent className='w-[800px] max-w-[90vw] md:max-w-screen-md'> </SheetHeader>
{isLoading ? ( <SheetContent className='w-[800px] max-w-[90vw] pt-10 md:max-w-screen-md'>
<div className='flex items-center justify-center'> {isLoading ? (
<Icon icon='mdi:loading' className='h-6 w-6 animate-spin' /> <div className='flex items-center justify-center'>
<span className='ml-2'>{t('loading')}</span> <Icon icon='mdi:loading' className='h-6 w-6 animate-spin' />
</div> <span className='ml-2'>{t('loading')}</span>
) : ( </div>
<MonacoEditor ) : (
title={t('title')} <MonacoEditor
value={getDisplayContent()} title={t('title')}
language={mapLanguage(output_format)} value={getDisplayContent()}
readOnly language={mapLanguage(output_format)}
/> readOnly
)} />
</SheetContent> )}
</Sheet> </SheetContent>
</> </Sheet>
); );
} }