From 5f2db259a58b517695f42c1936c8f15213708563 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Fri, 30 Aug 2024 10:41:07 +0700 Subject: [PATCH] feat: Add @radix-ui/react-progress package for progress bar on Invest page --- package.json | 2 ++ pnpm-lock.yaml | 40 ++++++++++++++++++++++++++++++++ src/app/invest/page.tsx | 42 +++++++++++++++++++++++++++++++--- src/components/ui/progress.tsx | 28 +++++++++++++++++++++++ 4 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 src/components/ui/progress.tsx diff --git a/package.json b/package.json index 8f15a4d..6cbd6be 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@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-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@supabase/ssr": "^0.4.0", @@ -22,6 +23,7 @@ "next": "14.2.5", "next-themes": "^0.3.0", "react": "^18", + "react-countup": "^6.5.3", "react-dom": "^18", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1131a7a..22fa7a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,9 @@ dependencies: '@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) + '@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-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) @@ -40,6 +43,9 @@ dependencies: react: specifier: ^18 version: 18.3.1 + react-countup: + specifier: ^6.5.3 + version: 6.5.3(react@18.3.1) react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) @@ -671,6 +677,27 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: false + /@radix-ui/react-progress@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-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==} + 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) + '@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-roving-focus@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-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==} peerDependencies: @@ -1351,6 +1378,10 @@ packages: engines: {node: '>= 0.6'} dev: false + /countup.js@2.8.0: + resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==} + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -2961,6 +2992,15 @@ packages: /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + /react-countup@6.5.3(react@18.3.1): + resolution: {integrity: sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==} + peerDependencies: + react: '>= 16.3.0' + dependencies: + countup.js: 2.8.0 + react: 18.3.1 + dev: false + /react-dom@18.3.1(react@18.3.1): resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx index 0630e06..af9232e 100644 --- a/src/app/invest/page.tsx +++ b/src/app/invest/page.tsx @@ -1,6 +1,6 @@ "use client"; -import React from "react"; +import React, { useState, useEffect } from "react"; import Image from "next/image"; import { Carousel, @@ -10,10 +10,20 @@ import { 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"; export default function Invest() { + const [progress, setProgress] = useState(0); + useEffect(() => { + // percent success + const timer = setTimeout(() => setProgress(66), 500); + return () => clearTimeout(timer); + }, []); return ( -
+
logo @@ -43,7 +53,33 @@ export default function Invest() { -
+
+
+

+ +

+

5% raised of $5M max goal

+ +

+ {" "} + +

+

Investors

+
+ +

+ {" "} + hours +

+

Left to invest

+ +
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx new file mode 100644 index 0000000..5c87ea4 --- /dev/null +++ b/src/components/ui/progress.tsx @@ -0,0 +1,28 @@ +"use client" + +import * as React from "react" +import * as ProgressPrimitive from "@radix-ui/react-progress" + +import { cn } from "@/lib/utils" + +const Progress = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, value, ...props }, ref) => ( + + + +)) +Progress.displayName = ProgressPrimitive.Root.displayName + +export { Progress }