From 3579a10338274549f8a0644ed6ff745d7707189e Mon Sep 17 00:00:00 2001 From: christian Date: Mon, 10 Jun 2024 00:14:08 +0200 Subject: [PATCH] added skill icons --- public/icons/golang.svg | 9 ++++++ public/icons/nextjs.svg | 1 + public/icons/python.svg | 1 + public/icons/react.svg | 1 + public/icons/svelte.svg | 1 + public/icons/tailwind.svg | 1 + public/icons/typescript.svg | 1 + src/app/_jobcard/JobCard.tsx | 35 ++++++++++++++--------- src/app/_jobcard/JobCardIcon.tsx | 10 +++++++ src/app/_jobcard/JobCardIconContainer.tsx | 33 +++++++++++++++++++++ src/components/ui/accordion.tsx | 27 +++++++++-------- 11 files changed, 92 insertions(+), 28 deletions(-) create mode 100644 public/icons/golang.svg create mode 100644 public/icons/nextjs.svg create mode 100644 public/icons/python.svg create mode 100644 public/icons/react.svg create mode 100644 public/icons/svelte.svg create mode 100644 public/icons/tailwind.svg create mode 100644 public/icons/typescript.svg create mode 100644 src/app/_jobcard/JobCardIcon.tsx create mode 100644 src/app/_jobcard/JobCardIconContainer.tsx diff --git a/public/icons/golang.svg b/public/icons/golang.svg new file mode 100644 index 0000000..afa08db --- /dev/null +++ b/public/icons/golang.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/icons/nextjs.svg b/public/icons/nextjs.svg new file mode 100644 index 0000000..db7c66a --- /dev/null +++ b/public/icons/nextjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/python.svg b/public/icons/python.svg new file mode 100644 index 0000000..ee03a04 --- /dev/null +++ b/public/icons/python.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/react.svg b/public/icons/react.svg new file mode 100644 index 0000000..1ea9bd9 --- /dev/null +++ b/public/icons/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/svelte.svg b/public/icons/svelte.svg new file mode 100644 index 0000000..7367efe --- /dev/null +++ b/public/icons/svelte.svg @@ -0,0 +1 @@ +svelte \ No newline at end of file diff --git a/public/icons/tailwind.svg b/public/icons/tailwind.svg new file mode 100644 index 0000000..e5a3d78 --- /dev/null +++ b/public/icons/tailwind.svg @@ -0,0 +1 @@ +tailwind-css \ No newline at end of file diff --git a/public/icons/typescript.svg b/public/icons/typescript.svg new file mode 100644 index 0000000..07ac433 --- /dev/null +++ b/public/icons/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/_jobcard/JobCard.tsx b/src/app/_jobcard/JobCard.tsx index 9712efe..b50411b 100644 --- a/src/app/_jobcard/JobCard.tsx +++ b/src/app/_jobcard/JobCard.tsx @@ -7,6 +7,7 @@ import { import parse from "html-react-parser"; import styles from "./JobCardDescription.module.css"; import Image from "next/image"; +import JobCardIconContainer from "./JobCardIconContainer"; interface JobPosting { title: string; @@ -31,28 +32,34 @@ export default async function JobCard(props: { job: JobPosting }) { const { title, logo, company, location, type, description, link, skills } = props.job; const parsedDescription = parse(description); + const hasAnySkill = Object.values(skills).some((skill) => skill); return ( -
- {`${company}'s -
-

{title}

+
+
+ {`${company}'s +
+

{title}

-
- {company} - {location} - {type} +
+ {company} + {location} + {type} +
+
+ {hasAnySkill && } +
diff --git a/src/app/_jobcard/JobCardIcon.tsx b/src/app/_jobcard/JobCardIcon.tsx new file mode 100644 index 0000000..84f1846 --- /dev/null +++ b/src/app/_jobcard/JobCardIcon.tsx @@ -0,0 +1,10 @@ +import Image from "next/image"; + +export default function JobCardIcon(props: { src: string }) { + const { src } = props; + return ( +
+ {`${src} +
+ ); +} diff --git a/src/app/_jobcard/JobCardIconContainer.tsx b/src/app/_jobcard/JobCardIconContainer.tsx new file mode 100644 index 0000000..2e69a3a --- /dev/null +++ b/src/app/_jobcard/JobCardIconContainer.tsx @@ -0,0 +1,33 @@ +import react from "/public/icons/react.svg"; +import python from "/public/icons/python.svg"; +import golang from "/public/icons/golang.svg"; +import svelte from "/public/icons/svelte.svg"; +import nextjs from "/public/icons/nextjs.svg"; +import typescript from "/public/icons/typescript.svg"; +import tailwind from "/public/icons/tailwind.svg"; +import JobCardIcon from "./JobCardIcon"; + +type Skills = { + react: boolean; + python: boolean; + golang: boolean; + svelte: boolean; + nextjs: boolean; + typescript: boolean; + tailwind: boolean; +}; + +export default function JobCardIconContainer(props: { skills: Skills }) { + const { skills } = props; + return ( +
+ {skills.react && } + {skills.python && } + {skills.golang && } + {skills.svelte && } + {skills.nextjs && } + {skills.typescript && } + {skills.tailwind && } +
+ ); +} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index 24c788c..77bc371 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -1,12 +1,12 @@ -"use client" +"use client"; -import * as React from "react" -import * as AccordionPrimitive from "@radix-ui/react-accordion" -import { ChevronDown } from "lucide-react" +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const Accordion = AccordionPrimitive.Root +const Accordion = AccordionPrimitive.Root; const AccordionItem = React.forwardRef< React.ElementRef, @@ -17,8 +17,8 @@ const AccordionItem = React.forwardRef< className={cn("border-b", className)} {...props} /> -)) -AccordionItem.displayName = "AccordionItem" +)); +AccordionItem.displayName = "AccordionItem"; const AccordionTrigger = React.forwardRef< React.ElementRef, @@ -34,11 +34,10 @@ const AccordionTrigger = React.forwardRef< {...props} > {children} - -)) -AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; const AccordionContent = React.forwardRef< React.ElementRef, @@ -51,8 +50,8 @@ const AccordionContent = React.forwardRef< >
{children}
-)) +)); -AccordionContent.displayName = AccordionPrimitive.Content.displayName +AccordionContent.displayName = AccordionPrimitive.Content.displayName; -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };