ConfirmDialog

import { useState } from 'react';
import Button from '@/components/ui/Button';
import ConfirmDialog from '@/components/composites/ConfirmDialog';

type DialogState = {
  open: boolean;
  type: 'info' | 'success' | 'warning' | 'danger';
};

export default function StatusTypesDemo() {
  const [state, setState] = useState<DialogState>({
    open: false,
    type: 'info',
  });

  const types = ['info', 'success', 'warning', 'danger'] as const;

  return (
    <>
      <div className="flex flex-wrap gap-2">
        {types.map((t) => (
          <Button
            key={t}
            variant={t === 'danger' ? 'solid' : 'default'}
            destructive={t === 'danger'}
            onClick={() => setState({ open: true, type: t })}
          >
            {t.charAt(0).toUpperCase() + t.slice(1)}
          </Button>
        ))}
      </div>
      <ConfirmDialog
        isOpen={state.open}
        type={state.type}
        title={`${state.type.charAt(0).toUpperCase() + state.type.slice(1)} confirmation`}
        onConfirm={() => setState((s) => ({ ...s, open: false }))}
        onCancel={() => setState((s) => ({ ...s, open: false }))}
        confirmText="Continue"
      >
        This is a {state.type}-type confirmation dialog with a matching
        status icon and color.
      </ConfirmDialog>
    </>
  );
}

import { useState } from 'react';
import Button from '@/components/ui/Button';
import ConfirmDialog from '@/components/composites/ConfirmDialog';

export default function CustomButtonsDemo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Archive project
      </Button>
      <ConfirmDialog
        isOpen={open}
        type="warning"
        title="Archive this project?"
        confirmText="Archive"
        cancelText="Keep working"
        confirmButtonProps={{ destructive: true }}
        onConfirm={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      >
        The project will be moved to archives. Team members will lose access
        until it is restored.
      </ConfirmDialog>
    </>
  );
}

import { useState } from 'react';
import Button from '@/components/ui/Button';
import ConfirmDialog from '@/components/composites/ConfirmDialog';

export default function ControlledDemo() {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleConfirm = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setOpen(false);
    }, 1000);
  };

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        Submit order
      </Button>
      <ConfirmDialog
        isOpen={open}
        type="info"
        title="Confirm order"
        confirmText={loading ? 'Processing...' : 'Submit'}
        confirmButtonProps={{ loading }}
        onConfirm={handleConfirm}
        onCancel={() => !loading && setOpen(false)}
      >
        Please review your order before submitting. This will charge your
        account immediately.
      </ConfirmDialog>
    </>
  );
}