feat(demo): add npm icon

tommy-mitchell · Aug 18, 2024 · b13a692 · b13a692
1 parent c931a13
commit b13a692
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/demo/src/components/App.tsx b/demo/src/components/App.tsx
@@ -1,4 +1,4 @@
-import { SiGithub } from "@icons-pack/react-simple-icons";
+import { SiGithub, SiNpm } from "@icons-pack/react-simple-icons";
 import About from "../content/about.md";
 import { BoopInput } from "./BoopInput.tsx";
 import { IconButton } from "./IconButton.tsx";
@@ -14,10 +14,13 @@ export function App() {
 						<code>use-boop-simple</code>
 					</h1>
 				</Prose>
-				<nav className="flex flex-wrap gap-3">
+				<nav className="flex flex-wrap gap-3 md:gap-3.5">
 					<ThemeToggle />
-					<IconButton href="https://github.com/tommy-mitchell/use-boop-simple">
-						<SiGithub className="size-7" />
+					<IconButton title="GitHub" href="https://github.com/tommy-mitchell/use-boop-simple">
+						<SiGithub />
+					</IconButton>
+					<IconButton title="npm" href="https://www.npmjs.com/package/use-boop-simple">
+						<SiNpm className="rounded-md p-px" />
 					</IconButton>
 				</nav>
 			</header>

diff --git a/demo/src/components/IconButton.tsx b/demo/src/components/IconButton.tsx
@@ -1,12 +1,14 @@
 import { twMerge } from "tailwind-merge";
+import { VisuallyHidden } from "./VisuallyHidden";
 
 type IconButtonProps = React.PropsWithChildren<{
 	className?: string;
 	href?: string;
+	title: string;
 	onClick?: () => void;
 }>;
 
-export function IconButton({ className, href, onClick, ...props }: IconButtonProps) {
+export function IconButton({ children, className, href, onClick, ...props }: IconButtonProps) {
 	const Component = href ? "a" : "button";
 	const componentProps = href
 		? { href, rel: "noreferrer", target: "_blank" }
@@ -18,13 +20,18 @@ export function IconButton({ className, href, onClick, ...props }: IconButtonPro
 				`
 					grid place-items-center rounded-md outline outline-4 outline-transparent
 					transition-[color,background-color,outline-color,box-shadow] duration-100
+					*:size-7
 					dark:hocus:bg-background-active dark:hocus:outline-background-active dark:hocus:text-accent-500
 					hocus:bg-primary hocus:outline-primary hocus:text-accent-900
+					md:*:size-8
 				`,
 				className,
 			)}
 			{...componentProps}
 			{...props}
-		/>
+		>
+			<VisuallyHidden>{props.title}</VisuallyHidden>
+			{children}
+		</Component>
 	);
 }
diff --git a/demo/src/components/ThemeToggle.tsx b/demo/src/components/ThemeToggle.tsx
@@ -56,8 +56,8 @@ export function ThemeToggle() {
 	const Icon = ICONS_BY_THEME[mode];
 
 	return (
-		<IconButton onClick={handleToggle}>
-			<Icon className="size-7" />
+		<IconButton title={`Change theme (current: ${mode})`} onClick={handleToggle}>
+			<Icon />
 		</IconButton>
 	);
 }