further improve icons and things

Author: kentcdodds

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

@@ -27,6 +27,8 @@ const buttonStyles = cva(
 					'hover:bg-button/10',
 					'active:bg-button/20',
 				],
+			},
+			status: {
 				success: [
 					'bg-success-background text-success-foreground',
 					'hover:bg-success-background/90',
@@ -52,23 +54,31 @@ const buttonStyles = cva(
 
 export function Button({
 	variant,
+	status,
 	icon,
 	className,
 	...props
 }: ButtonHTMLAttributes<HTMLButtonElement> &
 	VariantProps<typeof buttonStyles>) {
 	return (
-		<button className={buttonStyles({ variant, icon, className })} {...props} />
+		<button
+			className={buttonStyles({ variant, status, icon, className })}
+			{...props}
+		/>
 	)
 }
 
-export function LinkButton({
+export function ButtonLink({
 	variant,
+	status,
 	icon,
 	className,
 	...props
 }: LinkProps & VariantProps<typeof buttonStyles>) {
 	return (
-		<Link className={buttonStyles({ variant, icon, className })} {...props} />
+		<Link
+			className={buttonStyles({ variant, status, icon, className })}
+			{...props}
+		/>
 	)
 }

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

@@ -16,6 +16,20 @@ export function ArrowLeftIcon({ title, ...props }: IconProps) {
 	)
 }
 
+export function ArrowRightIcon({ title, ...props }: IconProps) {
+	return (
+		<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
+			{title ? <title>{title}</title> : null}
+			<path
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth={2}
+				d="M9 5l7 7-7 7"
+			/>
+		</svg>
+	)
+}
+
 export function PhoneIcon({ title, ...props }: IconProps) {
 	return (
 		<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>

exercises/99.final/01.solution.final/src/routes.tsx

@@ -1,4 +1,9 @@
-import { createBrowserRouter } from 'react-router'
+import {
+	createBrowserRouter,
+	createRoutesFromElements,
+	Route,
+} from 'react-router'
+import { NotFoundRoute } from './routes/404.tsx'
 import { AppLayout } from './routes/app/layout.tsx'
 import { AboutRoute } from './routes/app/marketing/about.tsx'
 import { HomepageRoute } from './routes/app/marketing/homepage.tsx'
@@ -8,39 +13,20 @@ import { RecipientRoute } from './routes/app/recipient.tsx'
 import { RecipientsRoute } from './routes/app/recipients.tsx'
 import { SignupRoute } from './routes/signup.tsx'
 
-export const router = createBrowserRouter([
-	{
-		element: <AppLayout />,
-		children: [
-			{
-				element: <MarketingLayout />,
-				children: [
-					{
-						index: true,
-						element: <HomepageRoute />,
-					},
-					{
-						path: 'about',
-						element: <AboutRoute />,
-					},
-				],
-			},
-			{
-				path: 'recipients',
-				element: <RecipientsRoute />,
-			},
-			{
-				path: 'recipients/new',
-				element: <NewRecipientRoute />,
-			},
-			{
-				path: 'recipients/:id',
-				element: <RecipientRoute />,
-			},
-		],
-	},
-	{
-		path: '/signup',
-		element: <SignupRoute />,
-	},
-])
+export const router = createBrowserRouter(
+	createRoutesFromElements(
+		<Route>
+			<Route element={<AppLayout />}>
+				<Route element={<MarketingLayout />}>
+					<Route index element={<HomepageRoute />} />
+					<Route path="about" element={<AboutRoute />} />
+				</Route>
+				<Route path="recipients" element={<RecipientsRoute />} />
+				<Route path="recipients/new" element={<NewRecipientRoute />} />
+				<Route path="recipients/:id" element={<RecipientRoute />} />
+			</Route>
+			<Route path="/signup" element={<SignupRoute />} />
+			<Route path="*" element={<NotFoundRoute />} />
+		</Route>,
+	),
+)

exercises/99.final/01.solution.final/src/routes/404.tsx

@@ -0,0 +1,13 @@
+import { ButtonLink } from '#src/components/button.tsx'
+
+export function NotFoundRoute() {
+	return (
+		<div className="flex min-h-screen flex-col items-center justify-center gap-4">
+			<h1 className="text-4xl font-bold">404 - Page Not Found</h1>
+			<p className="text-lg opacity-80">
+				Sorry, we couldn't find the page you're looking for.
+			</p>
+			<ButtonLink to="/">Go back home</ButtonLink>
+		</div>
+	)
+}

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

@@ -1,5 +1,5 @@
 import { Link, Outlet } from 'react-router'
-import { LinkButton } from '#src/components/button.tsx'
+import { ButtonLink } from '#src/components/button.tsx'
 
 export function AppLayout() {
 	return (
@@ -13,7 +13,7 @@ export function AppLayout() {
 						gratitext
 					</Link>
 					<nav>
-						<LinkButton to="/recipients">Recipients</LinkButton>
+						<ButtonLink to="/recipients">Recipients</ButtonLink>
 					</nav>
 				</div>
 			</header>

exercises/99.final/01.solution.final/src/routes/app/marketing/homepage.tsx

@@ -1,4 +1,4 @@
-import { LinkButton } from '#src/components/button.tsx'
+import { ButtonLink } from '#src/components/button.tsx'
 
 export function HomepageRoute() {
 	return (
@@ -12,9 +12,9 @@ export function HomepageRoute() {
 					love and gratitude.
 				</p>
 				<div>
-					<LinkButton to="/signup" variant="secondary">
+					<ButtonLink to="/signup" variant="secondary">
 						Get Started
-					</LinkButton>
+					</ButtonLink>
 				</div>
 			</div>
 			<div className="order-1 mx-16 flex justify-center md:order-2 md:mx-0">

exercises/99.final/01.solution.final/src/routes/app/new-recipient.tsx

@@ -120,7 +120,7 @@ export function NewRecipientRoute() {
 					</Icon>
 				</div>
 
-				<Button type="submit" variant="success">
+				<Button type="submit" status="success">
 					<Icon name="Plus">Add New Recipient</Icon>
 				</Button>
 			</form>

exercises/99.final/01.solution.final/src/routes/app/recipients.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router'
-import { Button, LinkButton } from '#src/components/button.tsx'
+import { Button, ButtonLink } from '#src/components/button.tsx'
 import { Icon } from '#src/components/icon.tsx'
 
 const recipients = [
@@ -31,15 +31,15 @@ export function RecipientsRoute() {
 		<div className="container mx-auto p-4 md:p-8">
 			<div className="mb-8 flex items-center justify-between">
 				<h1 className="text-4xl font-bold">Recipients</h1>
-				<LinkButton
+				<ButtonLink
 					to="/recipients/new"
 					className="hidden items-center gap-2 md:flex"
 				>
 					<Icon name="Plus">Add New Recipient</Icon>
-				</LinkButton>
-				<LinkButton icon to="/recipients/new" className="md:hidden">
+				</ButtonLink>
+				<ButtonLink icon to="/recipients/new" className="md:hidden">
 					<Icon name="Plus" />
-				</LinkButton>
+				</ButtonLink>
 			</div>
 
 			{/* Table view (hidden on mobile) */}

exercises/99.final/01.solution.final/src/routes/signup.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router'
 import { Button } from '#src/components/button.tsx'
+import { Icon } from '#src/components/icon.tsx'
 
 export function SignupRoute() {
 	return (
@@ -48,21 +49,10 @@ export function SignupRoute() {
 							<Button
 								type="submit"
 								className="flex w-full items-center justify-center gap-2"
+								status="success"
 							>
 								<span>Continue</span>
-								<svg
-									className="h-5 w-5"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M9 5l7 7-7 7"
-									/>
-								</svg>
+								<Icon name="ArrowRight" size="md" />
 							</Button>
 						</div>
 					</form>