Mathis
1dd0384857
This commit introduces user data management with the addition of new interfaces and services. User data interface which defines the structure of user data was created. Account handler service for registering, logging in, updating user data and disconnecting was also added. User data provider component was created for managing user data state. The account info component for displaying and editing the user account was introduced too. Finally, updates were made in the existing components and services for accommodating these new elements.
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import {IUserData} from "@/interfaces/userdata.interface";
|
|
import { Button } from "@/components/ui/button"
|
|
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 {User} from "lucide-react";
|
|
|
|
|
|
export function AccountInfo({userData}: {userData: IUserData}) {
|
|
return (
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" className={"gap-1"}>
|
|
<User />
|
|
{userData?.name || "?"}
|
|
</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.name} 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>
|
|
<SheetFooter>
|
|
<SheetClose asChild>
|
|
<Button type="submit">Save changes</Button>
|
|
</SheetClose>
|
|
</SheetFooter>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
} |