From 52a7bb5b307d0f77bccdd83d9ad18e643cdc3f2f Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 6 Sep 2024 09:44:12 +0700 Subject: [PATCH 01/10] chore: Update npm dependencies for @radix-ui/react-avatar and @radix-ui/react-dropdown-menu to their latest versions --- package.json | 1 + pnpm-lock.yaml | 26 +++++++++++ public/placeholder-user.jpg | Bin 0 -> 1635 bytes public/placeholder.svg | 1 + src/app/page.tsx | 2 + src/components/extendable-card.tsx | 69 +++++++++++++++++++++++++++++ src/components/ui/avatar.tsx | 50 +++++++++++++++++++++ 7 files changed, 149 insertions(+) create mode 100644 public/placeholder-user.jpg create mode 100644 public/placeholder.svg create mode 100644 src/components/extendable-card.tsx create mode 100644 src/components/ui/avatar.tsx diff --git a/package.json b/package.json index 6cbd6be..16cb4e5 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-progress": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22fa7a4..7edc8b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,9 @@ lockfileVersion: '6.0' dependencies: + '@radix-ui/react-avatar': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) '@radix-ui/react-dropdown-menu': specifier: ^2.1.1 version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) @@ -355,6 +358,29 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-avatar@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-collection@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==} peerDependencies: diff --git a/public/placeholder-user.jpg b/public/placeholder-user.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6fa7543d38ed8fdb38f03b5c0f40ad2d66827d4a GIT binary patch literal 1635 zcmex=cRarq{jAqGJXh7$}Ym>C5bm;@P_1sVSzVUPwol9>?*7~p`Fjh%&&i5Vyo`r#xP0%qgXfnHy zn7E>$Lug{-LIb0a!ifhj3W%7RB^MNLx}>0_tP&7BY4IaqjBo(siP4_n_ky5FEmL(` zmhdc@Jb`OxUUPQK!#sq(C`ZJd3YCA-U zh)gnS;tOzhJ@#Yf$SRGl2DVF#R;SL@d2ijhdh5m?{S3~XPpnp*$)2k2D4JJuYTMD;n0K36=Y8OJ z-mS1ZZC1 z49BdqoLoM_v$9v)Hm?5W<`Stp{n4{)u7wjb{~fvi z!T;47&))dGMoGtVj(5+GENxwrz4z{INB>V}1-4JUxp@DgJ8LKAUAQWhoR~X5%Wp!~ z=~v%IB`XWv>j>XTei(%h-3q0fm1bY5udCHKmu^f&G@&$==-St!-gGk?J$~inXs)aj#q07WR4- zM=rxkFUy8C!QJtD_bgKux*|B+dhW6{-z2Xe?@~0Ks(ijMro-3a&Mj#N$xpGBRnmWt zTsUxz-_bhtPjF={K-%Z^57b<}UkWR&Lo)qWhnrV2yD?(SL?Q-l9d; zHS6^j9!_Ejaqqemoyn}=@ptvvS-S7I7N7FZ5}(WNv3l;#-@XTLOmcJGRz1a7FhcBC z-nPY(UsETGE4&Rdme=pC+jj2j;!j+6o-!m}7oD?jz2dGcAvK4%qSmfE=U+z7Z+`#j z$Mx4a@1yJ$R+zt@y0z(yW_ISH^4k|<^!Al@?-M=r`gz3ehXgqVyM1>}k-Q}GF<-;) z*LLGyVd)Qk|Ji$(J?dTY-07-((_=n_`3T&d5FiH|guzja;wny>q}tw+C34*a{8 zfJ9i0DbumfeTVp1E#|(wudjdSJE%AnL@H&$nSBB{^D;34Gp|fN9u>e68m!_b0O__- AD*ylh literal 0 HcmV?d00001 diff --git a/public/placeholder.svg b/public/placeholder.svg new file mode 100644 index 0000000..e763910 --- /dev/null +++ b/public/placeholder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 9bb8ab6..e664b98 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,7 @@ import Link from "next/link"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { BusinessCard } from "@/components/businessCard"; import { Separator } from "@/components/ui/separator"; +import { ExtendableCard } from "@/components/extendable-card"; export default function Home() { return ( @@ -89,6 +90,7 @@ export default function Home() { + ); } diff --git a/src/components/extendable-card.tsx b/src/components/extendable-card.tsx new file mode 100644 index 0000000..2b34ce5 --- /dev/null +++ b/src/components/extendable-card.tsx @@ -0,0 +1,69 @@ +import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; +import Link from "next/link"; + +interface XMap { + // tagName: colorCode + [tag: string]: string; +} + +interface ExtendableCardProps { + name: string; + description: string; + joinDate: string; + location: string; + tags: XMap | null; +} + +export function ExtendableCard(props: ExtendableCardProps) { + return ( +
+
+ Card image +
+
+

