sam/fullstack-fuware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Sam Liu
2025-12-12 17:10:54 +07:00
commit 2c244b77fb
53 changed files with 13115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/components/Header.tsx Normal file
View File

@@ -0,0 +1,231 @@
import { Link } from '@tanstack/react-router'
import { useState } from 'react'
import {
ChevronDown,
ChevronRight,
ClipboardType,
Database,
Home,
Menu,
Network,
SquareFunction,
StickyNote,
X,
} from 'lucide-react'
export default function Header() {
const [isOpen, setIsOpen] = useState(false)
const [groupedExpanded, setGroupedExpanded] = useState<
Record<string, boolean>
>({})
return (
<>
<header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
<button
onClick={() => setIsOpen(true)}
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
aria-label="Open menu"
>
<Menu size={24} />
</button>
<h1 className="ml-4 text-xl font-semibold">
<Link to="/">
<img
src="/tanstack-word-logo-white.svg"
alt="TanStack Logo"
className="h-10"
/>
</Link>
</h1>
</header>
<aside
className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
isOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<h2 className="text-xl font-bold">Navigation</h2>
<button
onClick={() => setIsOpen(false)}
className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
aria-label="Close menu"
>
<X size={24} />
</button>
</div>
<nav className="flex-1 p-4 overflow-y-auto">
<Link
to="/"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<Home size={20} />
<span className="font-medium">Home</span>
</Link>
{/* Demo Links Start */}
<Link
to="/demo/prisma"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<Database size={20} />
<span className="font-medium">Prisma</span>
</Link>
<Link
to="/demo/form/simple"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<ClipboardType size={20} />
<span className="font-medium">Simple Form</span>
</Link>
<Link
to="/demo/form/address"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<ClipboardType size={20} />
<span className="font-medium">Address Form</span>
</Link>
<Link
to="/demo/start/server-funcs"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<SquareFunction size={20} />
<span className="font-medium">Start - Server Functions</span>
</Link>
<Link
to="/demo/start/api-request"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<Network size={20} />
<span className="font-medium">Start - API Request</span>
</Link>
<div className="flex flex-row justify-between">
<Link
to="/demo/start/ssr"
onClick={() => setIsOpen(false)}
className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<StickyNote size={20} />
<span className="font-medium">Start - SSR Demos</span>
</Link>
<button
className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
onClick={() =>
setGroupedExpanded((prev) => ({
...prev,
StartSSRDemo: !prev.StartSSRDemo,
}))
}
>
{groupedExpanded.StartSSRDemo ? (
<ChevronDown size={20} />
) : (
<ChevronRight size={20} />
)}
</button>
</div>
{groupedExpanded.StartSSRDemo && (
<div className="flex flex-col ml-4">
<Link
to="/demo/start/ssr/spa-mode"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<StickyNote size={20} />
<span className="font-medium">SPA Mode</span>
</Link>
<Link
to="/demo/start/ssr/full-ssr"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<StickyNote size={20} />
<span className="font-medium">Full SSR</span>
</Link>
<Link
to="/demo/start/ssr/data-only"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<StickyNote size={20} />
<span className="font-medium">Data Only</span>
</Link>
</div>
)}
<Link
to="/demo/tanstack-query"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
}}
>
<Network size={20} />
<span className="font-medium">TanStack Query</span>
</Link>
{/* Demo Links End */}
</nav>
</aside>
</>
)
}