Untitled
unknown
plain_text
3 months ago
2.0 kB
4
Indexable
import { useState } from "react"; import { Card } from "react-bootstrap"; import { Input, Button } from "antd"; // Using Ant Design for input & button import { MessageSquare, Briefcase, Search } from "lucide-react"; import "bootstrap/dist/css/bootstrap.min.css"; // Import Bootstrap styles import "antd/dist/reset.css"; // Import Ant Design styles export default function StudentJobApp() { const [search, setSearch] = useState(""); const jobs = [ { title: "Marketing Intern", company: "ABC Marketing", location: "Tirana" }, { title: "Software Developer Intern", company: "TechHub Albania", location: "Durres" }, { title: "Finance Assistant", company: "Bank of Albania", location: "Tirana" }, ]; return ( <div className="p-4 max-w-3xl mx-auto"> <h1 className="text-3xl font-bold mb-4">StudentJob Albania</h1> <div className="d-flex gap-2 mb-4"> <Input type="text" placeholder="Search jobs..." value={search} onChange={(e) => setSearch(e.target.value)} /> <Button type="primary"> <Search className="h-5 w-5" /> </Button> </div> <div className="grid gap-4"> {jobs .filter((job) => job.title.toLowerCase().includes(search.toLowerCase())) .map((job, index) => ( <Card key={index} className="p-3 border rounded-lg"> <Card.Body> <h2 className="h5 font-weight-bold d-flex align-items-center gap-2"> <Briefcase className="h-5 w-5" /> {job.title} </h2> <p className="text-muted">{job.company} - {job.location}</p> <Button className="mt-2" type="primary">Apply Now</Button> </Card.Body> </Card> ))} </div> <div className="mt-4 text-center"> <Button type="dashed" className="d-flex align-items-center gap-2"> <MessageSquare className="h-5 w-5" /> Contact Employers </Button> </div> </div> ); }
Editor is loading...
Leave a Comment