From 8a4c867a8afb77a6a6ce9a0c7f9e1351627100f0 Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Tue, 11 Jun 2024 13:28:09 +0200
Subject: [PATCH] added it jobbank

---
 next.config.mjs              | 22 +++++++------
 package-lock.json            | 62 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 src/app/ITJobbank.tsx        | 43 +++++++++++++++++++++++++
 src/app/TabContainer.tsx     | 24 ++++++++++++++
 src/app/TheHub.tsx           |  2 +-
 src/app/_jobcard/JobCard.tsx |  2 +-
 src/app/page.tsx             |  4 +--
 src/components/ui/tabs.tsx   | 55 ++++++++++++++++++++++++++++++++
 9 files changed, 202 insertions(+), 13 deletions(-)
 create mode 100644 src/app/ITJobbank.tsx
 create mode 100644 src/app/TabContainer.tsx
 create mode 100644 src/components/ui/tabs.tsx

diff --git a/next.config.mjs b/next.config.mjs
index 1d36768..9d306c5 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,14 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    images: {
-        remotePatterns: [
-            {
-                protocol: 'https',
-                hostname: 'thehub-io.imgix.net',
-                pathname: '/files/s3/*',
-            },
-        ],
-    },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "thehub-io.imgix.net",
+        pathname: "/files/s3/*",
+      },
+      {
+        protocol: "https",
+        hostname: "www.it-jobbank.dk",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 20da803..4b1020c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-tabs": "^1.0.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "html-react-parser": "^5.1.10",
@@ -670,6 +671,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
+      "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -689,6 +721,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
diff --git a/package.json b/package.json
index 5722695..b936b86 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "html-react-parser": "^5.1.10",
diff --git a/src/app/ITJobbank.tsx b/src/app/ITJobbank.tsx
new file mode 100644
index 0000000..fe8ad43
--- /dev/null
+++ b/src/app/ITJobbank.tsx
@@ -0,0 +1,43 @@
+import { revalidatePath } from "next/cache";
+import JobCard from "./_jobcard/JobCard";
+
+interface JobPosting {
+  title: string;
+  logo: string;
+  company: string;
+  location: string;
+  type: string;
+  description: string;
+  link: string;
+  skills: {
+    react: boolean;
+    python: boolean;
+    golang: boolean;
+    svelte: boolean;
+    nextjs: boolean;
+    typescript: boolean;
+    tailwind: boolean;
+  };
+}
+
+async function fetchJobs(): Promise<JobPosting[]> {
+  const response = await fetch("http://51.20.250.24/jobs/itjobbank");
+  if (!response.ok) {
+    throw new Error("Failed to fetch jobs");
+  }
+
+  revalidatePath("/");
+  return response.json();
+}
+
+export default async function ITJobbank() {
+  const jobs = await fetchJobs();
+  return (
+    <>
+      <h1 className="text-4xl my-4">IT Jobbank</h1>
+      {jobs.map((job, i) => (
+        <JobCard key={i} job={job} />
+      ))}
+    </>
+  );
+}
diff --git a/src/app/TabContainer.tsx b/src/app/TabContainer.tsx
new file mode 100644
index 0000000..c1f1ece
--- /dev/null
+++ b/src/app/TabContainer.tsx
@@ -0,0 +1,24 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import TheHub from "./TheHub";
+import ITJobbank from "./ITJobbank";
+
+export default function TabContainer() {
+  return (
+    <Tabs defaultValue="the-hub" className="flex flex-col my-8">
+      <TabsList className="w-fit mx-auto">
+        <TabsTrigger className="text-xl" value="the-hub">
+          The Hub
+        </TabsTrigger>
+        <TabsTrigger className="text-xl" value="it-jobbank">
+          IT-Jobbank
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="the-hub">
+        <TheHub />
+      </TabsContent>
+      <TabsContent value="it-jobbank">
+        <ITJobbank />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/app/TheHub.tsx b/src/app/TheHub.tsx
index 7c22431..9c42164 100644
--- a/src/app/TheHub.tsx
+++ b/src/app/TheHub.tsx
@@ -21,7 +21,7 @@ interface JobPosting {
 }
 
 async function fetchJobs(): Promise<JobPosting[]> {
-  const response = await fetch("http://51.20.250.24/jobs");
+  const response = await fetch("http://51.20.250.24/jobs/hub");
   if (!response.ok) {
     throw new Error("Failed to fetch jobs");
   }
diff --git a/src/app/_jobcard/JobCard.tsx b/src/app/_jobcard/JobCard.tsx
index 5a6ffc6..15e8736 100644
--- a/src/app/_jobcard/JobCard.tsx
+++ b/src/app/_jobcard/JobCard.tsx
@@ -42,7 +42,7 @@ export default async function JobCard(props: { job: JobPosting }) {
           <div className="flex justify-between w-full">
             <div className="flex flex-row items-center gap-4">
               <Image
-                className="max-h-12 w-auto"
+                className="max-h-12  w-12 h-auto overflow-x-clip"
                 src={logo}
                 alt={`${company}'s logo`}
                 width={100}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 68b4e0d..e58596a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,8 +1,8 @@
 import moment from "moment";
 import TheHub from "./TheHub";
+import TabContainer from "./TabContainer";
 
 export default async function Home() {
-  const time = "2024-06-11T08:44:33.85198+02:00";
   return (
     <main className="container">
       <div>
@@ -12,7 +12,7 @@ export default async function Home() {
           they are posted!
         </h2>
         <hr className="stroke stroke-stone-200 my-4" />
-        <TheHub />
+        <TabContainer />
       </div>
     </main>
   );
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..d56f6b7
--- /dev/null
+++ b/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-stone-100 p-1 text-stone-500 dark:bg-stone-800 dark:text-stone-400",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all 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 data-[state=active]:bg-white data-[state=active]:text-stone-950 data-[state=active]:shadow-sm dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300 dark:data-[state=active]:bg-stone-950 dark:data-[state=active]:text-stone-50",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-950 focus-visible:ring-offset-2 dark:ring-offset-stone-950 dark:focus-visible:ring-stone-300",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }