gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-23 06:45:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE-438): Add icon position/size and subtitle to modal

Browse Source
This commit is contained in:
rstubryan
2025-12-28 16:44:01 +07:00
parent c0a818af7e
commit b1ccad081d
2 changed files with 238 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modal/ConfirmationModal.tsx
+111 -38
View File
@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
import { cn } from '@/lib/helper';
export type IconPosition = 'left' | 'center' | 'right';
export interface ConfirmationModalProps {
ref: RefObject<HTMLDialogElement | null>;
type?: 'info' | 'success' | 'error';
text?: string;
subtitleText?: string;
closeOnBackdrop?: boolean;
primaryButton?: ButtonProps & {
text?: string;
@@ -24,17 +27,22 @@ export interface ConfirmationModalProps {
modalBox?: string;
};
children?: React.ReactNode;
iconSize?: number;
iconPosition?: IconPosition;
}
const ConfirmationModal = ({
ref,
type = 'info',
text,
subtitleText,
closeOnBackdrop,
primaryButton,
secondaryButton,
className,
children,
iconSize = 64,
iconPosition = 'center',
}: ConfirmationModalProps) => {
const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
@@ -55,47 +63,112 @@ const ConfirmationModal = ({
return (
<Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
<div className='w-full flex flex-col gap-4'>
<div
className={cn(
'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
{
'bg-error': type === 'error',
'bg-info': type === 'info',
'bg-success': type === 'success',
}
)}
>
{type === 'info' && (
<Icon
icon='material-symbols:info-outline-rounded'
width={64}
height={64}
className='text-info-content'
/>
)}
{iconPosition === 'center' ? (
<>
<div
className={cn(
'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
{
'bg-error': type === 'error',
'bg-info': type === 'info',
'bg-success': type === 'success',
}
)}
>
{type === 'info' && (
<Icon
icon='material-symbols:info-outline-rounded'
width={iconSize}
height={iconSize}
className='text-info-content'
/>
)}
{type === 'success' && (
<Icon
icon='qlementine-icons:success-12'
width={64}
height={64}
className='text-success-content'
/>
)}
{type === 'success' && (
<Icon
icon='qlementine-icons:success-12'
width={iconSize}
height={iconSize}
className='text-success-content'
/>
)}
{type === 'error' && (
<Icon
icon='solar:danger-triangle-linear'
width={64}
height={64}
className='text-error-content'
/>
)}
</div>
{type === 'error' && (
<Icon
icon='solar:danger-triangle-linear'
width={iconSize}
height={iconSize}
className='text-error-content'
/>
)}
</div>
<p className='text-center font-medium'>
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
</p>
<p className='text-center font-medium'>
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
</p>
{subtitleText && (
<p className='text-center text-sm text-gray-400'>
{subtitleText}
</p>
)}
</>
) : (
<div
className={cn('flex flex-row items-center gap-4', {
'flex-row': iconPosition === 'left',
'flex-row-reverse': iconPosition === 'right',
})}
>
<div
className={cn(
'w-fit p-4 flex flex-row justify-center items-center rounded-full',
{
'bg-error': type === 'error',
'bg-info': type === 'info',
'bg-success': type === 'success',
}
)}
>
{type === 'info' && (
<Icon
icon='material-symbols:info-outline-rounded'
width={iconSize}
height={iconSize}
className='text-info-content'
/>
)}
{type === 'success' && (
<Icon
icon='qlementine-icons:success-12'
width={iconSize}
height={iconSize}
className='text-success-content'
/>
)}
{type === 'error' && (
<Icon
icon='solar:danger-triangle-linear'
width={iconSize}
height={iconSize}
className='text-error-content'
/>
)}
</div>
<div className='flex flex-col gap-1'>
<p className='font-medium'>
{text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
</p>
{subtitleText && (
<p className='text-sm text-gray-400'>{subtitleText}</p>
)}
</div>
</div>
)}
{children && <div className='w-full'>{children}</div>}