@schandlergarcia/sf-web-components 1.0.15 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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,46 +1,15 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { Button } from '@schandlergarcia/sf-web-components';
+import { RocketLaunchIcon } from "@heroicons/react/24/outline";
+import { EmptyState } from '@schandlergarcia/sf-web-components';
 
 export default function HomePage() {
-	const navigate = useNavigate();
-	const [searchText, setSearchText] = useState("");
-
-	const handleSearch = (e: React.FormEvent) => {
-		e.preventDefault();
-		// Navigate to your search results page
-		console.log("Search:", searchText);
-	};
-
 	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
-			<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">
-						Welcome
-					</h1>
-					<p className="text-lg text-slate-600 dark:text-slate-300">
-						Your application is ready to go.
-					</p>
-				</div>
-				<form onSubmit={handleSearch} className="flex flex-col gap-4 items-center">
-					<div className="flex gap-2 w-full max-w-2xl">
-						<input
-							type="text"
-							value={searchText}
-							onChange={(e) => setSearchText(e.target.value)}
-							placeholder="Search..."
-							className="flex-1 px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
-						/>
-						<Button type="submit">Search</Button>
-					</div>
-					<div className="flex gap-2">
-						<Button variant="outline" onClick={() => navigate("/about")}>
-							Learn More
-						</Button>
-					</div>
-				</form>
-			</div>
+		<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>
 	);
 }

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

@@ -1,21 +1,12 @@
 export default function Search() {
 	return (
-		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+		<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 gap-2">
-					<input
-						type="text"
-						placeholder="Search..."
-						className="flex-1 px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
-					/>
-					<button className="px-4 py-2 bg-slate-900 dark:bg-slate-50 text-white dark:text-slate-900 rounded-lg hover:bg-slate-700 dark:hover:bg-slate-200 transition-colors">
-						Search
-					</button>
-				</div>
+				<p className="text-center text-slate-500 dark:text-slate-400">Search functionality coming soon...</p>
 			</div>
 		</div>
 	);