All checks were successful
Build and Deploy Gabriel Kaszewski Portfolio / build-and-deploy-local (push) Successful in 54s
Co-authored-by: Copilot <copilot@github.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { Job } from "@/lib/types";
|
|
import { CircleUserRound, Building, Clock, Microchip } from "lucide-react";
|
|
import Chip from "./chip";
|
|
import formatDate from "@/utils/format-date";
|
|
|
|
const ExperienceCard = ({ job }: { job: Job }) => (
|
|
<div className="transition-all duration-300 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl hover:bg-white/10 hover:border-white/20 shrink-0 snap-center shadow-xl group w-[20rem] max-w-[20rem] flex flex-col gap-2 p-4">
|
|
<h4 className="flex items-center gap-1 text-2xl">
|
|
<CircleUserRound /> {job.position}
|
|
</h4>
|
|
<h5 className="flex items-center gap-1 text-xl font-light">
|
|
<Building /> {job.company}
|
|
</h5>
|
|
<h6 className="flex items-center gap-1">
|
|
<Clock />
|
|
{formatDate(job.start_date)} -{" "}
|
|
{job.still_working ? "Present" : formatDate(job.end_date!)}
|
|
</h6>
|
|
<p className="flex items-center gap-1 font-bold">
|
|
<Microchip /> Technologies
|
|
</p>
|
|
<div className="flex flex-wrap items-center w-full gap-2">
|
|
{job.technologies.map((tech) => (
|
|
<Chip key={tech} text={tech} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ExperienceCard;
|