Complete UI for jobSite1 and jobSite2 #30 #41

package.json

@@ -22,6 +22,14 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@stripe/stripe-js": "^3.4.0",
+    "@heroicons/react": "^2.1.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "axios": "^1.6.8",
+    "babel": "^6.23.0",
     "@tailwindcss/forms": "^0.5.7",
     "auth0": "^4.4.0",
     "class-variance-authority": "^0.7.0",
@@ -33,6 +41,7 @@
     "react": "^18",
     "react-dom": "^18",
     "stripe": "^15.6.0",
+    "react-dom": "^18",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/globals.css

@@ -2,6 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  font-family: var(--font-inter), sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-inter), sans-serif;
+}
+
+.loading {
+  text-align: center;
+  padding-top: 50px;
+  display: flex;
+  justify-content: center;
+}
+
+.titleCase {
+  text-transform: capitalize;
+}
+
 /* :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;

src/app/jobsite1/jobposting/[id]/page.js

@@ -0,0 +1,126 @@
+'use client';
+
+import { fetchJobDetail } from '@/libs/jobsiteAPIrequest';
+import MapPinIcon from '@/components/icons/mapPinIcon';
+import ClockIcon from '@/components/icons/clockIcon';
+import BriefcaseIcon from '@/components/icons/briefCaseIcon';
+import MoneyIcon from '@/components/icons/moneyIcon';
+import CalendarIcon from '@/components/icons/calendarIcon';
+import UserIcon from '@/components/icons/userIcon';
+import EmailIcon from '@/components/icons/emailIcon';
+import Loading from '@/components/ui/Loading';
+import { useCallback, useEffect, useState } from 'react';
+
+export default function JobPosting({ params }) {
+  const postID = params.id;
+  const [jobDetail, setJobDetail] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  /**
+   * Fetch Jobpost detail from database.
+   */
+  const getDetailData = useCallback(async () => {
+    setIsLoading(true);
+    setJobDetail(await fetchJobDetail(postID));
+    setIsLoading(false);
+  }, [postID]);
+
+  useEffect(() => {
+    getDetailData();
+  }, [getDetailData]);
+
+  //Todo: getting job post detail from database
+  return (
+    <main className="w-full max-w-4xl mx-auto px-4 md:px-6 py-12 md:py-16">
+      {isLoading && <Loading />}
+      {!isLoading && (
+        <div className="grid gap-8">
+          <div>
+            <h1 className="text-3xl font-bold titleCase">
+              {jobDetail.jobTitle}
+            </h1>
+            <p className="text-gray-500 dark:text-gray-400 mt-1">
+              {jobDetail.hiringOrganization}
+            </p>
+            <div className="text-right text-gray-500 dark:text-gray-400 mt-1 lg:mt-0">
+              {jobDetail.datePosted}
+            </div>
+          </div>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <BriefcaseIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400 titleCase">
+                  {jobDetail.employmentSubType}, {jobDetail.employmentType}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <MapPinIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400">
+                  {jobDetail.streetAddress
+                    ? `${jobDetail.streetAddress}, `
+                    : ''}
+                  {jobDetail.addressLocality}, {jobDetail.addressRegion}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <MoneyIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400">
+                  ${jobDetail.minCompValue}{' '}
+                  {jobDetail.maxCompValue
+                    ? `to $${jobDetail.maxCompValue}`
+                    : ''}{' '}
+                  hourly
+                </span>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <ClockIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400">
+                  {jobDetail.workHours}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CalendarIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400">
+                  {jobDetail.startTime}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <UserIcon className="w-5 h-5 text-gray-500 dark:text-gray-400" />
+                <span className="text-gray-500 dark:text-gray-400">
+                  {jobDetail.vacancies} vacancy
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h2 className="text-2xl font-bold">About the Role</h2>
+            <p className="text-gray-500 dark:text-gray-400">## TO BE UPDATED</p>
+            <h2 className="text-2xl font-bold">Responsibilities</h2>
+            <ul className="space-y-2 text-gray-500 dark:text-gray-400 list-disc pl-6">
+              <li>## TO BE UPDATED</li>
+            </ul>
+            <h2 className="text-2xl font-bold">Benefits</h2>
+            <ul className="space-y-2 text-gray-500 dark:text-gray-400 list-disc pl-6">
+              {jobDetail.benefits}
+              <li>## TO BE UPDATED</li>
+            </ul>
+            <div className="space-y-4">
+              <h2 className="text-2xl font-bold">Apply by email</h2>
+              <div className="flex items-center gap-2">
+                <EmailIcon />
+                <a
+                  href={`mailto:${jobDetail.email}`}
+                  className="text-blue-900 underline">
+                  {jobDetail.email}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

src/app/jobsite1/layout.js

@@ -0,0 +1,18 @@
+import Top from '@/components/Top';
+import Footer from '@/components/Footer';
+
+export const metadata = {
+  title: 'Indigenous Job Site',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <Top />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}

src/app/jobsite1/page.js

@@ -0,0 +1,25 @@
+'use client';
+
+import JobLists from '@/components/jobsite1/JobLists';
+import Filter from '@/components/jobsite1/Filter';
+import SearchIcon from '@/components/icons/searcIcon';
+import { Input } from '@/components/ui/input';
+
+export default function Home() {
+  return (
+    <div className="flex flex-col lg:flex-row">
+      <Filter />
+      <div className="flex-1 p-6">
+        <div className="mb-6 relative">
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500" />
+          <Input
+            className="w-full px-10 py-3 rounded-md bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-950 dark:text-gray-50"
+            placeholder="Search for jobs..."
+            type="text"
+          />
+        </div>
+        <JobLists />
+      </div>
+    </div>
+  );
+}

src/app/jobsite2/jobposting/[id]/page.js

@@ -0,0 +1,13 @@
+'use client';
+
+import JobDetail from '@/components/jobsite2/jobdetail';
+
+export default function JobPosting({ params }) {
+  const postingID = params.id;
+
+  return (
+    <main className="w-full max-w-5xl mx-auto px-4 md:px-6 py-7 md:py-4">
+      <JobDetail postingID={postingID}></JobDetail>
+    </main>
+  );
+}

src/app/jobsite2/layout.js

@@ -0,0 +1,18 @@
+import Top2 from '@/components/jobsite2/Top2';
+import Footer from '@/components/Footer';
+
+export const metadata = {
+  title: 'New Comers Job Site',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <Top2 />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}

src/app/jobsite2/page.js

@@ -0,0 +1,38 @@
+'use client';
+
+import { fetchTotalPages } from '@/libs/jobsiteAPIrequest';
+import JobDetail from '@/components/jobsite2/jobdetail';
+import SearchBar from '@/components/jobsite2/searchBar';
+import JobLists from '@/components/jobsite2/joblists';
+import Pagination from '@/components/ui/pagination';
+import { useEffect, useState } from 'react';
+
+const JOBSITE_NAME = 'newcomers';
+
+export default function Home() {
+  const [postingID, setPostingID] = useState(null); //jobposting id that will be displayed
+  const [page, setPage] = useState(1); // current page
+  const [totalPage, setTotalPage] = useState(0); // total number of pages
+
+  useEffect(() => {
+    fetchTotalPages(setTotalPage, JOBSITE_NAME);
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-8 p-4 md:p-8 bg-[#f0f9ff] dark:bg-[#0a1929]">
+      <SearchBar></SearchBar>
+      <div className="flex flex-row flex-1 space-x-6">
+        <div className="w-full sm:w-4/12">
+          <JobLists onClickJob={setPostingID} page={page}></JobLists>
+          <Pagination
+            onClickPageNum={setPage}
+            totalPage={totalPage}></Pagination>
+        </div>
+
+        <div className="hidden sm:block sm:w-8/12">
+          <JobDetail postingID={postingID}></JobDetail>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Footer.jsx

@@ -0,0 +1,11 @@
+export default function Footer() {
+  return (
+    <div
+      style={{
+        padding: '40px 0',
+        textAlign: 'center',
+      }}>
+      Copyright © Videre. All rights reserved.
+    </div>
+  );
+}

src/components/Top.jsx

@@ -0,0 +1,26 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Top() {
+  return (
+    <header className="flex h-16 items-center justify-between px-4 md:px-6">
+      <div className="flex items-center gap-4">
+        <Link className="flex items-center" href="/jobsite1">
+          <Image
+            alt="Logo"
+            className="h-12 w-12"
+            height={32}
+            src="/placeholder.svg"
+            style={{
+              aspectRatio: '32/32',
+              objectFit: 'cover',
+              marginRight: '20px',
+            }}
+            width={32}
+          />
+          <span className="text-lg font-bold">Indigenous Job Site</span>
+        </Link>
+      </div>
+    </header>
+  );
+}

src/components/fontstyle.jsx

@@ -0,0 +1,13 @@
+import { Libre_Franklin, Cormorant_Garamond } from 'next/font/google';
+
+export const libre_franklin = Libre_Franklin({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-libre_franklin',
+});
+export const cormorant_garamond = Cormorant_Garamond({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-cormorant_garamond',
+  weight: ['400', '500', '600'],
+});

src/components/icons/moneyIcon.jsx

@@ -0,0 +1,17 @@
+export default function MoneyIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round">
+      <path d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+    </svg>
+  );
+}

src/components/icons/arrowDownIcon.jsx

@@ -0,0 +1,17 @@
+export default function ArrowDownIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round">
+      <path d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    </svg>
+  );
+}