@schandlergarcia/sf-web-components 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/src/templates/pages/Home.tsx.template

@@ -1,15 +1,54 @@
-import { RocketLaunchIcon } from "@heroicons/react/24/outline";
-import { EmptyState } from '@schandlergarcia/sf-web-components';
+import { useState } from "react";
+import { UIInput, UIButton } from '@schandlergarcia/sf-web-components';
+import { Search } from "lucide-react";
 
 export default function HomePage() {
+	const [searchQuery, setSearchQuery] = useState("");
+
+	const handleSearch = () => {
+		const trimmed = searchQuery.trim();
+		if (trimmed) {
+			console.log("Search:", trimmed);
+			// Navigate to your search results page
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleSearch();
+		}
+	};
+
 	return (
-		<div className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-950 transition-colors">
-			<EmptyState
-				size="lg"
-				icon={<RocketLaunchIcon className="h-14 w-14" />}
-				heading="Bespoke App Template"
-				body="Component library loaded and ready to go."
-			/>
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
+			<div className="w-full max-w-4xl">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+				</div>
+				<div className="flex flex-col gap-4">
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
+						<UIInput
+							type="text"
+							value={searchQuery}
+							onChange={(e) => setSearchQuery(e.target.value)}
+							onKeyDown={handleKeyDown}
+							placeholder="Search..."
+							className="pl-10 w-full"
+						/>
+					</div>
+					<div className="flex gap-3 justify-center">
+						<UIButton onClick={handleSearch} variant="primary">
+							Search
+						</UIButton>
+						<UIButton onClick={() => console.log("Browse All")} variant="secondary">
+							Browse All
+						</UIButton>
+					</div>
+				</div>
+			</div>
 		</div>
 	);
 }