Scribd
Upload
2 views2 pages

Admin Page

The document is a React component for an Admin Dashboard that includes a form for creating tasks. The form allows users to input a task title, description, date, assignee, and category, with a submit button to create the task. It features a dark-themed design with responsive layout and styling using Tailwind CSS classes.

Uploaded by

sanjib deka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

Admin Page

The document is a React component for an Admin Dashboard that includes a form for creating tasks. The form allows users to input a task title, description, date, assignee, and category, with a submit button to create the task. It features a dark-themed design with responsive layout and styling using Tailwind CSS classes.

Uploaded by

sanjib deka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import React from 'react';

import Header from '../Others/Header';

const AdminDashboard = () => {


return (
<div className="min-h-screen bg-black text-white">
<Header />
<div className="flex justify-center">
<div className="w-full max-w-4xl bg-gray-900 p-8 rounded-2xl shadow-lg mt-
10">
<h2 className="text-3xl font-bold text-center mb-8">Create Task</h2>
<form className="grid grid-cols-2 gap-6">
{/* Task Title */}
<div className="col-span-2">
<label className="block text-lg font-semibold mb-2 text-gray-
300">Task Title</label>
<input
type="text"
placeholder="Enter task title"
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-500 text-white"
/>
</div>

{/* Description */}


<div className="col-span-2">
<label className="block text-lg font-semibold mb-2 text-gray-
300">Description</label>
<textarea
placeholder="Detailed description of task (Max 500 words)"
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-500 text-white"
rows="4"
/>
</div>

{/* Date */}


<div>
<label className="block text-lg font-semibold mb-2 text-gray-
300">Date</label>
<input
type="date"
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-500 text-white"
/>
</div>

{/* Assign To */}


<div>
<label className="block text-lg font-semibold mb-2 text-gray-
300">Assign To</label>
<input
type="text"
placeholder="Enter name"
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-500 text-white"
/>
</div>

{/* Category */}


<div className="col-span-2">
<label className="block text-lg font-semibold mb-2 text-gray-
300">Category</label>
<input
type="text"
placeholder="Design, Development, etc."
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg
focus:outline-none focus:ring-2 focus:ring-gray-500 text-white"
/>
</div>

{/* Submit Button */}


<div className="col-span-2 flex justify-end">
<button
type="submit"
className="bg-gray-700 text-white px-6 py-3 rounded-lg font-
semibold hover:bg-gray-600 transition"
>
Create Task
</button>
</div>
</form>
</div>
</div>
</div>
);
};

export default AdminDashboard;

You might also like