[78] Footer and Scrolling (#79)

* Footer and Jobs Page * Footer Fix (Companies)
sandboxnu · Oct 4, 2024 · fdeac8f · fdeac8f
1 parent efc0e1f
commit fdeac8f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx b/apps/web/src/app/(pages)/(dashboard)/companies/page.tsx
@@ -20,7 +20,7 @@ export default async function Companies() {
   return (
     <>
       <SearchFilter />
-      <div className="grid w-3/4 grid-cols-3 gap-4">
+      <div className="grid h-[75dvh] w-3/4 grid-cols-3 gap-4">
         {roles.map((role) => {
           return (
             <RoleReviewCard key={role.id} roleObj={role} className="mb-4" />

diff --git a/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx b/apps/web/src/app/(pages)/(dashboard)/roles/page.tsx
@@ -22,20 +22,26 @@ export default function Roles() {
       <SearchFilter />
       {/* TODO: Loading animations */}
       {reviews.data && (
-        <div className="mb-8 grid w-4/5 grid-cols-5 gap-4 lg:w-3/4">
-          <div className="col-span-2 gap-3">
-            {reviews.data.map((review) => {
+        <div className="mb-8 grid h-[75dvh] w-4/5 grid-cols-5 gap-4 lg:w-3/4">
+          <div className="col-span-2 gap-3 overflow-scroll pr-4">
+            {reviews.data.map((review, i) => {
               return (
                 <div key={review.id} onClick={() => setSelectedReview(review)}>
                   <ReviewCardPreview
                     reviewObj={review}
-                    className={cn("mb-4 hover:border-2")}
+                    className={cn(
+                      "mb-4 hover:border-2",
+                      selectedReview
+                        ? selectedReview.id === review.id &&
+                            "border-2 bg-cooper-gray-100"
+                        : !i && "border-2 bg-cooper-gray-100",
+                    )}
                   />
                 </div>
               );
             })}
           </div>
-          <div className="col-span-3">
+          <div className="col-span-3 overflow-scroll">
             {reviews.data.length > 0 && reviews.data[0] && (
               <ReviewCard reviewObj={selectedReview ?? reviews.data[0]} />
             )}

diff --git a/apps/web/src/app/_components/footer.tsx b/apps/web/src/app/_components/footer.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer className="flex h-20 w-full grid-cols-2 items-center justify-between border-t border-t-[#919191] bg-white px-4">
+      <Link
+        href="https://github.com/sandboxnu/cooper"
+        target="_blank"
+        className="flex items-center gap-2"
+      >
+        <Image
+          src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"
+          height={20}
+          width={20}
+          alt="Github Logo"
+          className="mt-[-0.25rem]"
+        />
+        <h2 className="text-xl font-semibold">Checkout cooper on GitHub</h2>
+      </Link>
+      <a href="https://clearbit.com" target="_blank" className="italic">
+        Logos provided by Clearbit
+      </a>
+    </footer>
+  );
+}
diff --git a/apps/web/src/app/_components/header-layout.tsx b/apps/web/src/app/_components/header-layout.tsx
@@ -5,6 +5,7 @@ import { auth } from "@cooper/auth";
 import Header from "~/app/_components/header";
 import LoginButton from "./auth/login-button";
 import LogoutButton from "./auth/logout-button";
+import Footer from "./footer";
 
 /**
  * This should be used when placing content under the header, standardizes how children are placed under a header.
@@ -25,6 +26,7 @@ export default async function HeaderLayout({
       <article className="mt-16 flex w-[100vw] flex-col items-center justify-center gap-16">
         {children}
       </article>
+      <Footer />
     </div>
   );
 }