completed project

joelbyrd · Nov 30, 2024 · 77e04eb · 77e04eb
1 parent 4512b5c
commit 77e04eb
Show file tree

Hide file tree

Showing 22 changed files with 595 additions and 253 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -20,12 +20,12 @@ jobs:
         run: npm run build
 
       - name: Deploy to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@v4
+        uses: peaceiris/actions-gh-pages@v3
         with:
-          branch: gh-pages # The branch to deploy to
-          folder: dist # The folder to deploy
-          token: ${{ secrets.ACCESS_TOKEN }} # Use your personal access token here
-        #uses: peaceiris/actions-gh-pages@v3
+          personal_token: ${{ secrets.ACCESS_TOKEN }} # Use the PAT here
+          publish_dir: ./dist
+        #uses: JamesIves/github-pages-deploy-action@v4
         #with:
-        #personal_token: ${{ secrets.ACCESS_TOKEN }} # Use the PAT here
-        #publish_dir: ./dist
+        #branch: gh-pages # The branch to deploy to
+        #folder: dist     # The folder to deploy
+        #token: ${{ secrets.ACCESS_TOKEN }} # Use your personal access token here
diff --git a/index.html b/index.html
@@ -3,8 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- displays site properly based on user's device -->
 
+    <!-- Fonts -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Favicon -->
     <link
       rel="icon"
       type="image/png"
@@ -13,20 +19,9 @@
     />
 
     <title>Frontend Mentor | Job Listings</title>
-
-    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-    <style>
-      .attribution {
-        font-size: 11px;
-        text-align: center;
-      }
-      .attribution a {
-        color: hsl(228, 45%, 44%);
-      }
-    </style>
   </head>
-  <body>
-    <div id="root"></div>
+  <body class="bg-teal-light">
+    <div id="root" class="h-screen"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
@@ -27,6 +28,7 @@
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.3"
   }
 }
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,52 +1,39 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import { JobsProvider } from "@context/JobsProvider";
+import JobFilters from "@components/app/JobFilters/JobFilters";
+import JobListings from "@components/app/JobListings/JobListings";
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 100)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-
-      <h2 className="text-3xl font-bold underline">Hello, world!</h2>
-      <div className="flex gap-3">
-        <div className="bg-teal w-20 h-20">Teal</div>
-        <div className="bg-teal-light w-20 h-20">Teal Light</div>
-        <div className="bg-gray-light w-20 h-20">Gray Light</div>
-        <div className="bg-gray w-20 h-20">Gray</div>
-        <div className="bg-gray-dark w-20 h-20">Gray Dark</div>
-      </div>
+    <JobsProvider>
+      <div className="min-h-screen flex flex-col">
+        <header className="w-full bg-teal bg-header-mobile md:bg-header-desktop bg-cover bg-no-repeat bg-center h-32 flex items-center">
+          <div className="container">
+            <h1 className="px-6 text-4xl font-bold leading-tight">
+              Job Listings
+            </h1>
+          </div>
+        </header>
+        <main className="flex-1 container px-4 relative">
+          <JobFilters />
+          <JobListings />
+        </main>
 
-      {/* Frontend Mentor attribution: */}
-      <div className="attribution">
-        Challenge by{" "}
-        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
-          Frontend Mentor
-        </a>
-        . Coded by Joel Byrd.
+        {/* Frontend Mentor attribution: */}
+        <footer className="container py-2">
+          <div className="text-center text-xs">
+            Challenge by{" "}
+            <a
+              href="https://www.frontendmentor.io?ref=challenge"
+              target="_blank"
+              className="text-link"
+            >
+              Frontend Mentor
+            </a>
+            . Coded by Joel Byrd.
+          </div>
+        </footer>
       </div>
-    </>
+    </JobsProvider>
   );
 }
 

diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/app/JobFilters/JobFilters.tsx b/src/components/app/JobFilters/JobFilters.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useJobs } from "@hooks/useJobs";
+import RemovableFilter from "@components/ui/Pill/RemovableFilter";
+
+const JobFilters: React.FC = () => {
+  const { filters, removeFilter, clearFilters } = useJobs();
+
+  return (
+    <>
+      {filters.length > 0 && (
+        <div className="flex items-center justify-between px-6 py-4 bg-white shadow-lg rounded -translate-y-6 gap-1">
+          {/* Filter pills */}
+          <ul className="flex flex-wrap gap-3">
+            {filters.map((filter) => (
+              <RemovableFilter
+                key={`${filter.type}-${filter.value}`}
+                onRemove={() => removeFilter(filter)}
+              >
+                {filter.value}
+              </RemovableFilter>
+            ))}
+          </ul>
+
+          {/* Clear link */}
+          <div>
+            <button onClick={clearFilters} className="text-link font-bold">
+              Clear
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default JobFilters;