Deploy

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/supabase-js": "^2.45.1",
+    "@tanstack/react-table": "^8.20.5",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
@@ -26,6 +27,7 @@
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.2",
+    "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.21.3",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",

src/components/Skeleton.tsx

@@ -0,0 +1,11 @@
+const Skeleton = () => {
+  return (
+    <div className="animate-pulse flex flex-col gap-4 space-x-4">
+      <div className="h-4 bg-light-gray rounded"></div>
+      <div className="h-4 bg-light-gray rounded"></div>
+      <div className="h-4 bg-light-gray rounded"></div>
+    </div>
+  );
+};
+
+export default Skeleton;

src/components/guards/AuthGuard.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import useAuth from '@/hooks/use-auth';
+
+type Props = {
+  children: ReactNode;
+};
+
+const AuthGuard = ({ children }: Props) => {
+  const { isAuthenticated } = useAuth();
+  const location = useLocation();
+  const [requestedLocation, setRequestedLocation] = useState<string>();
+
+  if (!isAuthenticated) {
+    if (location.pathname !== requestedLocation) {
+      setRequestedLocation(location.pathname);
+    }
+    return <Navigate to="/" />;
+  }
+  return <div>{children}</div>;
+};
+
+export default AuthGuard;

src/components/navigation/Footer.tsx

@@ -5,7 +5,7 @@ const Footer = () => {
     <footer className="bg-light-gray px-3 sm:px-20 py-10 flex justify-between">
       {/* <div className="sm:h-100 border-l-2 border-dark-gray mx-4"></div> */}
       <div>
-        <p>About</p>
+        <p className="text-primary">Kwetu Jobs</p>
         <p>
           <RouterLink to="/jobs" className="hover:text-primary">
             Jobs

src/components/navigation/Navbar.tsx

@@ -5,12 +5,24 @@ const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <nav className="py-4 px-3 sm:px-20">
+    <nav className="pt-6 pb-4 px-3 sm:px-20">
       <div className="flex justify-between">
         <p className="text-primary">
-          <NavLink to="/">JOB HUB NEST</NavLink>
+          <NavLink to="/">Kwetu Jobs</NavLink>
         </p>
         <ul className="hidden sm:flex gap-x-4">
+          <li>
+            <NavLink
+              className={({ isActive }) =>
+                isActive
+                  ? 'text-primary font-semibold'
+                  : 'hover:text-primary font-semibold'
+              }
+              to="/"
+            >
+              Home
+            </NavLink>
+          </li>
           <li>
             <NavLink
               className={({ isActive }) =>
@@ -35,7 +47,7 @@ const Navbar = () => {
               Login / Register
             </NavLink>
           </li>
-          <li>
+          {/* <li>
             <NavLink
               className={({ isActive }) =>
                 isActive
@@ -46,13 +58,25 @@ const Navbar = () => {
             >
               For Employers
             </NavLink>
-          </li>
+          </li> */}
         </ul>
         <div className="sm:hidden" onClick={() => setIsOpen(!isOpen)}>
           <p>Menu</p>
         </div>
       </div>
       <ul className={isOpen ? 'flex flex-col sm:hidden' : 'hidden'}>
+        <li>
+          <NavLink
+            className={({ isActive }) =>
+              isActive
+                ? 'text-primary font-semibold'
+                : 'hover:text-primary font-semibold'
+            }
+            to="/"
+          >
+            Home
+          </NavLink>
+        </li>
         <li>
           <NavLink
             className={({ isActive }) =>
@@ -77,7 +101,7 @@ const Navbar = () => {
             Login / Register
           </NavLink>
         </li>
-        <li>
+        {/* <li>
           <NavLink
             className={({ isActive }) =>
               isActive
@@ -88,7 +112,7 @@ const Navbar = () => {
           >
             For Employers
           </NavLink>
-        </li>
+        </li> */}
       </ul>
     </nav>
   );

src/components/ui/data-table-pagination.tsx

@@ -0,0 +1,83 @@
+import { type Table } from '@tanstack/react-table';
+import { Button } from './button';
+import {
+  ArrowLeft,
+  ArrowLeftFromLine,
+  ArrowRight,
+  ArrowRightFromLine,
+} from 'lucide-react';
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  pageSizeOptions?: number[];
+}
+function DataTablePagination<TData>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex w-full flex-col items-center justify-between gap-4 px-2 py-1 overflow-auto border-t-2 border-light-gray">
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg-gap-8">
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of {''}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            aria-label="Go to first page"
+            className="hidden lg:flex"
+            size="sm"
+            variant="outline"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ArrowLeftFromLine className="h-4 w-4" />
+          </Button>
+          <Button
+            aria-label="Go to previous page"
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            aria-label="Go to next page"
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ArrowRight className="h-4 w-4" />
+          </Button>
+          <Button
+            aria-label="Go to last page"
+            variant="outline"
+            className="hidden lg:flex"
+            size="sm"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <ArrowRightFromLine className="h-4 w-4" />
+          </Button>
+          <select
+            value={table.getState().pagination.pageSize}
+            onChange={(e) => {
+              console.log('size', e.target.value);
+              table.setPageSize(Number(e.target.value));
+            }}
+          >
+            {pageSizeOptions.map((size) => (
+              <option key={size} value={size}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DataTablePagination;