Split View

'use client';
 
import { createContext, useContext, useState } from 'react';
import { Box, Row } from '@umami/react-zen';
 
const SplitViewContext = createContext({
  selectedId: null,
  setSelectedId: () => {},
});
 
export function useSplitView() {
  return useContext(SplitViewContext);
}
 
export function SplitView({ defaultSelectedId = null, children, ...props }) {
  const [selectedId, setSelectedId] = useState(defaultSelectedId);
 
  return (
    <SplitViewContext.Provider value={{ selectedId, setSelectedId }}>
      <Row height="100%" {...props}>
        {children}
      </Row>
    </SplitViewContext.Provider>
  );
}
 
export function SplitViewList({ width = '20rem', children, ...props }) {
  return (
    <Box
      width={width}
      height="100%"
      borderColor="muted"
      border="right"
      overflow="auto"
      flexShrink="0"
      {...props}
    >
      {children}
    </Box>
  );
}
 
export function SplitViewItem({ id, children, ...props }) {
  const { selectedId, setSelectedId } = useSplitView();
  const isSelected = selectedId === id;
 
  return (
    <Box
      padding="3"
      borderColor="muted"
      border="bottom"
      backgroundColor={isSelected ? 'interactive' : undefined}
      className={`cursor-pointer ${!isSelected ? 'hover:bg-interactive' : ''}`}
      onClick={() => setSelectedId(id)}
      {...props}
    >
      {children}
    </Box>
  );
}
 
export function SplitViewDetail({ children, emptyState, ...props }) {
  const { selectedId } = useSplitView();
 
  return (
    <Box flexGrow="1" height="100%" overflow="auto" {...props}>
      {selectedId ? children : emptyState}
    </Box>
  );
}