Skip to content

Commit ce6b843

Browse files
kaourantinukaourantinu
authored
Merge pull request #28 from WildCodeSchool/staging
Staging
2 parents 915c363 + a59f73f commit ce6b843

File tree

14 files changed

+954
-122
lines changed

14 files changed

+954
-122
lines changed

‎package-lock.json‎

Lines changed: 375 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@graphql-codegen/typescript-react-apollo": "^4.3.2",
1818
"@hookform/resolvers": "^5.2.1",
1919
"@radix-ui/react-checkbox": "^1.3.2",
20+
"@radix-ui/react-dropdown-menu": "^2.1.16",
2021
"@radix-ui/react-label": "^2.1.7",
2122
"@radix-ui/react-slot": "^1.2.3",
2223
"@radix-ui/react-tabs": "^1.1.12",

‎public/login-picture.jpg‎

958 KB
Loading

‎src/components/dashboard/DashboardLayout.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { MdRoomService } from "react-icons/md";
55
import { IoPerson } from "react-icons/io5";
66
import { LuLayoutDashboard } from "react-icons/lu";
77
import { IoIosSettings } from "react-icons/io";
8+
import { useAuth } from "@/context/AuthContext";
89

910
export type DashboardMenuItem = {
1011
name: string;
@@ -13,6 +14,8 @@ export type DashboardMenuItem = {
1314
};
1415

1516
export default function DashboardLayout() {
17+
const { user, logout } = useAuth();
18+
1619
const dashboardMenu: DashboardMenuItem[] = [
1720
{
1821
name: "Accueil",
@@ -37,7 +40,7 @@ export default function DashboardLayout() {
3740
];
3841

3942
const dashboardUserSettingsMenuItem: DashboardMenuItem = {
40-
name: "Paramètres utilisateur",
43+
name: `${user?.firstName} ${user?.lastName}`,
4144
path: "/dashboard/user-settings",
4245
icon: <IoPerson size="1.2rem" />,
4346
};
@@ -75,7 +78,8 @@ export default function DashboardLayout() {
7578
</ul>
7679
<DashboardMenuTooltip
7780
item={dashboardUserSettingsMenuItem}
78-
isProfileTooltip
81+
user={user}
82+
logout={logout}
7983
/>
8084
</div>
8185
<div className="flex-1 p-8 overflow-y-auto flex flex-col justify-start items-start">

‎src/components/dashboard/DashboardMenuTooltip.tsx‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,65 @@
1-
import { Link } from "react-router";
1+
import { Link, useNavigate } from "react-router";
22
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
33
import { DashboardMenuItem } from "./DashboardLayout";
4+
import {
5+
DropdownMenu,
6+
DropdownMenuContent,
7+
DropdownMenuGroup,
8+
DropdownMenuItem,
9+
DropdownMenuLabel,
10+
DropdownMenuTrigger,
11+
} from "../ui/dropdown-menu";
12+
import { UserAuthContext } from "@/context/AuthContext";
413

514
export default function DashboardMenuTooltip({
615
item,
716
isActive = false,
8-
isProfileTooltip = false,
17+
user = null,
18+
logout,
919
}: {
1020
item: DashboardMenuItem;
1121
isActive?: boolean;
12-
isProfileTooltip?: boolean;
22+
user?: UserAuthContext | null;
23+
logout?: () => Promise<void>;
1324
}) {
14-
if (isProfileTooltip) {
25+
const navigate = useNavigate();
26+
27+
const handleLogout = () => {
28+
if (!logout) return;
29+
30+
logout();
31+
navigate("/login");
32+
};
33+
34+
if (user) {
1535
return (
16-
<Tooltip>
17-
<TooltipTrigger className="flex items-center justify-center w-full aspect-square bg-primary text-white rounded-full">
18-
<Link
19-
to={item.path}
20-
className="flex items-center justify-center w-full h-full"
36+
<>
37+
<DropdownMenu>
38+
<DropdownMenuTrigger asChild>
39+
<div className="flex items-center justify-center w-full aspect-square bg-primary text-white rounded-full cursor-pointer">
40+
{item.icon}
41+
</div>
42+
</DropdownMenuTrigger>
43+
<DropdownMenuContent
44+
className="w-56 z-50 ml-4 p-2 bg-card"
45+
side="right"
46+
align="end"
2147
>
22-
{item.icon}
23-
</Link>
24-
</TooltipTrigger>
25-
<TooltipContent side="right">
26-
<p>{item.name}</p>
27-
</TooltipContent>
28-
</Tooltip>
48+
<DropdownMenuLabel>
49+
<p>
50+
{user?.firstName} {user?.lastName}
51+
</p>
52+
<p>Administrateur</p>
53+
</DropdownMenuLabel>
54+
<DropdownMenuGroup>
55+
<DropdownMenuItem>Paramètres</DropdownMenuItem>
56+
<DropdownMenuItem onClick={() => handleLogout()}>
57+
Déconnexion
58+
</DropdownMenuItem>
59+
</DropdownMenuGroup>
60+
</DropdownMenuContent>
61+
</DropdownMenu>
62+
</>
2963
);
3064
}
3165

‎src/components/dashboard/InputWithLabel.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,34 @@ interface InputWithLabelProps
99
readonly error?: string;
1010
}
1111

12-
function InputWithLabelFunc({ label, id, name, className, error, ...props }: InputWithLabelProps,ref: React.Ref<HTMLInputElement>) {
12+
function InputWithLabelFunc(
13+
{ label, id, name, className, error, ...props }: InputWithLabelProps,
14+
ref: React.Ref<HTMLInputElement>
15+
) {
1316
const inputId = id || name;
1417

1518
return (
16-
<div className={cn("flex flex-col gap-1 w-full max-w-sm", className)}>
17-
<Label htmlFor={inputId} className={cn("text-sm font-medium text-gray-800", error && "text-red-600")}>
19+
<div className={cn("flex flex-col gap-2 w-full", className)}>
20+
<Label
21+
htmlFor={inputId}
22+
className={cn(
23+
"text-base font-normal text-gray-800",
24+
error && "text-red-600"
25+
)}
26+
>
1827
{label} {props.required && "*"}
1928
</Label>
20-
<Input id={inputId} name={name} aria-invalid={!!error} ref={ref} {...props}
21-
className={cn(error && "border-red-500 focus-visible:ring-red-500", className)}/>
29+
<Input
30+
id={inputId}
31+
name={name}
32+
aria-invalid={!!error}
33+
ref={ref}
34+
{...props}
35+
className={cn(
36+
error && "border-red-500 focus-visible:ring-red-500",
37+
className
38+
)}
39+
/>
2240
{error && <p className="text-sm text-red-500 mt-1">{error}</p>}
2341
</div>
2442
);

‎src/components/ui/card.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as React from "react"
1+
import * as React from "react";
22

3-
import { cn } from "@/lib/utils"
3+
import { cn } from "@/lib/utils";
44

55
function Card({ className, ...props }: React.ComponentProps<"div">) {
66
return (
@@ -12,7 +12,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
1212
)}
1313
{...props}
1414
/>
15-
)
15+
);
1616
}
1717

1818
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -25,7 +25,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
2525
)}
2626
{...props}
2727
/>
28-
)
28+
);
2929
}
3030

3131
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
3535
className={cn("leading-none font-semibold", className)}
3636
{...props}
3737
/>
38-
)
38+
);
3939
}
4040

4141
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
4545
className={cn("text-muted-foreground text-sm", className)}
4646
{...props}
4747
/>
48-
)
48+
);
4949
}
5050

5151
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -58,7 +58,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
5858
)}
5959
{...props}
6060
/>
61-
)
61+
);
6262
}
6363

6464
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
6868
className={cn("px-6", className)}
6969
{...props}
7070
/>
71-
)
71+
);
7272
}
7373

7474
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
7878
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
7979
{...props}
8080
/>
81-
)
81+
);
8282
}
8383

8484
export {
@@ -89,4 +89,4 @@ export {
8989
CardAction,
9090
CardDescription,
9191
CardContent,
92-
}
92+
};

0 commit comments

Comments
 (0)