Split Page

'use client'

import { Text } from '@chakra-ui/react'
import { EmptyState } from '#components/ui/empty-state'
import { Page } from '#components/ui/page'
import { SplitPage } from '#components/ui/split-page'
import { LuInbox } from 'react-icons/lu'

export const SplitPageBasic = () => {
  return (
    <SplitPage height="320px" borderWidth="1px" rounded="l3">
      <Page.Root borderRightWidth="1px" width="40%" maxW="240px">
        <Page.Header title="Inbox" />
        <Page.Body p="4">
          <Text textStyle="sm">Select an item</Text>
        </Page.Body>
      </Page.Root>
      <EmptyState
        icon={<LuInbox />}
        title="Inbox zero"
        description="Nothing to do here"
      />
    </SplitPage>
  )
}

'use client'

import { Text } from '@chakra-ui/react'
import { Page } from '#components/ui/page'
import { SplitPage } from '#components/ui/split-page'

export const SplitPageWithContent = () => {
  return (
    <SplitPage height="320px" borderWidth="1px" rounded="l3">
      <Page.Root borderRightWidth="1px" width="40%" maxW="240px">
        <Page.Header title="Inbox" />
        <Page.Body p="4">
          <Text textStyle="sm">Elliot Alderson</Text>
        </Page.Body>
      </Page.Root>
      <Page.Root>
        <Page.Header
          title="Elliot Alderson"
          description="A bug is never just a mistake"
        />
        <Page.Body>
          <Text textStyle="sm">
            Detail content for the selected conversation.
          </Text>
        </Page.Body>
      </Page.Root>
    </SplitPage>
  )
}

'use client'

import { Button, Text } from '@chakra-ui/react'
import { Page } from '#components/ui/page'
import { SplitPage, useSplitPage } from '#components/ui/split-page'

const DetailPane = () => {
  const { onClose } = useSplitPage()

  return (
    <Page.Root>
      <Page.Header
        title="Elliot Alderson"
        description="Conversation detail"
        actions={
          <Button size="xs" variant="ghost" onClick={onClose}>
            Close
          </Button>
        }
      />
      <Page.Body>
        <Text textStyle="sm">Detail content</Text>
      </Page.Body>
    </Page.Root>
  )
}

const ListPane = () => {
  const { onOpen } = useSplitPage()

  return (
    <Page.Root borderRightWidth="1px" width="40%" maxW="240px">
      <Page.Header title="Inbox" />
      <Page.Body p="4">
        <Button size="sm" variant="outline" onClick={onOpen}>
          Open detail
        </Button>
      </Page.Body>
    </Page.Root>
  )
}

export const SplitPageResponsive = () => {
  return (
    <SplitPage
      defaultOpen={false}
      mobile
      height="320px"
      borderWidth="1px"
      rounded="l3"
    >
      <ListPane />
      <DetailPane />
    </SplitPage>
  )
}