Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import supabase from "../utils/supabaseClient"; | ||
| import StartupTile from "./startups/StartupTile"; | ||
| import { Startup } from "../utils/types"; | ||
|
|
||
| type LayoutProps = { | ||
| title: string; | ||
| description: string; | ||
| link: string; | ||
| }; | ||
|
|
||
| const DirectoryLayout = (props: LayoutProps) => { | ||
| const { title, description: directoryDescription, link } = props; | ||
|
|
||
| const [startups, setStartups] = useState<Startup[] | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const fetchStartups = async () => { | ||
| const { data } = await supabase.from("startups").select(); | ||
| setStartups(data); | ||
| }; | ||
| fetchStartups(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="w-full p-4 md:p-8 flex flex-col items-center bg-gray-50"> | ||
| <div className="max-w-screen-2xl relative w-full"> | ||
| <div className=" flex flex-col items-center max-w-screen-2xl w-full static"> | ||
| <div className="w-full rounded-2xl p-16 bg-[url('/landing.jpg')]"> | ||
| <h1 className="font-bold text-white text-3xl mb-6">{title}</h1> | ||
| <h3 className="font-regular text-white text-2xl mb-9"> | ||
| {directoryDescription} | ||
| </h3> | ||
| {/* <a href={link} target="_blank" rel="noreferrer"> | ||
| <p className="underline text-white hover:text-slate-500"> | ||
| {" "} | ||
| Register a Startup{" "} | ||
| </p> | ||
| </a> */} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="w-full max-w-screen-2xl mt-8 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-4"> | ||
| {startups?.map((startup) => ( | ||
| <StartupTile startup={startup} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DirectoryLayout; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| /* eslint-disable jsx-a11y/no-static-element-interactions */ | ||
| /* eslint-disable jsx-a11y/click-events-have-key-events */ | ||
| import React, { Fragment, useState } from "react"; | ||
| import { | ||
| InformationCircleIcon, | ||
| ExternalLinkIcon, | ||
| } from "@heroicons/react/outline"; | ||
| import { Dialog, Transition } from "@headlessui/react"; | ||
| import { Startup } from "../../utils/types"; | ||
|
|
||
| export default function StartupTile({ startup }: { startup: Startup }) { | ||
| const { name, description, logo, website } = startup; | ||
| const [dialogOpen, setDialogOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| className="flex flex-col bg-white font-bold p-6 leading-none text-gray-800 uppercase rounded-lg shadow-lg duration-100 border border-stone-300 cursor-pointer" | ||
| onClick={() => setDialogOpen(true)} | ||
| > | ||
| <img src={logo} className="w-1/2 mx-auto rounded-lg" alt="logo" /> | ||
|
|
||
| <div className="mt-6 mx-auto text-center"> | ||
| <h1 className="normal-case text-xl font-semibold leading-6"> | ||
| {name} | ||
| </h1> | ||
| </div> | ||
|
|
||
| <p | ||
| style={{ | ||
| height: "60px", | ||
| overflow: "hidden", | ||
| textOverflow: "ellipsis", | ||
| }} | ||
| className="normal-case text-base font-normal leading-5 tracking-normal text-left mt-3 text-gray-500" | ||
| > | ||
| {description} | ||
| </p> | ||
|
|
||
| <div className="flex mt-4 justify-between items-center"> | ||
| <button | ||
| type="button" | ||
| style={{ | ||
| backgroundColor: "#212936", | ||
| width: "calc(50% - 6px)", | ||
| }} | ||
| className="rounded-lg p-2 font-inter text-sm leading-5 tracking-normal text-left text-gray-200 flex justify-center" | ||
| > | ||
| <a | ||
| href={website} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="flex flex-row m-auto items-center gap-1" | ||
| > | ||
| <InformationCircleIcon className=" inline-block h-5 w-5" /> | ||
| <p className="inline-block">See More</p> | ||
| </a> | ||
| </button> | ||
|
|
||
| <button | ||
| type="button" | ||
| style={{ width: "calc(50% - 6px)" }} | ||
| className="rounded-lg p-2 font-inter text-sm leading-5 tracking-normal text-left text-gray-600 bg-gray-300 flex justify-center" | ||
| > | ||
| <a | ||
| href={website} | ||
| className="flex flex-row m-auto items-center gap-1" | ||
| > | ||
| <ExternalLinkIcon className=" inline-block h-5 w-5" /> | ||
| <p className="inline-block">Website</p> | ||
| </a> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <Transition appear show={dialogOpen} as={Fragment}> | ||
| <Dialog | ||
| as="div" | ||
| className="relative z-10" | ||
| onClose={() => setDialogOpen(false)} | ||
| > | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0" | ||
| enterTo="opacity-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100" | ||
| leaveTo="opacity-0" | ||
| > | ||
| <div className="fixed inset-0 bg-black bg-opacity-25" /> | ||
| </Transition.Child> | ||
|
|
||
| <div className="fixed inset-0 overflow-y-auto"> | ||
| <div className="flex min-h-full items-center justify-center p-4 text-center"> | ||
| <Transition.Child | ||
| as={Fragment} | ||
| enter="ease-out duration-300" | ||
| enterFrom="opacity-0 scale-95" | ||
| enterTo="opacity-100 scale-100" | ||
| leave="ease-in duration-200" | ||
| leaveFrom="opacity-100 scale-100" | ||
| leaveTo="opacity-0 scale-95" | ||
| > | ||
| <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="flex flex-col gap-y-4"> | ||
| <div className="flex gap-x-8"> | ||
| <img src={logo} className="w-48 rounded-lg" alt="logo" /> | ||
| <div className="flex flex-col gap-y-4"> | ||
| <h1 className="text-4xl font-bold text-gray-900"> | ||
| {name} | ||
| </h1> | ||
| <a | ||
| href={website} | ||
| 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> | ||
| </div> | ||
| </Dialog.Panel> | ||
| </Transition.Child> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| </Transition> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { NextPage } from "next"; | ||
| import Head from "../components/Head"; | ||
| import NavbarBuilder from "../components/NavBar"; | ||
| import DirectoryLayout from "../components/DirectoryLayout"; | ||
|
|
||
| const Startups: NextPage = () => ( | ||
| <> | ||
| <Head title="Startups" /> | ||
| <NavbarBuilder /> | ||
| <DirectoryLayout | ||
| title="Startup Directory" | ||
| description="This is the V1 Startup Directory" | ||
| link="https://www.google.com" | ||
| /> | ||
| </> | ||
| ); | ||
|
|
||
| export default Startups; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| export type Startup = { | ||
| created_at: string; | ||
| description: string; | ||
| id: number; | ||
| industries: string[]; | ||
| logo: string; | ||
| name: string; | ||
| roles: string[]; | ||
| size: number; | ||
| stage: string; | ||
| tech: string[]; | ||
| website: string; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters