import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { LogOut } from "lucide-react";
import SearchBar from "./SearchBar";
import "./Dashboard.css";
const Dashboard = () => {
const [userEmail, setUserEmail] = useState("");
const [dropdownValue, setDropdownValue] = useState("");
const [selectedDate, setSelectedDate] = useState("");
const [activeDropdowns, setActiveDropdowns] = useState({
admin: false,
medical: false,
box1: false,
box2: false,
box3: false,
});
const [searchQuery, setSearchQuery] = useState("");
const navigate = useNavigate();
useEffect(() => {
const email = localStorage.getItem("userEmail");
if (email) {
setUserEmail(email);
} else {
navigate("/");
}
}, [navigate]);
const toggleDropdown = (key) => {
setActiveDropdowns((prev) => ({
...prev,
[key]: !prev[key],
}));
};
const handleLogout = () => {
localStorage.removeItem("userEmail");
navigate("/");
};
return (
<div className="dashboard-container">
<aside className="sidebar">
<img
src="public/Indian_Navy-removebg-preview.png"
alt="Navy Logo"
className="navy-logo"
/>
{[
{
key: "box1",
label: "First Box: Text Input",
content: (
<div className="drag-box-content">
<label htmlFor="textInput">Enter Text:</label>
<input
type="text"
id="textInput"
placeholder="Type here..."
className="input-field"
/>
</div>
),
},
{
key: "box2",
label: "Second Box: Dropdown Selector",
content: (
<div className="drag-box-content">
<label htmlFor="dropdownSelector">Choose an option:</label>
<select
id="dropdownSelector"
value={dropdownValue}
onChange={(e) => setDropdownValue(e.target.value)}
className="dropdown-selector"
>
<option value="">-- Select an option --</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>
),
},
{
key: "box3",
label: "Third Box: Date Picker",
content: (
<div className="drag-box-content">
<label htmlFor="datePicker">Select a date:</label>
<input
type="date"
id="datePicker"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}
className="date-picker"
/>
</div>
),
},
].map(({ key, label, content }) => (
<div className="drag-box" key={key}>
<div className="drag-box-header" onClick={() => toggleDropdown(key)}>
{label} {activeDropdowns[key] ? "▼" : "▲"}
</div>
{activeDropdowns[key] && content}
</div>
))}
</aside>
<div className="main-wrapper">
<header className="header">
<div className="nav-buttons">
{[
{ key: "admin", label: "ADMINISTRATION" },
{ key: "medical", label: "MEDICAL" },
].map(({ key, label }) => (
<button
key={key}
className="nav-button"
onClick={() => toggleDropdown(key)}
>
{label} {activeDropdowns[key] ? "▼" : "▲"}
</button>
))}
</div>
{/* Branding Section */}
<div className="branding-section absolute left-1/2 top-4 -translate-x-
1/2">
<div className="flex items-center gap-6">
<img
src="public/ab1dbe92-7fef-44b2-a162-6920ace61030.png"
alt="Sandarbh.AI Logo"
className="h-10 w-10 order-2"
/>
<div className="order-1">
<div className="text-xl font-bold uppercase">Sandarbh.ai</div>
<div className="text-sm">Your partner in learning</div>
</div>
</div>
</div>
<div className="user-section">
<span className="email">{userEmail}</span>
<LogOut className="logout-btn" size={16} onClick={handleLogout} />
</div>
</header>
<main className="content">
<SearchBar />
</main>
</div>
</div>
);
};
export default Dashboard;
