Home / Search page

src/app/(protected)/review/page.tsx

@@ -10,11 +10,5 @@ export default async function Page() {
     redirect("/");
   }
 
-  return (
-    <div className="container mx-auto px-4 py-10 sm:px-6 lg:px-8">
-      <div className="mx-auto max-w-lg">
-        <ReviewForm />
-      </div>
-    </div>
-  );
+  return <ReviewForm />;
 }

src/app/page.tsx

@@ -1,50 +1,19 @@
+import Header from "~/components/header";
+import SearchFilter from "~/components/search-filter";
 import { getServerAuthSession } from "~/server/auth";
 
 export default async function Home() {
   const session = await getServerAuthSession();
 
-  if (!session) {
-    return (
-      <div className="flex h-screen flex-col items-center justify-center space-y-4">
-        <p className="text-3xl font-semibold text-red-500">
-          You are not signed in!
+  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>
-        <a
-          href="/api/auth/signin/google"
-          type="button"
-          className="mb-2 me-2 inline-flex items-center rounded-lg bg-[#4285F4] px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-[#4285F4]/90 focus:outline-none focus:ring-4 focus:ring-[#4285F4]/50 dark:focus:ring-[#4285F4]/55"
-        >
-          <svg
-            className="me-2 h-4 w-4"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 18 19"
-          >
-            <path
-              fillRule="evenodd"
-              d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z"
-              clipRule="evenodd"
-            />
-          </svg>
-          Sign in with Google
-        </a>
+        <SearchFilter />
       </div>
-    );
-  }
-
-  return (
-    <div className="flex h-screen flex-col items-center justify-center space-y-4">
-      <p className="text-3xl font-semibold text-emerald-500">
-        Welcome, {session.user.name}!
-      </p>
-      <a
-        href="/api/auth/signout"
-        type="button"
-        className="mb-2 me-2 rounded-lg bg-red-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
-      >
-        Sign Out
-      </a>
     </div>
   );
 }

src/components/header.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+import LoginButton from "./login-button";
+import LogoutButton from "./logout-button";
+
+export default async function Header() {
+  return (
+    <header className="flex h-16 w-full items-center justify-between border border-blue-500 bg-cooper-blue-400 p-4">
+      <h1 className="text-3xl font-extrabold text-white">COOPER</h1>
+      <LoginButton />
+      <LogoutButton />
+      <div className="mt-2">
+        <Image
+          src="/svg/logo.svg"
+          width={100}
+          height={100}
+          alt="Logo Picture"
+        />
+      </div>
+    </header>
+  );
+}

src/components/login-button.tsx

@@ -0,0 +1,32 @@
+import { getServerAuthSession } from "~/server/auth";
+
+export default async function LoginButton() {
+  const session = await getServerAuthSession();
+
+  if (!session) {
+    return (
+      <a
+        href="/api/auth/signin/google"
+        type="button"
+        className="inline-flex items-center rounded-lg bg-[#4285F4] px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-[#4285F4]/90 focus:outline-none focus:ring-4 focus:ring-[#4285F4]/50 dark:focus:ring-[#4285F4]/55"
+      >
+        <svg
+          className="me-2 h-4 w-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 18 19"
+        >
+          <path
+            fillRule="evenodd"
+            d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z"
+            clipRule="evenodd"
+          />
+        </svg>
+        Sign in with Google
+      </a>
+    );
+  }
+
+  return <></>;
+}

src/components/logout-button.tsx

@@ -0,0 +1,19 @@
+import { getServerAuthSession } from "~/server/auth";
+
+export default async function LogoutButton() {
+  const session = await getServerAuthSession();
+
+  if (session) {
+    return (
+      <a
+        href="/api/auth/signout"
+        type="button"
+        className="rounded-lg bg-red-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+      >
+        Sign Out
+      </a>
+    );
+  }
+
+  return <></>;
+}

src/components/review-form.tsx

@@ -152,28 +152,43 @@ export function ReviewForm() {
     console.log(values);
   }
 
+  // Header Data
+  // going to fix the below TODO useMemo
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const headerSections: { title: string; bound: number }[] = [
+    { title: "Co-op Cycle", bound: 400 },
+    { title: "Ratings", bound: 800 },
+    { title: "Review", bound: 1200 },
+    { title: "Company Details", bound: 1600 },
+    { title: "Submit", bound: 10000000 },
+  ];
+
   function onReset() {
     form.reset();
   }
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        onReset={onReset}
-        className="space-y-6"
-      >
-        <CoopCycleSection />
-        <RatingsSection />
-        <ReviewSection />
-        <CompanyDetailsSection />
-        <div className="flex justify-end space-x-2">
-          <Button variant="secondary" type="reset">
-            Clear form
-          </Button>
-          <Button type="submit">Submit</Button>
-        </div>
-      </form>
-    </Form>
+    <div className="mx-auto px-4 pt-10 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-lg">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            onReset={onReset}
+            className="space-y-6"
+          >
+            <CoopCycleSection />
+            <RatingsSection />
+            <ReviewSection />
+            <CompanyDetailsSection />
+            <div className="flex justify-end space-x-2">
+              <Button variant="secondary" type="reset">
+                Clear form
+              </Button>
+              <Button type="submit">Submit</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
   );
 }

src/components/search-bar.tsx

@@ -0,0 +1,43 @@
+import { useFormContext } from "react-hook-form";
+import { FormControl, FormField, FormItem } from "./ui/form";
+import { Input } from "./ui/input";
+
+export function SearchBar() {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name="searchText"
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>
+            <div className="relative w-80">
+              {/* SEARCH TEXT INPUT */}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="absolute bottom-0 left-3 top-0 my-auto h-6 w-6 text-gray-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+
+              <Input
+                {...field}
+                className="min-w-96 rounded-3xl border-none bg-cooper-blue-200 pl-12"
+                placeholder="Search"
+              />
+            </div>
+          </FormControl>
+        </FormItem>
+      )}
+    />
+  );
+}