Skip to content

Commit 430a4e5

Browse files
SatooRu65536SatooRu65536
authored
feat: ヘッダーにログインボタン追加 (#34)
1 parent 431dbdb commit 430a4e5

File tree

3 files changed

+84
-65
lines changed

3 files changed

+84
-65
lines changed

Diff for: ‎app/components/Header/AvatarMenu/index.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import type { AuthUser } from '@/services/auth.server';
2+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
3+
import {
4+
DropdownMenu,
5+
DropdownMenuContent,
6+
DropdownMenuItem,
7+
DropdownMenuTrigger,
8+
} from '@/components/ui/dropdown-menu';
9+
import { Link } from '@remix-run/react';
10+
11+
interface Props {
12+
user: AuthUser;
13+
}
14+
15+
export default function AvatarMenu({ user }: Props) {
16+
return (
17+
18+
<DropdownMenu>
19+
<DropdownMenuTrigger>
20+
<Avatar>
21+
<AvatarImage src={user.iconUrl} />
22+
<AvatarFallback>{user.name}</AvatarFallback>
23+
</Avatar>
24+
</DropdownMenuTrigger>
25+
26+
<DropdownMenuContent>
27+
<DropdownMenuItem>
28+
<Link to="/">トップへ</Link>
29+
</DropdownMenuItem>
30+
31+
<DropdownMenuItem>
32+
<Link to="/member">プロフィール</Link>
33+
</DropdownMenuItem>
34+
35+
<DropdownMenuItem>
36+
<Link to="/logout">ログアウト</Link>
37+
</DropdownMenuItem>
38+
</DropdownMenuContent>
39+
</DropdownMenu>
40+
);
41+
}

Diff for: ‎app/components/Header/index.tsx

+10-30
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import authUserContext from '@/components/AuthContext';
2-
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
3-
import {
4-
DropdownMenu,
5-
DropdownMenuContent,
6-
DropdownMenuItem,
7-
DropdownMenuTrigger,
8-
} from '@/components/ui/dropdown-menu';
9-
import { Link } from '@remix-run/react';
2+
import AvatarMenu from '@/components/Header/AvatarMenu';
3+
import { Button } from '@/components/ui/button';
4+
import { Form, Link } from '@remix-run/react';
105
import { useContext } from 'react';
116

127
export default function Header() {
@@ -17,28 +12,13 @@ export default function Header() {
1712
<Link to="/">名簿システム</Link>
1813

1914
<div className="ml-auto flex items-center">
20-
<DropdownMenu>
21-
<DropdownMenuTrigger>
22-
<Avatar>
23-
<AvatarImage src={user?.iconUrl} />
24-
<AvatarFallback>{user?.name}</AvatarFallback>
25-
</Avatar>
26-
</DropdownMenuTrigger>
27-
28-
<DropdownMenuContent>
29-
<DropdownMenuItem>
30-
<Link to="/">トップへ</Link>
31-
</DropdownMenuItem>
32-
33-
<DropdownMenuItem>
34-
<Link to="/member">プロフィール</Link>
35-
</DropdownMenuItem>
36-
37-
<DropdownMenuItem>
38-
<Link to="/logout">ログアウト</Link>
39-
</DropdownMenuItem>
40-
</DropdownMenuContent>
41-
</DropdownMenu>
15+
{user
16+
? <AvatarMenu user={user} />
17+
: (
18+
<Form action="/auth/login" method="post">
19+
<Button className="text-primary" size="sm" variant="outline">ログイン</Button>
20+
</Form>
21+
)}
4222
</div>
4323
</header>
4424
);

Diff for: ‎app/components/ui/button.tsx

+33-35
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,55 @@
1-
import * as React from "react"
2-
import { Slot } from "@radix-ui/react-slot"
3-
import { cva, type VariantProps } from "class-variance-authority"
1+
import { cn } from '@/lib/utils';
2+
import { Slot } from '@radix-ui/react-slot';
3+
import { cva, type VariantProps } from 'class-variance-authority';
44

5-
import { cn } from "@/lib/utils"
5+
import * as React from 'react';
66

77
const buttonVariants = cva(
8-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8+
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
99
{
1010
variants: {
1111
variant: {
1212
default:
13-
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
13+
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
1414
destructive:
15-
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
15+
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
1616
outline:
17-
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
17+
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
1818
secondary:
19-
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20-
ghost: "hover:bg-accent hover:text-accent-foreground",
21-
link: "text-primary underline-offset-4 hover:underline",
19+
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
20+
ghost: 'hover:bg-accent hover:text-accent-foreground',
21+
link: 'text-primary underline-offset-4 hover:underline',
2222
},
2323
size: {
24-
default: "h-9 px-4 py-2",
25-
sm: "h-8 rounded-md px-3 text-xs",
26-
lg: "h-10 rounded-md px-8",
27-
icon: "h-9 w-9",
24+
default: 'h-9 px-4 py-2',
25+
sm: 'h-8 rounded-md px-3 text-xs',
26+
lg: 'h-10 rounded-md px-8',
27+
icon: 'size-9',
2828
},
2929
},
3030
defaultVariants: {
31-
variant: "default",
32-
size: "default",
31+
variant: 'default',
32+
size: 'default',
3333
},
34-
}
35-
)
34+
},
35+
);
3636

3737
export interface ButtonProps
3838
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39-
VariantProps<typeof buttonVariants> {
40-
asChild?: boolean
39+
VariantProps<typeof buttonVariants> {
40+
asChild?: boolean;
4141
}
4242

43-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44-
({ className, variant, size, asChild = false, ...props }, ref) => {
45-
const Comp = asChild ? Slot : "button"
46-
return (
47-
<Comp
48-
className={cn(buttonVariants({ variant, size, className }))}
49-
ref={ref}
50-
{...props}
51-
/>
52-
)
53-
}
54-
)
55-
Button.displayName = "Button"
43+
function Button({ ref, className, variant, size, asChild = false, ...props }: ButtonProps & { ref?: React.RefObject<HTMLButtonElement> }) {
44+
const Comp = asChild ? Slot : 'button';
45+
return (
46+
<Comp
47+
className={cn(buttonVariants({ variant, size, className }))}
48+
ref={ref}
49+
{...props}
50+
/>
51+
);
52+
}
53+
Button.displayName = 'Button';
5654

57-
export { Button, buttonVariants }
55+
export { Button, buttonVariants };

0 commit comments

Comments
 (0)