added it jobbank

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;

package-lock.json

@@ -10,10 +10,12 @@
       "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",
         "lucide-react": "^0.390.0",
+        "moment": "^2.30.1",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
@@ -669,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",
@@ -688,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",
@@ -3715,6 +3778,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -11,10 +11,12 @@
   "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",
     "lucide-react": "^0.390.0",
+    "moment": "^2.30.1",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",

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} />
+      ))}
+    </>
+  );
+}

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>
+  );
+}

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");
   }

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}

src/app/page.tsx

@@ -1,4 +1,6 @@
+import moment from "moment";
 import TheHub from "./TheHub";
+import TabContainer from "./TabContainer";
 
 export default async function Home() {
   return (
@@ -10,7 +12,7 @@ export default async function Home() {
           they are posted!
         </h2>
         <hr className="stroke stroke-stone-200 my-4" />
-        <TheHub />
+        <TabContainer />
       </div>
     </main>
   );

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 }