onixbyte/dev-lab
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: adjust layout and styling for hero and home components to improve responsiveness and visual consistency

Browse Source
This commit is contained in:
Zihlu Wang
2026-01-15 16:01:37 +08:00
parent 2b2d842588
commit 8ea40da231
2 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/hero-layout/index.tsx
+3 -3
View File
@@ -10,7 +10,7 @@ export default function HeroLayout() {
const today = useMemo(() => dayjs(), []) const today = useMemo(() => dayjs(), [])
return ( return (
<div className="min-h-screen bg-gray-50 flex flex-col"> <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
{/* Navigation Header */} {/* Navigation Header */}
<header className="bg-white shadow-sm border-b"> <header className="bg-white shadow-sm border-b">
<div className="px-4"> <div className="px-4">
@@ -45,12 +45,12 @@ export default function HeroLayout() {
</header> </header>
{/* Main Content Area */} {/* Main Content Area */}
<main className="flex-1 p-4 overflow-hidden"> <main className="flex-1 p-4 overflow-hidden min-h-0">
<Outlet /> <Outlet />
</main> </main>
{/* Footer */} {/* Footer */}
<footer className="bg-white border-t mt-auto"> <footer className="bg-white border-t shrink-0">
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8"> <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"> <p className="text-center text-sm text-gray-500">
© 2024-{today.year()} OnixByte. Built with React & TypeScript. © 2024-{today.year()} OnixByte. Built with React & TypeScript.
src/page/home/index.tsx
+17 -14
View File
@@ -71,24 +71,26 @@ export default function Home() {
}, [query, result.matchedValues]) }, [query, result.matchedValues])
return ( return (
<div className="h-full flex gap-4"> <div className="h-full flex gap-4 overflow-hidden">
{/* Left input panel - 40% */} {/* Left panel - 30% */}
<div className="w-2/5 flex flex-col gap-4"> <div className="w-[30%] flex flex-col gap-4 min-h-0">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col"> {/* JSON Source - fills remaining height */}
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200"> <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col min-h-0">
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 shrink-0">
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500"> <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
JSON Source JSON Source
</span> </span>
</div> </div>
<textarea <textarea
className="flex-1 w-full p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none" className="flex-1 w-full p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none overflow-auto"
value={jsonInput} value={jsonInput}
onChange={(e) => setJsonInput(e.target.value)} onChange={(e) => setJsonInput(e.target.value)}
spellCheck={false} spellCheck={false}
/> />
</div> </div>
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4"> {/* JSONPath Expression - fixed height */}
<div className="bg-white rounded-xl shadow-sm border border-slate-200 p-4 shrink-0">
<label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider mb-2"> <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider mb-2">
<span className="text-slate-500">JSONPath Expression</span> <span className="text-slate-500">JSONPath Expression</span>
{result.queryError && ( {result.queryError && (
@@ -109,9 +111,9 @@ export default function Home() {
</div> </div>
</div> </div>
{/* Right visualisation panel - 60% */} {/* Right visualisation panel - 70% */}
<div className="w-3/5 bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden"> <div className="w-[70%] bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden min-h-0">
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center"> <div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center shrink-0">
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500"> <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Visualised Result Visualised Result
</span> </span>
@@ -129,12 +131,13 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed"> <div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed min-h-0">
{result.error ? ( {result.error && (
<div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs"> <div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs mb-4">
<strong>Error:</strong> {result.error} <strong>Error:</strong> {result.error}
</div> </div>
) : ( )}
{result.parsed && (
<JsonTreeNode <JsonTreeNode
data={result.parsed} data={result.parsed}
path={["$"]} path={["$"]}