Initial commit

2026-04-02 09:23:57 +08:00
commit 8b3ccc6a51
36 changed files with 2887 additions and 0 deletions
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+
+/**
+ * Empty layout component that provides minimal structure.
+ * Useful for pages that need full control over their layout.
+ */
+export default function EmptyLayout() {
+  return (
+    <div className="min-h-screen">
+      <Outlet />
+    </div>
+  )
+}
@@ -0,0 +1,64 @@
+import { Outlet, Link } from "react-router-dom"
+import { useMemo } from "react"
+import dayjs from "dayjs"
+
+/**
+ * Main application component that serves as the root layout.
+ * Uses React Router's Outlet to render child routes.
+ */
+export default function HeroLayout() {
+  const today = useMemo(() => dayjs(), [])
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col">
+      {/* Navigation Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <h1 className="text-xl font-semibold text-gray-900">
+                OnixByte React Template
+              </h1>
+            </div>
+            <nav className="flex space-x-8">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Home
+              </Link>
+              <Link
+                to="/about"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                About
+              </Link>
+              <Link
+                to="/contact"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
+              >
+                Contact
+              </Link>
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content Area */}
+      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 grow">
+        <div className="px-4 py-6 sm:px-0">
+          <Outlet />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-white border-t mt-auto">
+        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+          <p className="text-center text-sm text-gray-500">
+            © 2024-{today.year()} OnixByte. Built with React & TypeScript.
+          </p>
+        </div>
+      </footer>
+    </div>
+  )
+}