From ad6844a39c3c5635d60bb073090cdd2e3924c54f Mon Sep 17 00:00:00 2001
From: jainarayanan <jainaraya@gmail.com>
Date: Fri, 6 Sep 2024 10:36:49 -0700
Subject: [PATCH] add more data

---
 components/DirectoryLayout.tsx      | 30 ++++++++---
 components/NavBar.tsx               | 71 +++++++-------------------
 components/startups/StartupTile.tsx | 78 +++++++----------------------
 3 files changed, 57 insertions(+), 122 deletions(-)

diff --git a/components/DirectoryLayout.tsx b/components/DirectoryLayout.tsx
index eadb34e..20c38ae 100644
--- a/components/DirectoryLayout.tsx
+++ b/components/DirectoryLayout.tsx
@@ -61,9 +61,7 @@ const DirectoryLayout = (props: LayoutProps) => {
     if (!projectsQuery.data) return [];
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return projectsQuery.data.filter((project: Project) => {
-      const matchesName = project.name
-        .toLowerCase()
-        .includes(projectSearchText.toLowerCase());
+      const matchesName = project.name.toLowerCase().includes(projectSearchText.toLowerCase());
 
       // const matchesCategory = selectedProjectCategory === "" || project.category === selectedProjectCategory;
 
@@ -74,11 +72,27 @@ const DirectoryLayout = (props: LayoutProps) => {
   return (
     <div className="w-full p-4 md:p-16 flex gap-8 flex-col bg-gray-50">
       <div className="max-w-screen-2xl relative w-full">
-        <h1 className="text-5xl font-figtree font-sans font-semibold">
-          The Directory
-        </h1>
+        <h1 className="text-5xl font-figtree font-sans font-semibold">The Directory</h1>
       </div>
-      <Tab.Group>
+      <div className="flex flex-col">
+        <label htmlFor="name">Name</label>
+        <input
+          name="name"
+          type="text"
+          placeholder="Search by name"
+          value={projectSearchText}
+          onChange={(e) => setProjectSearchText(e.target.value)}
+          className="flex h-10 w-64 rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground"
+        />
+      </div>
+      <div className="bg-gray-50 w-full grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+        {startupsQuery.data?.map((startup: Startup) => (
+          <React.Fragment key={startup.id}>
+            <StartupTile startup={startup} key={startup.id} />
+          </React.Fragment>
+        ))}
+      </div>
+      {/* <Tab.Group>
         <Tab.List className="max-w-md flex space-x-1 rounded-xl bg-blue-900/20 p-1">
           <Tab
             className={({ selected }) =>
@@ -145,7 +159,7 @@ const DirectoryLayout = (props: LayoutProps) => {
             </div>
           </Tab.Panel>
         </Tab.Panels>
-      </Tab.Group>
+      </Tab.Group> */}
 
       <div className="w-full max-w-screen-2xl mt-8 gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-4" />
     </div>
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 8c6f9e4..75ec9c4 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -32,11 +32,11 @@ const NAVIGATION = [
     href: "/events",
     right: false,
   },
-  // {
-  //   name: "Startups",
-  //   href: "/startups",
-  //   right: false,
-  // },
+  {
+    name: "Community Projects",
+    href: "/startups",
+    right: false,
+  },
   {
     name: "Dashboard",
     href: "/dashboard",
@@ -74,15 +74,8 @@ const NAVIGATION = [
 // }
 
 const ProfilePic = ({ user, username }: { user: User; username: string }) => {
-  const {
-    file: avatar,
-    loading,
-    error,
-  } = useSupabaseDownload("avatars", user.id, `${username} avatar`);
-  const avatarUrl = useMemo(
-    () => avatar && URL.createObjectURL(avatar),
-    [avatar]
-  );
+  const { file: avatar, loading, error } = useSupabaseDownload("avatars", user.id, `${username} avatar`);
+  const avatarUrl = useMemo(() => avatar && URL.createObjectURL(avatar), [avatar]);
   if (loading || error || !avatarUrl) {
     return null;
   }
@@ -101,10 +94,7 @@ export default function NavbarBuilder() {
   const [inSafari, setInSafari] = useState<boolean>(false);
 
   useEffect(() => {
-    if (
-      navigator.userAgent.includes("Safari") &&
-      !navigator.userAgent.includes("Chrome")
-    ) {
+    if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
       setInSafari(true);
     }
   }, []);
@@ -134,15 +124,8 @@ export default function NavbarBuilder() {
                 </Disclosure.Button>
               </div>
               <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <InternalLink
-                  href="/"
-                  className="flex-shrink-0 w-5 hover:cursor-pointer hover:opacity-75"
-                >
-                  <img
-                    src="/v1logowhite.svg"
-                    alt="V1 logo"
-                    className="h-full"
-                  />
+                <InternalLink href="/" className="flex-shrink-0 w-5 hover:cursor-pointer hover:opacity-75">
+                  <img src="/v1logowhite.svg" alt="V1 logo" className="h-full" />
                 </InternalLink>
                 <div className="hidden sm:block sm:ml-6 w-full">
                   <div className="flex flex-row gap-x-4 w-full items-center">
@@ -157,11 +140,7 @@ export default function NavbarBuilder() {
                         }
                           px-3 py-2 rounded-md text-sm font-medium ${
                             // eslint-disable-next-line no-nested-ternary, prettier/prettier
-                            inSafari
-                              ? !user
-                                ? "relative top-nav-nouser"
-                                : "relative top-nav-user"
-                              : ""
+                            inSafari ? (!user ? "relative top-nav-nouser" : "relative top-nav-user") : ""
                           }
                           ${item?.login && !user ? "hidden" : ""} 
                           ${item?.noauth && user ? "hidden" : ""}
@@ -170,26 +149,14 @@ export default function NavbarBuilder() {
                             item?.signup
                               ? "bg-gradient-to-r from-yellow-600 to-yellow-700 hover:bg-blue-500 hover:opacity-75 !text-gray-100"
                               : ""
-                          }  ${
-                          item?.minRank && rank !== null && rank < item.minRank
-                            ? "hidden"
-                            : ""
-                        }`}
-                        aria-current={
-                          router.pathname === item.href ? "page" : undefined
-                        }
-                        style={
-                          item.right
-                            ? { marginLeft: "auto", marginRight: "0" }
-                            : {}
-                        }
+                          }  ${item?.minRank && rank !== null && rank < item.minRank ? "hidden" : ""}`}
+                        aria-current={router.pathname === item.href ? "page" : undefined}
+                        style={item.right ? { marginLeft: "auto", marginRight: "0" } : {}}
                       >
                         {item.name} {item?.signup && <>&rsaquo;</>}
                       </InternalLink>
                     ))}
-                    {user && username && (
-                      <ProfilePic user={user} username={username} />
-                    )}
+                    {user && username && <ProfilePic user={user} username={username} />}
                   </div>
                 </div>
               </div>
@@ -208,13 +175,9 @@ export default function NavbarBuilder() {
                       : "text-gray-300 hover:bg-gray-700 hover:text-white"
                   }
                     block px-3 py-2 rounded-md text-base font-medium ${
-                      item?.minRank && rank !== null && rank < item.minRank
-                        ? "hidden"
-                        : ""
+                      item?.minRank && rank !== null && rank < item.minRank ? "hidden" : ""
                     }`}
-                  aria-current={
-                    router.pathname === item.href ? "page" : undefined
-                  }
+                  aria-current={router.pathname === item.href ? "page" : undefined}
                 >
                   {item.name}
                 </InternalLink>
diff --git a/components/startups/StartupTile.tsx b/components/startups/StartupTile.tsx
index bd798e3..3f46fa3 100644
--- a/components/startups/StartupTile.tsx
+++ b/components/startups/StartupTile.tsx
@@ -1,11 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { Fragment, useState, useEffect } from "react";
-import {
-  InformationCircleIcon,
-  ExternalLinkIcon,
-  HeartIcon as HeartOutlineIcon,
-} from "@heroicons/react/outline";
+import { InformationCircleIcon, ExternalLinkIcon, HeartIcon as HeartOutlineIcon } from "@heroicons/react/outline";
 import { HeartIcon as HeartFilledIcon } from "@heroicons/react/solid";
 import { Dialog, Transition } from "@headlessui/react";
 import useSupabase from "../../hooks/useSupabase";
@@ -18,15 +14,7 @@ interface Favorite {
 }
 
 export default function StartupTile({ startup }: { startup: Startup }) {
-  const {
-    name,
-    description,
-    logo,
-    website,
-    industries,
-    profiles,
-    startups_members: profileMetadata,
-  } = startup;
+  const { name, description, logo, website, industries, profiles, startups_members: profileMetadata } = startup;
   const [dialogOpen, setDialogOpen] = useState(false);
   const [isFavorite, setIsFavorite] = useState(false);
 
@@ -57,19 +45,13 @@ export default function StartupTile({ startup }: { startup: Startup }) {
     }
 
     if (isFavorite) {
-      const { error } = await supabase
-        .from("favorites")
-        .delete()
-        .eq("user_id", user.id)
-        .eq("startup_id", startup.id);
+      const { error } = await supabase.from("favorites").delete().eq("user_id", user.id).eq("startup_id", startup.id);
 
       if (!error) {
         setIsFavorite(false);
       }
     } else {
-      const { error } = await supabase
-        .from("favorites")
-        .insert([{ user_id: user.id, startup_id: startup.id }]);
+      const { error } = await supabase.from("favorites").insert([{ user_id: user.id, startup_id: startup.id }]);
 
       if (!error) {
         setIsFavorite(true);
@@ -80,24 +62,19 @@ export default function StartupTile({ startup }: { startup: Startup }) {
   return (
     <>
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-      <li
-        onClick={() => setDialogOpen(true)}
-        className="m-0 p-0 list-none rounded-md"
-      >
-        <div className="border border-0.5 relative h-0 pb-[75%] overflow-hidden rounded-md group">
+      <li onClick={() => setDialogOpen(true)} className="m-0 p-0 list-none rounded-md">
+        <div className="bg-white border border-0.5 relative h-0 pb-[75%] overflow-hidden rounded-md group">
           <div className="flex items-center justify-center">
             <img
               src={logo}
-              className="w-[400px] h-[250px] mt-auto rounded-lg rounded-b-sm object-cover object-center"
+              className="w-[400px] h-[250px] mt-auto rounded-lg rounded-b-sm object-contain "
               alt={`${name} logo`}
             />
           </div>
-          <div className="flex z-[2] items-end p-[20px] rounded-md absolute bg-gradient-to-b from-transparent to-gray-50/10 hover:to-black/80 hover:opacity-1 top-0 bottom-0 left-0 right-0">
+          <div className="flex z-[2] items-end p-[20px] rounded-md absolute bg-gradient-to-b from-transparent to-gray-50/10 hover:bg-black/80 hover:opacity-1 top-0 bottom-0 left-0 right-0">
             <div className="opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-1 items-center justify-between min-w-0">
               <div>
-                <h1 className="font-figtree text-white text-md font-semibold font-sans overflow-hidden">
-                  {name}
-                </h1>
+                <h1 className="font-figtree text-white text-md font-semibold font-sans overflow-hidden">{name}</h1>
                 <h3
                   style={{
                     overflow: "hidden",
@@ -111,9 +88,9 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                 </h3>
 
                 <div className="flex gap-1">
-                  {industries.map((industry) => (
+                  {industries?.map((industry) => (
                     <span className="">
-                      <p className="text-sm my-1 w-fit px-2 bg-slate-300 rounded-xl">
+                      <p className="text-xs my-1 w-fit font-figtree font-semibold px-2 bg-slate-300 rounded">
                         {industry}
                       </p>
                     </span>
@@ -125,9 +102,7 @@ export default function StartupTile({ startup }: { startup: Startup }) {
         </div>
         <div className="flex flex-col gap-2 mt-2">
           <div className="inline-flex" />
-          <h1 className="text-black font-md font-figtree font-semibold">
-            {name}
-          </h1>
+          <h1 className="text-black font-xl font-outfit font-medium">{name}</h1>
           <button
             type="button"
             onClick={toggleFavorite}
@@ -148,11 +123,7 @@ export default function StartupTile({ startup }: { startup: Startup }) {
         </div>
       </li>
       <Transition appear show={dialogOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-10"
-          onClose={() => setDialogOpen(false)}
-        >
+        <Dialog as="div" className="relative z-10" onClose={() => setDialogOpen(false)}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -179,16 +150,10 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                 <Dialog.Panel className="w-full max-w-xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <div className="relative flex flex-col gap-y-4">
                     <div className="flex gap-x-8">
-                      <img
-                        src={logo}
-                        className="w-48 rounded-lg"
-                        alt={`${name} logo`}
-                      />
+                      <img src={logo} className="w-48 rounded-lg object-contain" alt={`${name} logo`} />
                       <div className="flex flex-col gap-y-4">
                         <div className="flex gap-3">
-                          <h1 className="text-4xl font-bold text-gray-900">
-                            {name}
-                          </h1>
+                          <h1 className="text-4xl font-bold text-gray-900">{name}</h1>
                           <button
                             type="button"
                             onClick={toggleFavorite}
@@ -223,22 +188,15 @@ export default function StartupTile({ startup }: { startup: Startup }) {
                       <p className="text-sm text-gray-500">{description}</p>
                       <div className="flex">
                         {industries?.map((industry) => (
-                          <p className="text-sm my-2 mr-1 px-2 bg-slate-300 rounded-xl">
-                            {industry}
-                          </p>
+                          <p className="text-sm my-2 mr-1 px-2 bg-slate-300 rounded-xl">{industry}</p>
                         ))}
                       </div>
                     </div>
                     <div className="flex flex-col">
-                      <span className="text-primary font-medium text-lg mb-2">
-                        People
-                      </span>
+                      <span className="text-primary font-medium text-lg mb-2">People</span>
                       <div className="grid grid-cols-4 justify-between">
                         {profiles?.map((profile, i) => (
-                          <StartupProfileTile
-                            startupProfile={profile}
-                            startupProfileMetadata={profileMetadata[i]}
-                          />
+                          <StartupProfileTile startupProfile={profile} startupProfileMetadata={profileMetadata[i]} />
                         ))}
                       </div>
                     </div>