Skip to content

Commit

Permalink
add more data
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaiNarayanan
JaiNarayanan committed Sep 6, 2024
1 parent 7948ddd commit ad6844a
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 122 deletions.
30 changes: 22 additions & 8 deletions components/DirectoryLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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 }) =>
Expand Down Expand Up @@ -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>
Expand Down
71 changes: 17 additions & 54 deletions components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
}, []);
Expand Down Expand Up @@ -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">
Expand All @@ -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" : ""}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
78 changes: 18 additions & 60 deletions components/startups/StartupTile.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);

Expand Down Expand Up @@ -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);
Expand All @@ -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",
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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"
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit ad6844a

Please sign in to comment.