92 lines
4.9 KiB
TypeScript
92 lines
4.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
interface InviteEmployeesModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onInvite: (email: string) => void;
|
|
onMultipleInvite?: () => void;
|
|
}
|
|
|
|
export const InviteEmployeesModal: React.FC<InviteEmployeesModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onInvite,
|
|
onMultipleInvite
|
|
}) => {
|
|
const [email, setEmail] = useState('');
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (email.trim()) {
|
|
onInvite(email.trim());
|
|
setEmail('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="w-[420px] bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-3xl shadow-[0px_25px_50px_-12px_rgba(0,0,0,0.25)] flex flex-col justify-start items-start overflow-hidden">
|
|
{/* Header */}
|
|
<div className="self-stretch p-6 inline-flex justify-between items-center">
|
|
<div className="flex justify-start items-center gap-2.5">
|
|
<div className="justify-start text-Text-Dark-950 dark:text-[--Neutrals-NeutralSlate50] text-lg font-semibold font-['Inter'] leading-7">Invite employees</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-6 h-6 flex justify-center items-center hover:bg-Text-Gray-100 dark:hover:bg-[--Neutrals-NeutralSlate700] rounded"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
|
<path d="M13 1L1 13M1 1L13 13" stroke="#666D80" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="self-stretch px-6 flex flex-col justify-start items-start gap-4">
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-1">
|
|
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">
|
|
Email
|
|
</div>
|
|
<div className="self-stretch h-10 px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 inline-flex justify-start items-center gap-2">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter email address"
|
|
className="flex-1 text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight bg-transparent outline-none placeholder:text-Text-Gray-500 dark:placeholder:text-[--Neutrals-NeutralSlate950]"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Footer */}
|
|
<div className="self-stretch p-6 inline-flex justify-between items-center">
|
|
<button
|
|
onClick={onMultipleInvite}
|
|
className="text-Brand-Orange text-sm font-medium font-['Inter'] leading-tight hover:underline"
|
|
>
|
|
Invite multiple employees
|
|
</button>
|
|
<div className="flex justify-start items-start gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-lg border border-Outline-Outline-Gray-300 dark:border-Neutrals-NeutralSlate600 text-[--Neutrals-NeutralSlate700] dark:text-[--Neutrals-NeutralSlate700] text-sm font-medium font-['Inter'] leading-tight hover:bg-Text-Gray-50 dark:hover:bg-[--Neutrals-NeutralSlate0]"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!email.trim()}
|
|
className="px-4 py-2 bg-[--Brand-Orange] rounded-lg text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Send Invite
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |