feat: add new dependencies including bootstrap, react-bootstrap, tailwindcss, and supporting libs #715
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import React from "react"; | ||
| import { Button, Card, Col, Row } from "react-bootstrap"; | ||
| import { ExternalLink, Linkedin, Twitter } from "lucide-react"; | ||
| // @ts-expect-error some quirky | ||
| import { motion } from "framer-motion"; | ||
| // @ts-expect-error some quirky | ||
anyulled marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| import { Company } from "@types/jobOffers"; | ||
| import JobOfferCard from "@components/JobOffers/JobOfferCard"; | ||
|
|
||
| interface CompanyCardProps { | ||
| company: Company; | ||
| index: number; | ||
| } | ||
|
|
||
| const CompanyCard: React.FC<CompanyCardProps> = ({ company, index }) => { | ||
| const cardVariants = { | ||
| hidden: { opacity: 0, y: 50 }, | ||
| visible: (i: number) => ({ | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| delay: i * 0.1, | ||
| duration: 0.5, | ||
| ease: "easeOut", | ||
| }, | ||
| }), | ||
| }; | ||
|
|
||
| return ( | ||
| <motion.div | ||
| variants={cardVariants} | ||
| initial="hidden" | ||
| animate="visible" | ||
| custom={index} | ||
| className="mb-5" | ||
| viewport={{ once: true, margin: "-100px" }} | ||
| > | ||
| <Card className="mb-4"> | ||
| <Card.Body> | ||
| <Row className="align-items-center"> | ||
| <Col md={4} className="text-center text-md-start mb-3 mb-md-0"> | ||
| <motion.img | ||
| whileHover={{ scale: 1.05 }} | ||
| src={company.logo} | ||
| alt={`${company.name} logo`} | ||
| className="company-logo" | ||
| /> | ||
| </Col> | ||
| <Col md={7}> | ||
| <h2 className="company-name">{company.name}</h2> | ||
| <p className="mb-2">{company.description}</p> | ||
| <div className="d-flex"> | ||
| {company.linkedin && ( | ||
| <a | ||
| href={company.linkedin} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="me-3" | ||
| > | ||
| <Linkedin className="social-icon" /> | ||
| </a> | ||
| )} | ||
| {company.twitter && ( | ||
| <a | ||
| href={company.twitter} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Twitter className="social-icon" /> | ||
| </a> | ||
| )} | ||
| </div> | ||
| </Col> | ||
| <Col md={1} className="text-center text-md-end mt-3 mt-md-0"> | ||
| <motion.div whileHover={{ scale: 1.05 }}> | ||
| <Button | ||
| variant="outline-primary" | ||
| href={company.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="d-flex align-items-center justify-content-center" | ||
| > | ||
| <span className="me-1">Visit</span> | ||
| <ExternalLink size={16} /> | ||
| </Button> | ||
| </motion.div> | ||
| </Col> | ||
| </Row> | ||
| </Card.Body> | ||
| </Card> | ||
|
|
||
| <div className="ms-md-4"> | ||
| {company.offers.map((offer, offerIndex) => ( | ||
| <JobOfferCard | ||
| key={offer.id} | ||
| jobOffer={offer} | ||
| companyName={company.name} | ||
| index={offerIndex} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CompanyCard; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import React, { useState } from "react"; | ||
| import { Button, Col, Form, InputGroup, Row } from "react-bootstrap"; | ||
| import { Filter, MapPin, Search } from "lucide-react"; | ||
| // @ts-expect-error some quirky | ||
anyulled marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| import { motion } from "framer-motion"; | ||
|
|
||
| interface JobFiltersProps { | ||
| onSearchChange: (value: string) => void; | ||
| onLocationChange: (value: string) => void; | ||
| onClearFilters: () => void; | ||
| } | ||
|
|
||
| const JobFilters: React.FC<JobFiltersProps> = ({ | ||
| onSearchChange, | ||
| onLocationChange, | ||
| onClearFilters, | ||
| }) => { | ||
| const [searchTerm, setSearchTerm] = useState(""); | ||
| const [location, setLocation] = useState(""); | ||
|
|
||
| const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| const value = e.target.value; | ||
| setSearchTerm(value); | ||
| onSearchChange(value); | ||
| }; | ||
|
|
||
| const handleLocationChange = (e: React.ChangeEvent<HTMLSelectElement>) => { | ||
| const value = e.target.value; | ||
| setLocation(value); | ||
| onLocationChange(value); | ||
| }; | ||
|
|
||
| const handleClear = () => { | ||
| setSearchTerm(""); | ||
| setLocation(""); | ||
| onClearFilters(); | ||
| }; | ||
|
|
||
| return ( | ||
| <motion.div | ||
| className="filters" | ||
| initial={{ opacity: 0, y: 20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.3 }} | ||
| > | ||
| <Row> | ||
| <Col md={6} className="mb-3 mb-md-0"> | ||
| <InputGroup> | ||
| <InputGroup.Text> | ||
| <Search size={18} /> | ||
| </InputGroup.Text> | ||
| <Form.Control | ||
| placeholder="Search for job titles, skills, or companies" | ||
| value={searchTerm} | ||
| onChange={handleSearchChange} | ||
| /> | ||
| </InputGroup> | ||
| </Col> | ||
| <Col md={4} className="mb-3 mb-md-0"> | ||
| <InputGroup> | ||
| <InputGroup.Text> | ||
| <MapPin size={18} /> | ||
| </InputGroup.Text> | ||
| <Form.Select value={location} onChange={handleLocationChange}> | ||
| <option value="">All Locations</option> | ||
| <option value="Hybrid">Hybrid</option> | ||
| <option value="Remote">Remote</option> | ||
| <option value="On-site">On-site</option> | ||
| </Form.Select> | ||
| </InputGroup> | ||
| </Col> | ||
| <Col md={2} className="d-flex"> | ||
| <Button | ||
| variant="outline-secondary" | ||
| className="w-100" | ||
| onClick={handleClear} | ||
| > | ||
| <Filter size={18} className="me-1" /> Clear | ||
| </Button> | ||
| </Col> | ||
| </Row> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default JobFilters; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React from "react"; | ||
| import { Badge, Button, Card, Col, Row } from "react-bootstrap"; | ||
| import { ExternalLink, MapPin } from "lucide-react"; | ||
| // @ts-expect-error some quirky | ||
|
Contributor
There was a problem hiding this comment. Another |
||
| import { motion } from "framer-motion"; | ||
| // @ts-expect-error some quirky | ||
|
Contributor
There was a problem hiding this comment. This |
||
| import { Offer as JobOffer } from "@types/jobOffers"; | ||
|
|
||
| interface JobOfferCardProps { | ||
| jobOffer: JobOffer; | ||
| companyName: string; | ||
| index: number; | ||
| } | ||
|
|
||
| const JobOfferCard: React.FC<JobOfferCardProps> = ({ | ||
| jobOffer, | ||
| companyName, | ||
| index, | ||
| }) => { | ||
| const cardVariants = { | ||
| hidden: { opacity: 0, y: 20 }, | ||
| visible: (i: number) => ({ | ||
| opacity: 1, | ||
| y: 0, | ||
| transition: { | ||
| delay: 0.1 + i * 0.08, | ||
| duration: 0.4, | ||
| ease: "easeOut", | ||
| }, | ||
| }), | ||
| }; | ||
|
|
||
| const formatJobText = () => { | ||
| if (jobOffer.text.includes("<br/>")) { | ||
| return <div dangerouslySetInnerHTML={{ __html: jobOffer.text }} />; | ||
| } | ||
| return <p className="job-text">{jobOffer.text}</p>; | ||
anyulled marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }; | ||
|
|
||
| return ( | ||
| <motion.div | ||
| variants={cardVariants} | ||
| initial="hidden" | ||
| animate="visible" | ||
| custom={index} | ||
| whileHover={{ scale: 1.01 }} | ||
| className="mb-3" | ||
| > | ||
| <Card> | ||
| <Card.Body> | ||
| <Row> | ||
| <Col md={8}> | ||
| <h3 className="job-title">{jobOffer.title}</h3> | ||
| <div className="d-flex align-items-center mb-3"> | ||
| <Badge className="location-badge me-2"> | ||
| <MapPin size={14} className="me-1" /> {jobOffer.location} | ||
| </Badge> | ||
| <small className="text-muted">at {companyName}</small> | ||
| </div> | ||
| <div className="job-description">{formatJobText()}</div> | ||
| </Col> | ||
| <Col | ||
| md={4} | ||
| className="d-flex flex-column justify-content-center align-items-center align-items-md-end mt-3 mt-md-0" | ||
| > | ||
| <motion.div | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.98 }} | ||
| > | ||
| <Button | ||
| variant="success" | ||
| className="apply-btn mb-2 w-100" | ||
| href={jobOffer.url} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Apply Now | ||
| </Button> | ||
| </motion.div> | ||
| <small className="text-muted d-flex align-items-center"> | ||
| <ExternalLink size={14} className="me-1" /> Opens in a new tab | ||
| </small> | ||
| </Col> | ||
| </Row> | ||
| </Card.Body> | ||
| </Card> | ||
| </motion.div> | ||
| ); | ||
| }; | ||
|
|
||
| export default JobOfferCard; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.