Skip to content

Commit 967a5c7

Browse files
kentcdoddskentcdodds
committed
looking good
1 parent 5e04e18 commit 967a5c7

File tree

6 files changed

+556
-30
lines changed

6 files changed

+556
-30
lines changed

‎exercises/99.final/01.solution.final/src/components/button.tsx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type ButtonHTMLAttributes } from 'react'
33
import { Link, type LinkProps } from 'react-router'
44

55
const buttonStyles = cva(
6-
'rounded-full px-6 py-2 font-medium no-underline transition-colors hover:no-underline focus:no-underline',
6+
'rounded-full font-medium no-underline transition-colors hover:no-underline focus:no-underline',
77
{
88
variants: {
99
variant: {
@@ -17,27 +17,48 @@ const buttonStyles = cva(
1717
'hover:bg-button-secondary-hover',
1818
'active:bg-button-secondary-active',
1919
],
20+
outlined: [
21+
'border-button text-button border bg-transparent',
22+
'hover:bg-button/10',
23+
'active:bg-button/20',
24+
],
25+
borderless: [
26+
'text-button border-none bg-transparent',
27+
'hover:bg-button/10',
28+
'active:bg-button/20',
29+
],
30+
},
31+
icon: {
32+
true: 'flex h-10 w-10 items-center justify-center rounded-full p-2',
33+
false: 'px-6 py-2',
2034
},
2135
},
2236
defaultVariants: {
2337
variant: 'primary',
38+
icon: false,
2439
},
2540
},
2641
)
2742

2843
export function Button({
2944
variant,
45+
icon,
3046
className,
3147
...props
3248
}: ButtonHTMLAttributes<HTMLButtonElement> &
3349
VariantProps<typeof buttonStyles>) {
34-
return <button className={buttonStyles({ variant, className })} {...props} />
50+
return (
51+
<button className={buttonStyles({ variant, icon, className })} {...props} />
52+
)
3553
}
3654

3755
export function LinkButton({
3856
variant,
57+
icon,
3958
className,
4059
...props
4160
}: LinkProps & VariantProps<typeof buttonStyles>) {
42-
return <Link className={buttonStyles({ variant, className })} {...props} />
61+
return (
62+
<Link className={buttonStyles({ variant, icon, className })} {...props} />
63+
)
4364
}

‎exercises/99.final/01.solution.final/src/components/icons.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
type IconProps = React.SVGProps<SVGSVGElement>
2+
3+
export function ArrowLeftIcon(props: IconProps) {
4+
return (
5+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
6+
<path
7+
strokeLinecap="round"
8+
strokeLinejoin="round"
9+
strokeWidth={2}
10+
d="M15 19l-7-7 7-7"
11+
/>
12+
</svg>
13+
)
14+
}
15+
16+
export function PhoneIcon(props: IconProps) {
17+
return (
18+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
19+
<path
20+
strokeLinecap="round"
21+
strokeLinejoin="round"
22+
strokeWidth={2}
23+
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
24+
/>
25+
</svg>
26+
)
27+
}
28+
29+
export function ClockIcon(props: IconProps) {
30+
return (
31+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
32+
<path
33+
strokeLinecap="round"
34+
strokeLinejoin="round"
35+
strokeWidth={2}
36+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
37+
/>
38+
</svg>
39+
)
40+
}
41+
42+
export function SettingsIcon(props: IconProps) {
43+
return (
44+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
45+
<path
46+
strokeLinecap="round"
47+
strokeLinejoin="round"
48+
strokeWidth={2}
49+
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
50+
/>
51+
<path
52+
strokeLinecap="round"
53+
strokeLinejoin="round"
54+
strokeWidth={2}
55+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
56+
/>
57+
</svg>
58+
)
59+
}
60+
61+
export function CheckIcon(props: IconProps) {
62+
return (
63+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
64+
<path
65+
strokeLinecap="round"
66+
strokeLinejoin="round"
67+
strokeWidth={2}
68+
d="M5 13l4 4L19 7"
69+
/>
70+
</svg>
71+
)
72+
}
73+
74+
export function DotsVerticalIcon(props: IconProps) {
75+
return (
76+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
77+
<path
78+
strokeLinecap="round"
79+
strokeLinejoin="round"
80+
strokeWidth={2}
81+
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
82+
/>
83+
</svg>
84+
)
85+
}
86+
87+
export function MessageIcon(props: IconProps) {
88+
return (
89+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
90+
<path
91+
strokeLinecap="round"
92+
strokeLinejoin="round"
93+
strokeWidth={2}
94+
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4-4-4z"
95+
/>
96+
</svg>
97+
)
98+
}
99+
100+
export function PlusIcon(props: IconProps) {
101+
return (
102+
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
103+
<path
104+
strokeLinecap="round"
105+
strokeLinejoin="round"
106+
strokeWidth={2}
107+
d="M12 4v16m8-8H4"
108+
/>
109+
</svg>
110+
)
111+
}

‎exercises/99.final/01.solution.final/src/routes/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { LinkButton } from '#src/components/button.tsx'
33

44
export function AppLayout() {
55
return (
6-
<div className="bg-background flex min-h-screen flex-col">
6+
<div className="bg-background flex h-screen flex-col overflow-hidden">
77
<header className="bg-background-alt px-4 py-3">
88
<div className="container mx-auto flex max-w-6xl items-center justify-between">
99
<Link
@@ -18,7 +18,7 @@ export function AppLayout() {
1818
</div>
1919
</header>
2020

21-
<div className="flex flex-1 flex-col">
21+
<div className="flex min-h-0 flex-1 flex-grow flex-col">
2222
<Outlet />
2323
</div>
2424
</div>

0 commit comments

Comments
 (0)