Dennis Simon
56 lines
2.1 KiB
TypeScript
56 lines
2.1 KiB
TypeScript
import { forwardRef, useState } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
import * as Dialog from './Dialog';
|
|
import * as ConfirmDialog from './ConfirmDialog';
|
|
import { TextInput } from './TextInput';
|
|
|
|
import type { ElementRef, ComponentPropsWithRef } from 'react';
|
|
|
|
export const Root = Dialog.Root;
|
|
export const Trigger = Dialog.Trigger;
|
|
export const Close = Dialog.Close;
|
|
|
|
type ContentProps = ComponentPropsWithRef<typeof Dialog.Content> & {
|
|
appName: string;
|
|
onConfirm: () => void;
|
|
};
|
|
export const Content = forwardRef<ElementRef<typeof Dialog.Content>, ContentProps>(function Content(
|
|
{ className, children, appName, onConfirm, ...other },
|
|
forwardedRef,
|
|
) {
|
|
const [inputValue, setInputValue] = useState('');
|
|
|
|
return (
|
|
<Dialog.Content {...other} className={twMerge('absolute w-[600px] p-6', className)} ref={forwardedRef}>
|
|
<ConfirmDialog.Title variant="alert" className="mb-4">
|
|
Are you sure?
|
|
</ConfirmDialog.Title>
|
|
<div className="text-grey-500 font-sans text-base antialiased">
|
|
Disabling these products will interrupt any live apps that they depend on them. Type{' '}
|
|
<span className="font-medium text-black antialiased">{appName}</span> to confirm this action.
|
|
</div>
|
|
|
|
<div className="pt-3 pb-6">
|
|
<TextInput
|
|
name="name"
|
|
className={twMerge('mt-4')}
|
|
initialValue=""
|
|
placeholder={appName}
|
|
onChange={(e) => setInputValue(e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
<ConfirmDialog.ConfirmDialogFooter
|
|
variant="alert"
|
|
confirmButtonText="Yes, I am sure"
|
|
cancelButtonText="Cancel"
|
|
confirmButtonProps={{
|
|
type: 'button',
|
|
disabled: inputValue !== appName,
|
|
onClick: onConfirm,
|
|
className: 'text-error-700 bg-error-100 disabled:bg-error-50 disabled:text-error-700/50',
|
|
}}
|
|
/>
|
|
</Dialog.Content>
|
|
);
|
|
});
|