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(), [])
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 */}
<header className="bg-white shadow-sm border-b">
<div className="px-4">
@@ -45,12 +45,12 @@ export default function HeroLayout() {
</header>
{/* Main Content Area */}
<main className="flex-1 p-4 overflow-hidden">
<main className="flex-1 p-4 overflow-hidden min-h-0">
<Outlet />
</main>
{/* 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">
<p className="text-center text-sm text-gray-500">
© 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])
return (
<div className="h-full flex gap-4">
{/* Left input panel - 40% */}
<div className="w-2/5 flex flex-col gap-4">
<div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex-1 flex flex-col">
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
<div className="h-full flex gap-4 overflow-hidden">
{/* Left panel - 30% */}
<div className="w-[30%] flex flex-col gap-4 min-h-0">
{/* JSON Source - fills remaining height */}
<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">
JSON Source
</span>
</div>
<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}
onChange={(e) => setJsonInput(e.target.value)}
spellCheck={false}
/>
</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">
<span className="text-slate-500">JSONPath Expression</span>
{result.queryError && (
@@ -109,9 +111,9 @@ export default function Home() {
</div>
</div>
{/* Right visualisation panel - 60% */}
<div className="w-3/5 bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
<div className="bg-slate-50 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
{/* Right visualisation panel - 70% */}
<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 shrink-0">
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
Visualised Result
</span>
@@ -129,12 +131,13 @@ export default function Home() {
</div>
</div>
<div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed">
{result.error ? (
<div className="bg-red-50 text-red-600 p-4 rounded-lg border border-red-100 text-xs">
<div className="flex-1 p-6 overflow-auto font-mono text-sm leading-relaxed min-h-0">
{result.error && (
<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}
</div>
) : (
)}
{result.parsed && (
<JsonTreeNode
data={result.parsed}
path={["$"]}