Two-column layouts for content and detail views
Here's the latest update on the project...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Best regards,
John Doe
Classic list and detail view layout
Two equal columns for comparative content
Narrow sidebar with wide main content
Content list with preview pane
<div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-4 h-screen">
{/* Left Panel */}
<div className="bg-muted p-4">
<AnchorHeading as="h2">List View</AnchorHeading>
<div className="space-y-2">
{items.map(item => (
<div key={item.id} className="p-2 border rounded cursor-pointer">
{item.title}
</div>
))}
</div>
</div>
{/* Right Panel */}
<div className="bg-white p-4">
<AnchorHeading as="h2">Detail View</AnchorHeading>
{selectedItem && (
<div>
<h3>{selectedItem.title}</h3>
<p>{selectedItem.content}</p>
</div>
)}
</div>
</div>const [splitWidth, setSplitWidth] = useState(40)
<div className="grid grid-cols-[var(--split-left)_1fr]"
style={{ '--split-left': `${splitWidth}%` }}>
{/* Resizable Panel */}
<div className="bg-muted p-4 relative">
<div className="content">Left Panel Content</div>
{/* Resize Handle */}
<div className="absolute right-0 top-0 h-full w-1 bg-gray-400 cursor-col-resize"
onMouseDown={handleResizeStart} />
</div>
{/* Main Panel */}
<div className="bg-white p-4">
Right Panel Content
</div>
</div>
// Resize handler
const handleResizeStart = (e) => {
const startX = e.clientX
const startWidth = splitWidth
const handleMouseMove = (e) => {
const deltaX = e.clientX - startX
const newWidth = Math.min(70, Math.max(20, startWidth + (deltaX / window.innerWidth * 100)))
setSplitWidth(newWidth)
}
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', handleMouseMove)
}, { once: true })
}