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

@@ -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<React.SetStateAction<IUserData | undefined>>;
+}) {
 	return (
-		<Sheet>
-			<SheetTrigger asChild>
-				<Button variant="outline" className={"gap-1"}>
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline" className={"gap-2 px-2"}>
+					<p>{userData.firstName}</p>
 					<User />
-					{userData?.firstName || "?"}
 				</Button>
-			</SheetTrigger>
-			<SheetContent>
-				<SheetHeader>
-					<SheetTitle>Edit profile</SheetTitle>
-					<SheetDescription>
-						Make changes to your profile here. Click save when you're done.
-					</SheetDescription>
-				</SheetHeader>
-				<div className="grid gap-4 py-4">
-					<div className="grid grid-cols-4 items-center gap-4">
-						<Label htmlFor="name" className="text-right">
-							Name
-						</Label>
-						<Input
-							id="name"
-							placeholder={userData.firstName}
-							className="col-span-3"
-							onChange={(event) => {
-								console.log(event.target.value);
-							}}
-						/>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
+					<DialogDescription>{userData.city}</DialogDescription>
+				</DialogHeader>
+				<div className={"flex flex-col items-center justify-center w-full"}>
+					<div className={"flex flex-row justify-evenly items-center"}>
+						<div className={"flex flex-row gap-1 justify-center items-center mx-auto"}>
+							<Landmark />
+							<p>{userData.dollarAvailables} $</p>
 						</div>
-					<div className="grid grid-cols-4 items-center gap-4">
-						<Label htmlFor="username" className="text-right">
-							Username
-						</Label>
-						<Input id="username" value="@peduarte" className="col-span-3" />
+						<div></div>
 					</div>
 				</div>
-				<SheetFooter>
-					<SheetClose asChild>
-						<Button type="submit">Save changes</Button>
-					</SheetClose>
-				</SheetFooter>
-			</SheetContent>
-		</Sheet>
+				<DialogFooter>
+					<Button variant={"secondary"} className={"gap-2 px-2"}>
+						<Wallet />
+						<p>My wallet</p>
+					</Button>
+					<Button variant={"destructive"} className={"gap-2 px-2"}>
+						<Unplug />
+						<p>Disconnect</p>
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
 	);
 }