+ {props.name} +

+
+ {props.joinDate} +
+
+ {props.location} +
+
+

+ {props.description} +

+
+
+ + + JP + +
+

+ Jared Palmer +

+

Photographer

+
+
+ + Learn More + +
+
+
+
+ ); +} diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } From d1f474f6f41466c2f6bb293d4eb921b27dd75e5c Mon Sep 17 00:00:00 2001 From: sirin Date: Tue, 10 Sep 2024 03:42:22 +0700 Subject: [PATCH 02/10] Make navbar dynamically render according to session --- package-lock.json | 26 ++++++++++ src/components/navigationBar/Unsigned.tsx | 60 ++++++++++++++++++++--- src/components/ui/skeleton.tsx | 15 ++++++ src/lib/supabase/useSession.ts | 27 ++++++++++ 4 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/lib/supabase/useSession.ts diff --git a/package-lock.json b/package-lock.json index 361a165..fdcc5d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "b2d-ventures", "version": "0.1.0", "dependencies": { + "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-progress": "^1.1.0", @@ -475,6 +476,31 @@ } } }, + "node_modules/@radix-ui/react-avatar": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz", + "integrity": "sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA==", + "dependencies": { + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", diff --git a/src/components/navigationBar/Unsigned.tsx b/src/components/navigationBar/Unsigned.tsx index 2bc21c2..89d5761 100644 --- a/src/components/navigationBar/Unsigned.tsx +++ b/src/components/navigationBar/Unsigned.tsx @@ -17,7 +17,11 @@ import { NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu"; -import { Search } from "lucide-react"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { Skeleton } from "@/components/ui/skeleton"; +import { Search, Bell, Heart, Wallet } from "lucide-react"; + +import useSession from "@/lib/supabase/useSession"; const landings = [ { @@ -54,7 +58,44 @@ const ListItem = React.forwardRef, React.ComponentPropsWit ); ListItem.displayName = "ListItem"; +const unAuthenticatedComponents = () => { + return ( +
+ + + + +
+ ); +}; + +const authenticatedComponents = () => { + return ( +
+ + + + + + 1 + +
+ ); +}; + export function UnsignedNav() { + const { session, loading } = useSession(); + const user = session?.user; + const [sessionLoaded, setSessionLoaded] = React.useState(false); + + React.useEffect(() => { + if (!loading) { + setSessionLoaded(true); + } + }, [loading]); + const businessComponents = [ { title: "Businesses", @@ -151,12 +192,17 @@ export function UnsignedNav() {
- - - - + {sessionLoaded ? ( + user ? ( + authenticatedComponents() + ) : ( + unAuthenticatedComponents() + ) + ) : ( +
+ +
+ )}
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx new file mode 100644 index 0000000..01b8b6d --- /dev/null +++ b/src/components/ui/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ) +} + +export { Skeleton } diff --git a/src/lib/supabase/useSession.ts b/src/lib/supabase/useSession.ts new file mode 100644 index 0000000..c4bb61e --- /dev/null +++ b/src/lib/supabase/useSession.ts @@ -0,0 +1,27 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { createSupabaseClient } from "./clientComponentClient"; +import { Session } from "@supabase/supabase-js"; + +export default function useSession() { + const [session, setSession] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const supabase = createSupabaseClient(); + + const getSession = async () => { + const { + data: { session }, + } = await supabase.auth.getSession(); + + setSession(session); + setLoading(false); + }; + + getSession(); + }, []); + + return { session, loading }; +} From 30236d924c3e948760dfb3de7f2ed178559af15b Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 13:21:52 +0700 Subject: [PATCH 03/10] Refactor .gitignore and update UI components in invest and home pages --- .gitignore | 3 +- src/app/invest/page.tsx | 4 +- src/app/page.tsx | 34 ++++++++++++--- src/components/extendable-card.tsx | 66 +++++++++++++++++++----------- 4 files changed, 75 insertions(+), 32 deletions(-) diff --git a/.gitignore b/.gitignore index fd3dbb5..031e1fe 100644 --- a/.gitignore +++ b/.gitignore @@ -26,7 +26,8 @@ yarn-debug.log* yarn-error.log* # local env files -.env*.local +.env*. +.env # vercel .vercel diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 029468b..76ddf8e 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -35,11 +35,11 @@ export default function Invest() {

