Split Page

import React, { useState } from 'react'
import { SplitPage, SplitPageList, SplitPageDetail } from '@otfdashkit/ui/layouts-split-page'

const emails = ['Team meeting notes', 'Q4 report draft', 'Design review feedback', 'Onboarding docs', 'Release changelog']

export function Example() {
  const [active, setActive] = useState(0)
  return (
    <div className="border border-[hsl(var(--border))] rounded-lg overflow-hidden" style={{ height: 400 }}>
      <SplitPage>
        <SplitPageList width="260px">
          {emails.map((title, i) => (
            <div
              key={i}
              onClick={() => setActive(i)}
              className={`px-4 py-3 cursor-pointer border-b border-[hsl(var(--border))] ${i === active ? 'bg-[hsl(var(--accent))]' : 'hover:bg-[hsl(var(--accent))]'}`}
            >
              <div className="text-sm font-medium text-[hsl(var(--foreground))] truncate">{title}</div>
              <div className="text-xs text-[hsl(var(--muted-foreground))] mt-0.5">2 hours ago</div>
            </div>
          ))}
        </SplitPageList>
        <SplitPageDetail>
          <div className="p-6">
            <h2 className="text-lg font-semibold text-[hsl(var(--foreground))]">{emails[active]}</h2>
            <p className="text-sm text-[hsl(var(--muted-foreground))] mt-2">This is the detail view for "{emails[active]}". Select an item from the list to view its contents here.</p>
          </div>
        </SplitPageDetail>
      </SplitPage>
    </div>
  )
}