feat: begin creating Role Review Cards (#50)

* feat: begin creating Role Review Cards * feat: assembled Role Page Made role review cards update based on db, put together components for roles page, made search bar slightly more responsive, updated header logo sizing, edited logo font per design * feat: create header layout component to standardize header placement * fix: removed async from exports (not needed) * fix: made search filter (whole bar) more responsive" * fix: edit roles/page to prevent tRPC error.t3-oss/create-t3-app#1599 * docs: add TODO and FIXME tags * refactor: implemented changes suggested in PR. Started to work on style changes for header
sandboxnu · Mar 31, 2024 · 55a7d93 · 55a7d93
1 parent 3019fbe
commit 55a7d93
Show file tree

Hide file tree

Showing 28 changed files with 507 additions and 101 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/fonts/AltivoMedium.otf b/public/fonts/AltivoMedium.otf
diff --git a/public/fonts/AltivoRegular.otf b/public/fonts/AltivoRegular.otf
diff --git a/src/app/fonts/BentonSansBold.otf → public/fonts/BentonSansBold.otf b/src/app/fonts/BentonSansBold.otf → public/fonts/BentonSansBold.otf
diff --git a/src/app/fonts/BentonSansBook.otf → public/fonts/BentonSansBook.otf b/src/app/fonts/BentonSansBook.otf → public/fonts/BentonSansBook.otf
diff --git a/src/app/fonts/BentonSansMedium.otf → public/fonts/BentonSansMedium.otf b/src/app/fonts/BentonSansMedium.otf → public/fonts/BentonSansMedium.otf
diff --git a/src/app/fonts/BentonSansRegular.otf → public/fonts/BentonSansRegular.otf b/src/app/fonts/BentonSansRegular.otf → public/fonts/BentonSansRegular.otf
diff --git a/public/svg/hidingLogo.svg b/public/svg/hidingLogo.svg
diff --git a/public/svg/logo.svg b/public/svg/logo.svg
diff --git a/src/app/companies/page.tsx b/src/app/companies/page.tsx
@@ -1,14 +1,12 @@
-import Header from "~/components/header";
+import HeaderLayout from "~/components/header-layout";
 import SearchFilter from "~/components/search-filter";
 
 export default async function Companies() {
   return (
     <div className="flex h-full flex-col">
-      <Header />
-
-      <div className="mx-12 mt-16 flex flex-col">
+      <HeaderLayout>
         <SearchFilter />
-      </div>
+      </HeaderLayout>
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,34 +2,7 @@ import "~/styles/globals.css";
 import { TRPCReactProvider } from "~/trpc/react";
 import { Toaster } from "~/components/ui/sonner";
 import { cn } from "~/lib/utils";
-
-import localFont from "next/font/local";
-
-// Font files can be colocated inside of `pages`
-const myFont = localFont({
-  src: [
-    {
-      path: "./fonts/BentonSansBook.otf",
-      weight: "300",
-      style: "normal",
-    },
-    {
-      path: "./fonts/BentonSansRegular.otf",
-      weight: "500",
-      style: "normal",
-    },
-    {
-      path: "./fonts/BentonSansMedium.otf",
-      weight: "700",
-      style: "normal",
-    },
-    {
-      path: "./fonts/BentonSansBold.otf",
-      weight: "900",
-      style: "normal",
-    },
-  ],
-});
+import { bentonSansFont } from "~/styles/font";
 
 export const metadata = {
   title: "Cooper",
@@ -43,13 +16,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={cn(
-          "min-h-screen bg-background font-sans antialiased",
-          myFont.className,
-        )}
-      >
+    <html
+      className={bentonSansFont.variable}
+      lang="en"
+      suppressHydrationWarning
+    >
+      <body className={cn("min-h-screen bg-white font-sans antialiased")}>
         <TRPCReactProvider>{children}</TRPCReactProvider>
         <Toaster />
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,16 +1,17 @@
-import Header from "~/components/header";
+import HeaderLayout from "~/components/header-layout";
 import SearchFilter from "~/components/search-filter";
 
 export default async function Home() {
   return (
     <div className="flex h-[85vh] flex-col">
-      <Header />
-      <div className="flex h-full flex-col items-center justify-center">
-        <p className="mb-8 text-2xl font-semibold">
-          Search your dream co-op role!
-        </p>
-        <SearchFilter />
-      </div>
+      <HeaderLayout>
+        <div className="flex h-full flex-col items-center justify-center">
+          <p className="mb-8 text-2xl font-semibold">
+            Search your dream co-op role!
+          </p>
+          <SearchFilter />
+        </div>
+      </HeaderLayout>
     </div>
   );
 }
diff --git a/src/app/roles/page.tsx b/src/app/roles/page.tsx
@@ -0,0 +1,30 @@
+import HeaderLayout from "~/components/header-layout";
+import { RoleReviewCard } from "~/components/role-review-card";
+import SearchFilter from "~/components/search-filter";
+import { api } from "~/trpc/server";
+import { unstable_noStore as noStore } from "next/cache";
+
+export default async function Roles() {
+  /**
+   * FIXME: This is a temporary fix, figure out how to get build command working without noStore();
+   * @returns A promise containing the roles from the database
+   */
+  async function getRoles() {
+    noStore();
+    const roles = await api.role.list.query();
+    return roles;
+  }
+
+  const roles = await getRoles();
+
+  return (
+    <HeaderLayout>
+      <SearchFilter />
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {roles.map((role) => {
+          return <RoleReviewCard key={role.id} roleObj={role} />;
+        })}
+      </div>
+    </HeaderLayout>
+  );
+}
diff --git a/src/components/header-layout.tsx b/src/components/header-layout.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import Header from "~/components/header";
+
+/**
+ * This should be used when placing content under the header, standardizes how children are placed under a header.
+ * @param param0 Children to pass into the layout
+ * @returns A layout component that standardizes the distance from the header
+ */
+export default function HeaderLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <article className="mt-16 flex flex-col items-center justify-center">
+        {children}
+      </article>
+    </div>
+  );
+}