Skip to content

Commit

Permalink
remove like for not logged in
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaiNarayanan
JaiNarayanan committed Sep 5, 2024
1 parent a0bdaa6 commit 9186a07
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 165 deletions.
42 changes: 35 additions & 7 deletions components/DirectoryLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect, Fragment } from "react";
import { Tab } from "@headlessui/react";
import React, { useState, useEffect, Fragment, useMemo } from "react";
import { Tab, Combobox } from "@headlessui/react";
import { twMerge } from "tailwind-merge";
import { useQuery } from "react-query";
import supabase from "../utils/supabaseClient";
Expand All @@ -15,6 +15,8 @@ type LayoutProps = {

const DirectoryLayout = (props: LayoutProps) => {
const { title, description: directoryDescription, link: _ } = props;
const [projectSearchText, setProjectSearchText] = useState("");
const [selectedProjectCategory, setSelectedProjectCategory] = useState("");

const fetchStartups = async () => {
const { data } = await supabase
Expand Down Expand Up @@ -54,8 +56,23 @@ const DirectoryLayout = (props: LayoutProps) => {
cacheTime: Infinity,
});

const filteredProjects = useMemo(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
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 matchesCategory = selectedProjectCategory === "" || project.category === selectedProjectCategory;

return matchesName;
});
}, [projectsQuery.data, projectSearchText]);