NVIDIA

World's first non-metal sustainable battery

-
+
{["Technology", "Gaming"].map((tag) => ( {tag} diff --git a/src/app/page.tsx b/src/app/page.tsx index 0be7e81..0a92eac 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,13 @@ import Image from "next/image"; import { Button } from "@/components/ui/button"; import Link from "next/link"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; import { BusinessCard } from "@/components/businessCard"; import { Separator } from "@/components/ui/separator"; import { ExtendableCard } from "@/components/extendable-card"; @@ -14,7 +20,9 @@ export default function Home() {

Explore the world of ventures

-

Unlock opportunities and connect with a community of passionate

+

+ Unlock opportunities and connect with a community of passionate +

investors and innovators.

Together, we turn ideas into impact.

 @@ -76,12 +84,16 @@ export default function Home() {

Hottest Deals

-

The deals attracting the most interest right now

+

+ The deals attracting the most interest right now +

- + ); } diff --git a/src/components/extendable-card.tsx b/src/components/extendable-card.tsx index 2b34ce5..2b8306d 100644 --- a/src/components/extendable-card.tsx +++ b/src/components/extendable-card.tsx @@ -1,5 +1,5 @@ -import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; -import Link from "next/link"; +"use client"; +import { CalendarDaysIcon } from "lucide-react"; interface XMap { // tagName: colorCode @@ -12,11 +12,14 @@ interface ExtendableCardProps { joinDate: string; location: string; tags: XMap | null; + minInvestment: number; + totalInvestor: number; + totalRaised: number; } export function ExtendableCard(props: ExtendableCardProps) { return ( -
+
{props.name} -
- {props.joinDate} + + {/* Default content (visible when not hovered) */} +
+ + + Joined {props.joinDate} +
-
+
{props.location}
-
-

- {props.description} -

+
+ {["Technology", "Gaming"].map((tag) => ( + + {tag} + + ))} +
+ + {/* Hover content (appears when hovered) */} +
+

{props.description}

- - - JP -
-

- Jared Palmer +

+

+ ${props.totalRaised.toLocaleString()}{" "} + committed and reserved +

+
+

+ {props.totalInvestor.toLocaleString()}{" "} + investors +

+
+

+ ${props.minInvestment.toLocaleString()} min. + investment

-

Photographer

- - Learn More -
From 888e6cf6ec8aa9932b5d21669cec036e4870a1e3 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 13:33:03 +0700 Subject: [PATCH 04/10] Refactor and update UI components in invest and home pages --- src/app/page.tsx | 37 +++++++++++++++--------------- src/components/extendable-card.tsx | 2 +- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 0a92eac..35cfda9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -89,7 +89,7 @@ export default function Home() {

- - - -
@@ -133,18 +144,6 @@ export default function Home() {
- ); } diff --git a/src/components/extendable-card.tsx b/src/components/extendable-card.tsx index 2b8306d..933ee9d 100644 --- a/src/components/extendable-card.tsx +++ b/src/components/extendable-card.tsx @@ -22,7 +22,7 @@ export function ExtendableCard(props: ExtendableCardProps) {
Card image Date: Wed, 11 Sep 2024 20:09:56 +0700 Subject: [PATCH 05/10] Refactor UI components in invest and home pages --- src/app/invest/page.tsx | 2 +- src/app/page.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 76ddf8e..1605850 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -28,7 +28,7 @@ export default function Invest() { }, []); return (
-
+
logo diff --git a/src/app/page.tsx b/src/app/page.tsx index 35cfda9..f74a7c7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,7 +8,6 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; -import { BusinessCard } from "@/components/businessCard"; import { Separator } from "@/components/ui/separator"; import { ExtendableCard } from "@/components/extendable-card"; From d0b5ebe96253445463b769e2ac09cc3530208918 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 20:26:28 +0700 Subject: [PATCH 06/10] Refactor UI components in invest, home pages and create deals page --- src/app/deals/page.tsx | 14 ++++++++++++++ src/app/layout.tsx | 4 ++-- src/app/page.tsx | 2 +- .../{extendable-card.tsx => extendableCard.tsx} | 0 .../navigationBar/{Unsigned.tsx => nav.tsx} | 2 +- 5 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 src/app/deals/page.tsx rename src/components/{extendable-card.tsx => extendableCard.tsx} (100%) rename src/components/navigationBar/{Unsigned.tsx => nav.tsx} (99%) diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx new file mode 100644 index 0000000..fb5959d --- /dev/null +++ b/src/app/deals/page.tsx @@ -0,0 +1,14 @@ +"use client"; + +export default function Deals(){ + return ( +
+
+

Investment Opportunities

+
+

Browse current investment opportunities on Republic.

+

All companies are vetted & pass due diligence.

+
+
+ ); +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6ec0c9d..49b3802 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,7 +3,7 @@ import { Montserrat } from "next/font/google"; import { ThemeProvider } from "@/components/theme-provider"; import "@/app/globals.css"; -import { UnsignedNav } from "@/components/navigationBar/Unsigned"; +import { NavigationBar } from "@/components/navigationBar/nav"; const montserrat = Montserrat({ subsets: ["latin"], @@ -29,7 +29,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
- +
{children}
 diff --git a/src/app/page.tsx b/src/app/page.tsx index f74a7c7..08fa1dc 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -9,7 +9,7 @@ import { CardTitle, } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; -import { ExtendableCard } from "@/components/extendable-card"; +import { ExtendableCard } from "@/components/extendableCard"; export default function Home() { return ( diff --git a/src/components/extendable-card.tsx b/src/components/extendableCard.tsx similarity index 100% rename from src/components/extendable-card.tsx rename to src/components/extendableCard.tsx diff --git a/src/components/navigationBar/Unsigned.tsx b/src/components/navigationBar/nav.tsx similarity index 99% rename from src/components/navigationBar/Unsigned.tsx rename to src/components/navigationBar/nav.tsx index 89d5761..33b8d45 100644 --- a/src/components/navigationBar/Unsigned.tsx +++ b/src/components/navigationBar/nav.tsx @@ -85,7 +85,7 @@ const authenticatedComponents = () => { ); }; -export function UnsignedNav() { +export function NavigationBar() { const { session, loading } = useSession(); const user = session?.user; const [sessionLoaded, setSessionLoaded] = React.useState(false); From 7a0bf7bcf82aae3487df3718d037395ed4a92c59 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 20:56:34 +0700 Subject: [PATCH 07/10] Refactor UI components and add @radix-ui/react-select --- package.json | 1 + pnpm-lock.yaml | 59 +++++++++++-- src/app/deals/page.tsx | 60 ++++++++++--- src/components/ui/select.tsx | 160 +++++++++++++++++++++++++++++++++++ 4 files changed, 263 insertions(+), 17 deletions(-) create mode 100644 src/components/ui/select.tsx diff --git a/package.json b/package.json index 0b37c81..9a28531 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@supabase/ssr": "^0.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7edc8b3..2194c7a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + dependencies: '@radix-ui/react-avatar': specifier: ^1.1.0 @@ -13,6 +17,9 @@ dependencies: '@radix-ui/react-progress': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-select': + specifier: ^2.1.1 + version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) '@radix-ui/react-separator': specifier: ^1.1.0 version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) @@ -20,10 +27,10 @@ dependencies: specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.4)(react@18.3.1) '@supabase/ssr': - specifier: ^0.4.0 + specifier: ^0.4.1 version: 0.4.1(@supabase/supabase-js@2.45.2) '@supabase/supabase-js': - specifier: ^2.45.1 + specifier: ^2.45.2 version: 2.45.2 class-variance-authority: specifier: ^0.7.0 @@ -334,6 +341,10 @@ packages: requiresBuild: true optional: true + /@radix-ui/number@1.1.0: + resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==} + dev: false + /@radix-ui/primitive@1.1.0: resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==} dev: false @@ -752,6 +763,46 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-select@2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@radix-ui/number': 1.1.0 + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-context': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-focus-guards': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.5.7(@types/react@18.3.4)(react@18.3.1) + dev: false + /@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==} peerDependencies: @@ -3743,7 +3794,3 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index fb5959d..62011f9 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -1,14 +1,52 @@ "use client"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { useState } from "react"; +import { Clock3Icon } from "lucide-react"; -export default function Deals(){ - return ( -
-
-

Investment Opportunities

-
-

Browse current investment opportunities on Republic.

-

All companies are vetted & pass due diligence.

-
+export default function Deals() { + const [postAtFilter, setPostAtFilter] = useState(""); + const [contentTypeFilter, setContentTypeFilter] = useState(""); + const handlePostAtFilter = (value: string) => { + setPostAtFilter(value); + }; + return ( +
+
+

Investment Opportunities

+
+

Browse current investment opportunities on Republic.

+

+ All companies are vetted & pass due diligence. +

+
+ + + {postAtFilter} + {contentTypeFilter}
- ); -} \ No newline at end of file +
+
+ ); +} diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx new file mode 100644 index 0000000..cbe5a36 --- /dev/null +++ b/src/components/ui/select.tsx @@ -0,0 +1,160 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown, ChevronUp } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + span]:line-clamp-1", + className + )} + {...props} + > + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectScrollUpButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName + +const SelectScrollDownButton = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +SelectScrollDownButton.displayName = + SelectPrimitive.ScrollDownButton.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + + {children} + + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, + SelectScrollUpButton, + SelectScrollDownButton, +} From 998fe124877b82acf6ea803d6084f6d2fbddcb1e Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 21:05:23 +0700 Subject: [PATCH 08/10] Refactor UI components and add filter options in Deals page --- src/app/deals/page.tsx | 47 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index 62011f9..04f8c89 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -7,14 +7,18 @@ import { SelectValue, } from "@/components/ui/select"; import { useState } from "react"; -import { Clock3Icon } from "lucide-react"; +import { + Clock3Icon, + MessageSquareIcon, + UserIcon, + UsersIcon, +} from "lucide-react"; export default function Deals() { const [postAtFilter, setPostAtFilter] = useState(""); const [contentTypeFilter, setContentTypeFilter] = useState(""); - const handlePostAtFilter = (value: string) => { - setPostAtFilter(value); - }; + const [authorFilter, setAuthorFilter] = useState(""); + const [groupsFilter, setGroupFilter] = useState(""); return (
@@ -24,27 +28,52 @@ export default function Deals() {

All companies are vetted & pass due diligence.

-
- setPostAtFilter(value)}> Today + Yesterday - {postAtFilter} + + + {/* {postAtFilter} {contentTypeFilter} + {authorFilter} + {groupsFilter} */}
From 954b0068fbe8c180a35ff5e2fd4088ba935411c2 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Wed, 11 Sep 2024 21:36:44 +0700 Subject: [PATCH 09/10] Refactor UI components, add filter options, and display investment opportunities and deals in Deals page --- src/app/deals/page.tsx | 75 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index 04f8c89..21678af 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -13,15 +13,64 @@ import { UserIcon, UsersIcon, } from "lucide-react"; +import { Separator } from "@/components/ui/separator"; +import { ExtendableCard } from "@/components/extendableCard"; export default function Deals() { const [postAtFilter, setPostAtFilter] = useState(""); const [contentTypeFilter, setContentTypeFilter] = useState(""); const [authorFilter, setAuthorFilter] = useState(""); const [groupsFilter, setGroupFilter] = useState(""); + const data = [ + { + name: "NVDA", + description: + "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology", + joinDate: "December 2021", + location: "Bangkok, Thailand", + tags: null, + minInvestment: 10000, + totalInvestor: 58400, + totalRaised: 9000000, + }, + { + name: "Apple Inc.", + description: + "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store.", + joinDate: "February 2020", + location: "Cupertino, California, USA", + tags: null, + minInvestment: 10000, + totalInvestor: 58400, + totalRaised: 9000000, + }, + { + name: "Google LLC", + description: + "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system.", + joinDate: "April 2019", + location: "Mountain View, California, USA", + tags: null, + minInvestment: 10000, + totalInvestor: 5000, + totalRaised: 1500000000, + }, + { + name: "Microsoft Corporation", + description: + "Microsoft Corporation is a multinational technology company.", + joinDate: "January 2018", + location: "California, USA", + tags: null, + minInvestment: 250, + totalInvestor: 5000, + totalRaised: 1500000, + }, + ]; + return (
-
+

Investment Opportunities


Browse current investment opportunities on Republic.

@@ -62,7 +111,7 @@ export default function Deals() {