added apply button and proper dimensions to icons

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-slot": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "html-react-parser": "^5.1.10",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "html-react-parser": "^5.1.10",

src/app/_jobcard/JobCard.tsx

@@ -8,6 +8,7 @@ import parse from "html-react-parser";
 import styles from "./JobCardDescription.module.css";
 import Image from "next/image";
 import JobCardIconContainer from "./JobCardIconContainer";
+import { Button } from "@/components/ui/button";
 
 interface JobPosting {
   title: string;
@@ -49,7 +50,7 @@ export default async function JobCard(props: { job: JobPosting }) {
               />
               <div className="flex flex-col justify-start">
                 <h2 className="text-xl sm:text-2xl text-left block sm:hidden">
-                  {title.length > 40 ? title.slice(0, 40) + "..." : title}
+                  {title.length > 50 ? title.slice(0, 50) + "..." : title}
                 </h2>
                 <h2 className="text-2xl sm:text-2xl text-left sm:block hidden">
                   {title}
@@ -72,8 +73,15 @@ export default async function JobCard(props: { job: JobPosting }) {
           </div>
         </AccordionTrigger>
         <AccordionContent>
-          <div className={`py-4 ${styles.parsedDescription}`}>
+          <div className="flex flex-col gap-2">
-            {parsedDescription}
+            <div className={`py-4 ${styles.parsedDescription}`}>
+              {parsedDescription}
+            </div>
+            <div className="flex justify-center">
+              <a href={link}>
+                <Button variant="outline">Apply here</Button>
+              </a>
+            </div>
           </div>
         </AccordionContent>
       </AccordionItem>

src/app/_jobcard/JobCardIcon.tsx

@@ -3,8 +3,14 @@ import Image from "next/image";
 export default function JobCardIcon(props: { src: string }) {
   const { src } = props;
   return (
-    <div className="flex justify-center items-center w-6 md:min-w-14">
+    <div className="flex justify-center items-center h-auto w-6 md:min-w-14">
-      <Image src={src} alt={`${src} icon`} width={50} height={50} />
+      <Image
+        className="h-auto w-6 md:min-w-12"
+        src={src}
+        alt={`${src} icon`}
+        width={50}
+        height={50}
+      />
     </div>
   );
 }

src/app/page.tsx

@@ -4,6 +4,12 @@ export default async function Home() {
   return (
     <main className="container">
       <div>
+        <h1 className="text-4xl pt-4">Software Developer Jobs</h1>
+        <h2 className="text-2xl">
+          Get entry- and mid level software developer jobs in Denmark as soon as
+          they are posted!
+        </h2>
+        <hr className="stroke stroke-stone-200 my-4" />
         <TheHub />
       </div>
     </main>

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-stone-900 text-stone-50 hover:bg-stone-900/90 dark:bg-stone-50 dark:text-stone-900 dark:hover:bg-stone-50/90",
+        destructive:
+          "bg-red-500 text-stone-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-stone-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-stone-200 bg-white hover:bg-stone-100 hover:text-stone-900 dark:border-stone-800 dark:bg-stone-950 dark:hover:bg-stone-800 dark:hover:text-stone-50",
+        secondary:
+          "bg-stone-100 text-stone-900 hover:bg-stone-100/80 dark:bg-stone-800 dark:text-stone-50 dark:hover:bg-stone-800/80",
+        ghost: "hover:bg-stone-100 hover:text-stone-900 dark:hover:bg-stone-800 dark:hover:text-stone-50",
+        link: "text-stone-900 underline-offset-4 hover:underline dark:text-stone-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }