refactor: Simplify Button and Callout components parameters

app/components/Button.tsx

@@ -27,24 +27,19 @@ type ButtonProps = {
 	| (JSX.IntrinsicElements["a"] & { href: string })
 );
 
-export function Button({
+export function Button(props: ButtonProps) {
-	variant = "primary",
+	const className = clsx(
-	size = "md",
+		variantStyles[props.variant ?? "primary"],
-	className,
+		sizeStyles[props.size ?? "md"],
-	...props
-}: ButtonProps) {
-	className = clsx(
-		variantStyles[variant],
-		sizeStyles[size],
 		"cursor-pointer",
-		className,
+		props.className,
 	);
 
 	return "href" in props && props.href ? (
 		<Link
+			{...(props as JSX.IntrinsicElements["a"])}
 			class={className}
 			href={props.href}
-			{...(props as JSX.IntrinsicElements["a"])}
 		/>
 	) : (
 		<button class={className} {...(props as JSX.IntrinsicElements["button"])} />

app/components/Callout.tsx

@@ -31,25 +31,20 @@ const icons = {
 	),
 };
 
-export default function Callout({
+export default function Callout(props: {
-	title,
-	children,
-	type = "note",
-	collapsible = false,
-}: {
 	title: string;
 	children: JSX.Element;
 	type?: keyof typeof styles;
 	collapsible?: boolean;
 }) {
-	const IconComponent = icons[type];
+	const IconComponent = icons[props.type || "note"];
 
 	return (
 		<div
 			class={clsx(
 				"my-8 flex flex-col rounded-3xl p-6",
-				styles[type].container,
+				styles[props.type || "note"].container,
-				{ "cursor-pointer": collapsible },
+				{ "cursor-pointer": props.collapsible },
 			)}
 		>
 			<div class="flex items-center gap-6">
@@ -57,14 +52,16 @@ export default function Callout({
 				<p
 					class={clsx(
 						"!m-0 font-display text-xl text-balance",
-						styles[type].title,
+						styles[props.type || "note"].title,
 					)}
 				>
-					{title}
+					{props.title}
 				</p>
 			</div>
 			<div class="mt-4 flex-auto">
-				<div class={clsx("prose mt-2.5", styles[type].body)}>{children}</div>
+				<div class={clsx("prose mt-2.5", styles[props.type || "note"].body)}>
+					{props.children}
+				</div>
 			</div>
 		</div>
 	);

app/partials/MobileNavigation.tsx

@@ -25,24 +25,24 @@ function MenuIcon(props: JSX.IntrinsicElements["svg"]) {
 function CloseIcon(props: JSX.IntrinsicElements["svg"]) {
 	return (
 		<svg
+			{...props}
 			aria-hidden="true"
 			viewBox="0 0 24 24"
 			fill="none"
 			stroke-width="2"
 			stroke-linecap="round"
-			{...props}
 		>
 			<path d="M5 5l14 14M19 5l-14 14" />
 		</svg>
 	);
 }
 
-function CloseOnNavigation({ close }: { close: () => void }) {
+function CloseOnNavigation(props: { close: () => void }) {
-	const { urlPathname } = usePageContext();
+	const pageContext = usePageContext();
 
 	createEffect(() => {
-		close();
+		props.close();
-	}, [urlPathname, close]);
+	}, [pageContext.urlPathname, props.close]);
 
 	return null;
 }