Mathis
6976e3a317
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.
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
"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 type { IUserData } from "@/interfaces/userdata.interface";
|
|
|
|
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 (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" className={"gap-2 px-2"}>
|
|
<p>{userData.firstName}</p>
|
|
<User />
|
|
</Button>
|
|
</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></div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
);
|
|
}
|