100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useModalStore } from "../../../stores/modalStore.js";
|
|
import { usePresenceStore } from "../../../stores/presenceStore.js";
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ id: "online", label: "Online", emoji: "🟢" },
|
|
{ id: "idle", label: "Idle", emoji: "🟡" },
|
|
{ id: "dnd", label: "Do Not Disturb", emoji: "🔴" },
|
|
{ id: "invisible", label: "Invisible", emoji: "⚫" },
|
|
];
|
|
|
|
export function StatusModal() {
|
|
const { isOpen, type, onClose } = useModalStore();
|
|
const currentStatus = usePresenceStore((state) => state.currentStatus);
|
|
const setStatus = usePresenceStore((state) => state.setStatus);
|
|
const customStatus = usePresenceStore((state) => state.customStatus);
|
|
const setCustomStatus = usePresenceStore((state) => state.setCustomStatus);
|
|
const [tempStatus, setTempStatus] = useState(customStatus);
|
|
|
|
if (!isOpen || type !== "statusModal") return null;
|
|
|
|
const handleStatusChange = (statusId) => {
|
|
setStatus(statusId);
|
|
onClose();
|
|
};
|
|
|
|
const handleCustomStatusSave = () => {
|
|
setCustomStatus(tempStatus);
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="modal-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="modal-content bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-6 w-96"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-xl font-bold text-white">Set Status</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-white text-2xl"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{/* Status Options */}
|
|
<div className="space-y-2 mb-6">
|
|
{STATUS_OPTIONS.map((option) => (
|
|
<button
|
|
key={option.id}
|
|
onClick={() => handleStatusChange(option.id)}
|
|
className={`w-full flex items-center gap-3 p-3 rounded transition ${
|
|
currentStatus === option.id
|
|
? "bg-[#0066ff] text-white"
|
|
: "bg-[#0f0f0f] text-gray-300 hover:bg-[#1a1a1a]"
|
|
}`}
|
|
>
|
|
<span className="text-xl">{option.emoji}</span>
|
|
<span>{option.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Custom Status */}
|
|
<div className="border-t border-[#2a2a2a] pt-4">
|
|
<label className="block text-sm text-gray-400 mb-2">
|
|
Custom Status
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={tempStatus}
|
|
onChange={(e) => setTempStatus(e.target.value)}
|
|
placeholder="What's your status?"
|
|
maxLength={50}
|
|
className="w-full bg-[#0f0f0f] border border-[#2a2a2a] rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500 text-sm"
|
|
/>
|
|
<div className="flex justify-end gap-2 mt-4">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 bg-[#2a2a2a] hover:bg-[#3a3a3a] rounded text-white text-sm transition"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleCustomStatusSave}
|
|
className="px-4 py-2 bg-[#0066ff] hover:bg-[#0052cc] rounded text-white text-sm transition"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|