Scribd
Upload
5 views

dashboard-component

The document is a React component for a dashboard that includes user authentication, dropdown menus, and input fields for text, selection, and date. It manages user email state and navigation, allowing users to log out and access different sections of the dashboard. The layout consists of a sidebar with interactive boxes and a main content area featuring a search bar.

Uploaded by

mahesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

dashboard-component

The document is a React component for a dashboard that includes user authentication, dropdown menus, and input fields for text, selection, and date. It manages user email state and navigation, allowing users to log out and access different sections of the dashboard. The layout consists of a sidebar with interactive boxes and a main content area featuring a search bar.

Uploaded by

mahesh Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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;

You might also like