80 lines
3.3 KiB
JavaScript
80 lines
3.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Mail, Phone, Send, CheckCircle2 } from 'lucide-react';
|
|
|
|
export default function MessageCandidateModal({ open, onClose, application }) {
|
|
const [channel, setChannel] = useState('message');
|
|
const [message, setMessage] = useState('');
|
|
const [sent, setSent] = useState(false);
|
|
|
|
const handleSend = () => {
|
|
setSent(true);
|
|
setTimeout(() => {
|
|
setSent(false);
|
|
setMessage('');
|
|
onClose();
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
|
<DialogContent className="max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>Message {application?.applicant_name}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{sent ? (
|
|
<div className="py-8 text-center">
|
|
<div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
|
|
<CheckCircle2 className="w-6 h-6 text-[#059669]" />
|
|
</div>
|
|
<p className="text-[14px] font-medium text-[#111827]">Message sent!</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => setChannel('message')}
|
|
className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
|
|
channel === 'message' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
|
|
}`}
|
|
>
|
|
<Mail className="w-4 h-4" /> Message
|
|
</button>
|
|
<button
|
|
onClick={() => setChannel('call')}
|
|
className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
|
|
channel === 'call' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
|
|
}`}
|
|
>
|
|
<Phone className="w-4 h-4" /> Call
|
|
</button>
|
|
</div>
|
|
|
|
{channel === 'call' ? (
|
|
<div className="py-6 text-center text-[13px] text-[#6B7280]">
|
|
<Phone className="w-8 h-8 text-[#0A39DF] mx-auto mb-2" />
|
|
Calling {application?.phone || 'candidate'}...
|
|
</div>
|
|
) : (
|
|
<textarea
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
placeholder={`Hi ${application?.applicant_name?.split(' ')[0]}, ...`}
|
|
className="w-full min-h-[100px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
|
|
/>
|
|
)}
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>Cancel</Button>
|
|
<Button onClick={handleSend} disabled={channel === 'message' && !message.trim()} className="bg-[#0A39DF] hover:bg-[#082EB4]">
|
|
<Send className="w-4 h-4 mr-2" /> Send
|
|
</Button>
|
|
</DialogFooter>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |