Manage Jobs - Copy this React, Tailwind Component to your project

Import { useState } from "react"; import { FiSearch } from "react icons/fi"; import { useGetAllJobsQuery } from "../../redux/rtk/job.service"; const ManageJobs = () => { const [searchQuery, setSearchQuery] = useState(""); const { data: jobsRes } = useGetAllJobsQuery(); const jobs = jobsRes?.data || []; if (!jobs) return <></>; return ( <div className="min h screen bg gray 100 p 8 text black"> <div className="max w 7xl mx auto"> <div className="flex justify between items center mb 8"> <h1 className="text 3xl font bold text gray 800">Job Listings Management</h1> <div className="px 4 py 2 rounded [8px] text white font semibold cursor pointer hover:bg blue 700 transition all border [1px] bg blue 600"> Add Job </div> </div> <div className="mb 4 relative"> <FiSearch className="absolute left 3 top 3 text gray 400" /> <input type="text" placeholder="Search jobs..." className="w full text black bg white pl 10 pr 4 py 2 rounded lg border border gray 300 focus:outline none focus:ring 2 focus:ring blue 500" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} /> </div> </div> </div> ); }; export default ManageJobs;