💄 Standardize text input styles

n1ckoates · Sep 28, 2024 · 00906f7 · 00906f7
1 parent 63b168c
commit 00906f7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/app/blog/Search.tsx b/app/blog/Search.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import Image from "next/image";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Fuse from "fuse.js";
+import TextInput from "@/components/TextInput";
 
 type PartialBlogPost = {
 	slug: string;
@@ -16,7 +17,7 @@ type PartialBlogPost = {
 	title: string;
 	summary: string;
 	blurDataURL: string;
-}
+};
 
 export default function Search({
 	title,
@@ -45,10 +46,9 @@ export default function Search({
 				<h2 className="text-3xl font-extrabold md:text-4xl">{title}</h2>
 
 				<div className="relative w-full lg:w-2/3">
-					<input
-						type="text"
+					<TextInput
 						name="search"
-						className="w-full rounded-md border border-zinc-200 px-4 py-2 drop-shadow dark:border-zinc-800 dark:bg-zinc-900"
+						className="w-full rounded-md"
 						placeholder="Search posts..."
 						aria-label="Search posts"
 						onChange={(e) => setSearchTerm(e.target.value)}
@@ -78,7 +78,7 @@ export default function Search({
 						/>
 
 						<div className="flex flex-col justify-between gap-1 bg-gradient-to-b from-transparent to-zinc-950 p-4 text-white ease-in-out lg:flex-row">
-							<div className="text-zinc-300 md:text-lg ">
+							<div className="text-zinc-300 md:text-lg">
 								<time
 									dateTime={post.date.toISOString()}
 									className="whitespace-pre after:content-['_•_'] lg:after:content-['\A']"

diff --git a/app/components/NewsletterForm.tsx b/app/components/NewsletterForm.tsx
@@ -4,6 +4,7 @@ import { IconLoader2, IconMail } from "@tabler/icons-react";
 import clsx from "clsx";
 import { subscribe, type State } from "@/lib/actions";
 import { useActionState } from "react";
+import TextInput from "@/components/TextInput";
 
 export default function NewsletterForm({
 	title = "Subscribe to my newsletter",
@@ -44,8 +45,8 @@ export default function NewsletterForm({
 				)}
 				action={formAction}
 			>
-				<input
-					className="box-border flex grow flex-row items-center justify-center gap-2 rounded-xl border border-zinc-400/50 bg-white px-4 py-2 placeholder-zinc-500 drop-shadow-sm hover:border-zinc-500/50 disabled:opacity-70 dark:border-zinc-600/50 dark:bg-zinc-900 dark:placeholder-zinc-500 dark:hover:border-zinc-500/50"
+				<TextInput
+					className="grow rounded-xl"
 					type="email"
 					id="email"
 					name="email"

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+
+export default function TextInput(
+	props: React.InputHTMLAttributes<HTMLInputElement>,
+) {
+	return (
+		<input
+			{...props}
+			type="text"
+			className={clsx(
+				"box-border border border-zinc-400/50 bg-white px-4 py-2 placeholder-zinc-500 drop-shadow-sm focus-within:outline-none hover:border-zinc-500/50 focus:border-blue-500 dark:border-zinc-600/50 dark:bg-zinc-900 dark:placeholder-zinc-500 dark:hover:border-zinc-500/50 dark:focus:border-blue-500",
+				props.className,
+			)}
+		/>
+	);
+}