WorkSimplon/brief-07-front
WorkSimplon/brief-07-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(component): replace Sheet with Dialog, enhance user interaction

Browse Source 
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.
This commit is contained in:
Mathis H (Avnyr) 2024-06-12 14:58:25 +02:00
parent 24c168bc44
commit 6976e3a317
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
1 changed files with 48 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/account-info.tsx
View File

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