From 6976e3a317a81d51931968464bf7b4a0e79f0540 Mon Sep 17 00:00:00 2001 From: Mathis Date: Wed, 12 Jun 2024 14:58:25 +0200 Subject: [PATCH] feat(component): replace Sheet with Dialog, enhance user interaction The 'Sheet' UI component in 'account-info' component is replaced with a 'Dialog'. This commit also upgrades userData delivery, and includes interactivity enhancements like added wallet and disconnect buttons. The user's first name is presented in the dialog header. --- src/components/account-info.tsx | 99 ++++++++++++++++----------------- 1 file changed, 48 insertions(+), 51 deletions(-) diff --git a/src/components/account-info.tsx b/src/components/account-info.tsx index b972905..c314f1b 100644 --- a/src/components/account-info.tsx +++ b/src/components/account-info.tsx @@ -1,64 +1,61 @@ "use client"; - import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { - Sheet, - SheetClose, - SheetContent, - SheetDescription, - SheetFooter, - SheetHeader, - SheetTitle, - SheetTrigger, -} from "@/components/ui/sheet"; import type { IUserData } from "@/interfaces/userdata.interface"; -import { User } from "lucide-react"; -export function AccountInfo({ userData }: { userData: IUserData }) { +import { Landmark, Unplug, User, Wallet } from "lucide-react"; +import type React from "react"; + +export function AccountInfo({ + userData, + setUserData, +}: { + userData: IUserData; + setUserData: React.Dispatch>; +}) { return ( - - - - - - - Edit profile - - Make changes to your profile here. Click save when you're done. - - -
-
- - { - console.log(event.target.value); - }} - /> -
-
- - + + + + {`Your account - ${userData.firstName} ${userData.lastName}`} + {userData.city} + +
+
+
+ +

{userData.dollarAvailables} $

+
+
- - - - - - - + + + + +
+ ); }