brief-07-front/src/components/account-info.tsx
Mathis 6976e3a317
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.
2024-06-12 14:58:25 +02:00

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>
);
}