return (
<div className="w-full p-4 md:p-16 flex gap-8 flex-col">
<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
Expand Down Expand Up @@ -97,7 +114,7 @@ const DirectoryLayout = (props: LayoutProps) => {
"ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none"
)}
>
<div className="w-full grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<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} />
Expand All @@ -106,10 +123,21 @@ const DirectoryLayout = (props: LayoutProps) => {
</div>
</Tab.Panel>
<Tab.Panel
className={twMerge("rounded-xl bg-white p-3", "focus:outline-none")}
className={twMerge("rounded-xl p-3", "focus:outline-none")}
>
<div className="w-full max-w-screen-2xl grid grid-cols-[repeat(auto-fill,minmax(270px,1fr))] gap-[36px]">
{projectsQuery.data?.map((project: Project) => (
<div className="flex flex-col mb-4">
<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 max-w-screen-2xl grid grid-cols-[repeat(auto-fill,minmax(270px,1fr))] gap-[36px]">
{filteredProjects?.map((project: Project) => (
<React.Fragment key={project.id}>
<ProjectTile project={project} key={project.id} />
</React.Fragment>
Expand Down
153 changes: 83 additions & 70 deletions components/projects/ProjectTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function ProjectTile({ project }: { project: Project }) {
// const [logo, setLogo] = useState<File | undefined>();
type Avatars = Record<string, string>;

const [avatars, setAvatars] = useState<Avatars>({});
// const [avatars, setAvatars] = useState<Avatars>({});
const [isFavorite, setIsFavorite] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -94,7 +94,8 @@ export default function ProjectTile({ project }: { project: Project }) {
const url = URL.createObjectURL(data as Blob);
urls[projectMember.id] = url;
}
setAvatars(urls); // Set the downloaded URLs in state
// eslint-disable-next-line consistent-return
return urls;
} catch (err) {
console.error("Error in downloadImages:", err);
}
Expand All @@ -121,7 +122,7 @@ export default function ProjectTile({ project }: { project: Project }) {
<div className="flex items-center justify-center">
<img
src={project.logo_url}
className="w-[400px] h-[250px] mt-auto rounded-lg rounded-b-sm object-fit object-center"
className="w-[400px] h-[250px] mt-auto rounded-lg rounded-b-sm object-cover object-center"
alt={`${name} logo`}
/>
</div>
Expand All @@ -148,14 +149,17 @@ export default function ProjectTile({ project }: { project: Project }) {
</div>
<div className="flex gap-2 items-center mt-2">
<div className="inline-flex">
{Object.entries(avatars).map(([key, value]: [string, string]) => {
console.log(key);
return (
<span className="avatar rounded-full relative border-[2px] border-[#F8F8F8] w-[30px] overflow-hidden">
<img className="w-full block" src={value} alt="temp" />
</span>
);
})}
{imagesQuery?.data &&
Object.entries(imagesQuery?.data).map(
([key, value]: [string, string]) => {
console.log(key);
return (
<span className="avatar rounded-full relative border-[2px] border-[#F8F8F8] w-[30px] overflow-hidden">
<img className="w-full block" src={value} alt="temp" />
</span>
);
}
)}
</div>
<h1 className="text-black font-md font-figtree font-semibold">
{project.name}
Expand All @@ -165,10 +169,16 @@ export default function ProjectTile({ project }: { project: Project }) {
onClick={toggleFavorite}
className="hover:scale-110 transition-transform duration-200 focus:outline-none ml-auto"
>
{isFavorite ? (
<HeartFilledIcon className="w-5 h-5 text-red-500" />
{user ? (
<>
{isFavorite ? (
<HeartFilledIcon className="w-5 h-5 text-red-500" />
) : (
<HeartOutlineIcon className="w-5 h-5 text-gray-500 stroke-[1.5px]" />
)}
</>
) : (
<HeartOutlineIcon className="w-5 h-5 text-gray-500 stroke-[1.5px]" />
""
)}
</button>
</div>
Expand Down Expand Up @@ -204,74 +214,77 @@ export default function ProjectTile({ project }: { project: Project }) {
>
<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">
<div className="flex gap-x-4 items-center">
<img
src={project.logo_url}
className="w-48 rounded-lg"
className="w-32 rounded-lg"
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>
<button
type="button"
onClick={toggleFavorite}
className="hover:scale-110 transition-transform duration-200 focus:outline-none"
>
<h1 className="text-3xl font-figtree font-bold text-gray-900">
{name}
</h1>
<button
type="button"
onClick={toggleFavorite}
className="ml-auto hover:scale-110 transition-transform duration-200 focus:outline-none"
>
{user ? (
<>
{isFavorite ? (
<HeartFilledIcon className="w-7 h-7 text-red-500" />
<HeartFilledIcon className="w-5 h-5 text-red-500" />
) : (
<HeartOutlineIcon className="w-7 h-7 text-gray-500 stroke-[1.5px]" />
<HeartOutlineIcon className="w-5 h-5 text-gray-500 stroke-[1.5px]" />
)}
</button>
</div>

<a
href={project.link}
target="_blank"
rel="noopener noreferrer"
className="flex flex-row items-center gap-1 text-gray-500"
>
<ExternalLinkIcon className=" inline-block h-5 w-5" />
<p className="inline-block underline">Website</p>
</a>
</div>
</>
) : (
""
)}
</button>
</div>
<div className="mt-2">
<p className="text-sm text-gray-500">{description}</p>
{/* <div className="flex">
<div className="flex flex-col gap-y-4">
<a
href={project.link}
target="_blank"
rel="noopener noreferrer"
className="flex flex-row items-center gap-1 text-gray-500"
>
<ExternalLinkIcon className=" inline-block h-5 w-5" />
<p className="inline-block underline">Website</p>
</a>
</div>
</div>
<div className="mt-2">
<p className="text-sm text-gray-500">{description}</p>
{/* <div className="flex">
{project.categories?.map((category) => (
<p className="text-sm my-2 mr-1 px-2 bg-slate-300 rounded-xl">{category}</p>
))}
</div> */}
</div>
<div className="flex flex-col">
<span className="text-primary font-medium text-lg mb-2">
People
</span>
<div className="flex gap-2">
<div className="flex flex-col gap-2 justify-between">
{project.profiles?.map((profile, i) => (
<div className="flex gap-2 items-center">
<img
className="w-8 h-8 rounded-full"
src={avatars[profile.id]}
alt={`${profile.name} avatar`}
/>
<h1 className="text-sm font-medium">
{profile.name}
</h1>
</div>
))}
<button
type="button"
className="px-6 py-2 bg-black text-white hover:bg-black/80 rounded-md mt-2"
>
Connect
</button>
</div>
</div>
<div className="flex flex-col">
<span className="text-primary font-medium text-lg mb-2">
People
</span>
<div className="flex gap-2">
<div className="flex flex-col gap-2 justify-between">
{project.profiles?.map((profile, i) => (
<div className="flex gap-2 items-center">
<img
className="w-8 h-8 rounded-full"
src={imagesQuery?.data?.[profile.id]}
alt={`${profile.name} avatar`}
/>
<h1 className="text-sm font-medium">
{profile.name}
</h1>
</div>
))}
<button
type="button"
className="px-6 py-2 bg-black text-white hover:bg-black/80 rounded-md mt-2"
>
Connect
</button>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 9186a07

Please sign in to comment.