From 6342d3293a4bde8a5d00f6a712952d9031beb64f Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 13 Sep 2024 11:01:46 +0700 Subject: [PATCH 1/6] Refactor UI components, update links in Home page --- package-lock.json | 32 +++++++- package.json | 2 + src/app/invest/page.tsx | 162 ++++++++++++++++++++++------------------ 3 files changed, 123 insertions(+), 73 deletions(-) diff --git a/package-lock.json b/package-lock.json index 85cf0e6..1692ea5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@radix-ui/react-slot": "^1.1.0", "@supabase/ssr": "^0.4.1", "@supabase/supabase-js": "^2.45.2", + "b2d-ventures": "file:", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "embla-carousel-react": "^8.2.0", @@ -27,6 +28,7 @@ "react": "^18", "react-countup": "^6.5.3", "react-dom": "^18", + "react-hot-toast": "^2.4.1", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7" }, @@ -1761,6 +1763,10 @@ "deep-equal": "^2.0.5" } }, + "node_modules/b2d-ventures": { + "resolved": "", + "link": true + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2016,8 +2022,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -3204,6 +3209,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -4677,6 +4690,21 @@ "react": "^18.3.1" } }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index c97d094..0d42173 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-slot": "^1.1.0", "@supabase/ssr": "^0.4.1", "@supabase/supabase-js": "^2.45.2", + "b2d-ventures": "file:", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "embla-carousel-react": "^8.2.0", @@ -28,6 +29,7 @@ "react": "^18", "react-countup": "^6.5.3", "react-dom": "^18", + "react-hot-toast": "^2.4.1", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7" }, diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index aead347..f3f3a38 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -2,19 +2,55 @@ import React, { useState, useEffect } from "react"; import Image from "next/image"; -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; import { Card, CardContent } from "@/components/ui/card"; import CountUp from "react-countup"; import { Progress } from "@/components/ui/progress"; import { Separator } from "@/components/ui/separator"; import { Button } from "@/components/ui/button"; +import { ShareIcon, StarIcon } from "lucide-react"; +import { Toaster, toast } from "react-hot-toast"; +import useSession from "@/lib/supabase/useSession"; +import { redirect } from 'next/navigation' +import { Skeleton } from "@/components/ui/skeleton"; export default function Invest() { const [progress, setProgress] = useState(0); const [tab, setTab] = useState("Pitch"); + const { session, loading } = useSession(); + const user = session?.user; + const [sessionLoaded, setSessionLoaded] = React.useState(false); const handleClick = (item: string) => { setTab(item); }; + const currentUrl = window.location.href; + const handleShare = () => { + if (document.hasFocus()) { + navigator.clipboard.writeText(currentUrl).then(() => { + toast.success("URL copied to clipboard!"); + }); + } + }; + const handleFollow = () =>{ + {sessionLoaded ? ( + user ? ( + // if login, save follow + null + ) : ( + redirect('/login') + ) + ) : ( +
+ +
+ )} + } useEffect(() => { // percent success const timer = setTimeout(() => setProgress(66), 500); @@ -22,16 +58,33 @@ export default function Invest() { }, []); return (
-
+
+ +
+
-
+
logo

NVIDIA

+
+
+ +
+
+ +
+
-

Worlds first non-metal sustainable battery

+

World's first non-metal sustainable battery

{["Technology", "Gaming"].map((tag) => ( - + {tag} ))} @@ -39,18 +92,10 @@ export default function Invest() {
{/* image carousel */} - + {Array.from({ length: 5 }).map((_, index) => ( - + ))} {" "} @@ -60,7 +105,13 @@ export default function Invest() {

- +

5% raised of $5M max goal

@@ -76,67 +127,27 @@ export default function Invest() { hours

Left to invest

- +
- + {/* boiler plate for an actual pictures */} - - + + - - + + - - + + - - + + - - + + @@ -145,17 +156,26 @@ export default function Invest() {
  • - handleClick("Pitch")} className={tab === "Pitch" ? "text-blue-600" : ""}> + handleClick("Pitch")} + className={tab === "Pitch" ? "text-blue-600" : ""} + > Pitch
  • - handleClick("General Data")} className={tab === "General Data" ? "text-blue-600" : ""}> + handleClick("General Data")} + className={tab === "General Data" ? "text-blue-600" : ""} + > General Data
  • - handleClick("Updates")} className={tab === "Updates" ? "text-blue-600" : ""}> + handleClick("Updates")} + className={tab === "Updates" ? "text-blue-600" : ""} + > Updates
    • From a3686cb229876f38c43c7803556be2fe19be78bf Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 13 Sep 2024 11:02:38 +0700 Subject: [PATCH 2/6] Refactor UI components, update links in Home page --- src/app/invest/page.tsx | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index f3f3a38..3722033 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -17,7 +17,7 @@ import { Button } from "@/components/ui/button"; import { ShareIcon, StarIcon } from "lucide-react"; import { Toaster, toast } from "react-hot-toast"; import useSession from "@/lib/supabase/useSession"; -import { redirect } from 'next/navigation' +import { redirect } from "next/navigation"; import { Skeleton } from "@/components/ui/skeleton"; export default function Invest() { @@ -37,20 +37,19 @@ export default function Invest() { }); } }; - const handleFollow = () =>{ - {sessionLoaded ? ( - user ? ( - // if login, save follow - null + const handleFollow = () => { + { + sessionLoaded ? ( + user ? null : ( // if login, save follow + redirect("/login") + ) ) : ( - redirect('/login') - ) - ) : ( -
    - -
    - )} - } +
    + +
    + ); + } + }; useEffect(() => { // percent success const timer = setTimeout(() => setProgress(66), 500); @@ -67,13 +66,10 @@ export default function Invest() { logo

    NVIDIA

    -
    +
    -
    +
    From 195327d69155b82179ec3697496591747842e6e0 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 13 Sep 2024 11:47:21 +0700 Subject: [PATCH 3/6] Refactor UI components, add tooltip functionality --- package-lock.json | 34 ++++++++++++ package.json | 1 + pnpm-lock.yaml | 98 +++++++++++++++++++++++++++++++++-- src/app/invest/page.tsx | 49 +++++++++++++----- src/components/ui/tooltip.tsx | 30 +++++++++++ 5 files changed, 195 insertions(+), 17 deletions(-) create mode 100644 src/components/ui/tooltip.tsx diff --git a/package-lock.json b/package-lock.json index 1692ea5..45159a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", "@supabase/ssr": "^0.4.1", "@supabase/supabase-js": "^2.45.2", "b2d-ventures": "file:", @@ -1023,6 +1024,39 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz", + "integrity": "sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-visually-hidden": "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-use-callback-ref": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", diff --git a/package.json b/package.json index 0d42173..422c8fe 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", "@supabase/ssr": "^0.4.1", "@supabase/supabase-js": "^2.45.2", "b2d-ventures": "file:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2194c7a..4d5ffeb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@radix-ui/react-avatar': specifier: ^1.1.0 @@ -11,6 +7,9 @@ dependencies: '@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) + '@radix-ui/react-hover-card': + specifier: ^1.1.1 + version: 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-navigation-menu': specifier: ^1.2.0 version: 1.2.0(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) @@ -26,6 +25,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: ^1.1.2 + version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) '@supabase/ssr': specifier: ^0.4.1 version: 0.4.1(@supabase/supabase-js@2.45.2) @@ -59,6 +61,9 @@ dependencies: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + react-hot-toast: + specifier: ^2.4.1 + version: 2.4.1(csstype@3.1.3)(react-dom@18.3.1)(react@18.3.1) tailwind-merge: specifier: ^2.5.2 version: 2.5.2 @@ -539,6 +544,34 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-hover-card@1.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-IwzAOP97hQpDADYVKrEEHUH/b2LA+9MgB0LgdmnbFO2u/3M5hmEofjjr2M6CyzUblaAqJdFm6B7oFtU72DPXrA==} + 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/primitive': 1.1.0 + '@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-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-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-presence': 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-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-controllable-state': 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-id@1.1.0(@types/react@18.3.4)(react@18.3.1): resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==} peerDependencies: @@ -837,6 +870,37 @@ packages: react: 18.3.1 dev: false + /@radix-ui/react-tooltip@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==} + 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/primitive': 1.1.0 + '@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-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-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-presence': 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-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-controllable-state': 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 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.4)(react@18.3.1): resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} peerDependencies: @@ -2271,6 +2335,14 @@ packages: slash: 3.0.0 dev: true + /goober@2.1.14(csstype@3.1.3): + resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==} + peerDependencies: + csstype: ^3.0.10 + dependencies: + csstype: 3.1.3 + dev: false + /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: @@ -3088,6 +3160,20 @@ packages: scheduler: 0.23.2 dev: false + /react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + goober: 2.1.14(csstype@3.1.3) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + transitivePeerDependencies: + - csstype + dev: false + /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true @@ -3794,3 +3880,7 @@ packages: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} dev: true + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 3722033..3353708 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -19,18 +19,33 @@ import { Toaster, toast } from "react-hot-toast"; import useSession from "@/lib/supabase/useSession"; import { redirect } from "next/navigation"; import { Skeleton } from "@/components/ui/skeleton"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; export default function Invest() { const [progress, setProgress] = useState(0); const [tab, setTab] = useState("Pitch"); const { session, loading } = useSession(); const user = session?.user; - const [sessionLoaded, setSessionLoaded] = React.useState(false); + const [sessionLoaded, setSessionLoaded] = useState(false); + const [isFollow, setIsFollow] = useState(false); + + useEffect(() => { + // set sessionLoaded to true once session is confirmed + if (!loading) { + setSessionLoaded(true); + } + }, [loading]); const handleClick = (item: string) => { setTab(item); }; - const currentUrl = window.location.href; + const handleShare = () => { + const currentUrl = window.location.href; if (document.hasFocus()) { navigator.clipboard.writeText(currentUrl).then(() => { toast.success("URL copied to clipboard!"); @@ -38,16 +53,11 @@ export default function Invest() { } }; const handleFollow = () => { - { - sessionLoaded ? ( - user ? null : ( // if login, save follow - redirect("/login") - ) - ) : ( -
    - -
    - ); + if (user) { + setIsFollow((prevState) => !prevState); + // save follow to database + } else { + redirect("/login"); } }; useEffect(() => { @@ -67,7 +77,20 @@ export default function Invest() {

    NVIDIA

    - + + + + + + +

    Follow NIVIDIA

    +     +     +
    diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx new file mode 100644 index 0000000..30fc44d --- /dev/null +++ b/src/components/ui/tooltip.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" + +import { cn } from "@/lib/utils" + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } From c2c81ac08b69befabe016d650f14ec89ae9c8525 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 13 Sep 2024 13:39:00 +0700 Subject: [PATCH 4/6] Refactor UI components, remove unused imports ,update hover animation duration and create notification page --- src/app/invest/page.tsx | 1 - src/app/notification/page.tsx | 28 ++++++++++++++++++++++++++++ src/components/extendableCard.tsx | 2 +- 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 src/app/notification/page.tsx diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 3353708..b9ac22e 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -18,7 +18,6 @@ import { ShareIcon, StarIcon } from "lucide-react"; import { Toaster, toast } from "react-hot-toast"; import useSession from "@/lib/supabase/useSession"; import { redirect } from "next/navigation"; -import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, TooltipContent, diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx new file mode 100644 index 0000000..e4433c5 --- /dev/null +++ b/src/app/notification/page.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { Card, CardContent } from "@/components/ui/card"; + +export default function Notification() { + const sampleNotifications = [ + { message: "New message from John Doe", time: "5 minutes ago" }, + { message: "Your order has been shipped", time: "2 hours ago" }, + { message: "Meeting reminder: Team sync at 3 PM", time: "1 day ago" }, + ]; + return ( +
    +
    +

    Notifications

    +
    + {/* Cards */} + + + + 1 + + + +
    +
    +
    + ); +} diff --git a/src/components/extendableCard.tsx b/src/components/extendableCard.tsx index 933ee9d..f266e69 100644 --- a/src/components/extendableCard.tsx +++ b/src/components/extendableCard.tsx @@ -57,7 +57,7 @@ export function ExtendableCard(props: ExtendableCardProps) {
    {/* Hover content (appears when hovered) */} -
    +

    {props.description}

    From 72d72a550e9a6262a3760c005c31a6a8090b9fd1 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 13 Sep 2024 13:56:58 +0700 Subject: [PATCH 5/6] Refactor UI components, add notification bell icon and count --- src/app/notification/page.tsx | 20 +++++- src/components/navigationBar/nav.tsx | 102 +++++++++++++++++++-------- 2 files changed, 90 insertions(+), 32 deletions(-) diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx index e4433c5..054ef48 100644 --- a/src/app/notification/page.tsx +++ b/src/app/notification/page.tsx @@ -1,6 +1,7 @@ "use client"; import { Card, CardContent } from "@/components/ui/card"; +import { BellIcon } from "lucide-react"; export default function Notification() { const sampleNotifications = [ @@ -17,7 +18,24 @@ export default function Notification() { - 1 + + {sampleNotifications.map((notification, index) => ( +
    +
    + +
    +

    + {notification.message} +

    +

    {notification.time}

    +
    +
    + +
    + ))} +     diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx index fac2336..ec17864 100644 --- a/src/components/navigationBar/nav.tsx +++ b/src/components/navigationBar/nav.tsx @@ -45,27 +45,31 @@ const landings = [ route: "/crm-landing", }, ]; -const ListItem = React.forwardRef, React.ComponentPropsWithoutRef<"a">>( - ({ className, title, children, ...props }, ref) => { - return ( -
  • - - -
    {title}
    -
    -

    {children}

    -     -     -
    • - ); - } -); +const ListItem = React.forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +
    +

    + {children} +

    +     +     +
    • + ); +}); ListItem.displayName = "ListItem"; const unAuthenticatedComponents = () => { @@ -82,14 +86,28 @@ const unAuthenticatedComponents = () => { }; const authenticatedComponents = () => { + let notifications = 100; + const displayValue = notifications >= 100 ? "..." : notifications; return (
    - + + {" "} +
    + + + {displayValue} + +
    + -
    - -
    - ))} + ))}