"use client"

import {
  Breadcrumbs,
  Divider,
  Paper,
  Stack,
  UnstyledButton,
  Text,
} from "@mantine/core"

export default function ComponentBasePlacementPage() {
  const items = [{ title: "布局组件" }].map((item) => (
    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
  ))

  return (
    <>
      <Stack w="100%" h="calc(100vh - 56px)" p="md">
        <Breadcrumbs>{items}</Breadcrumbs>
        <Paper shadow="xs" p="0" flex={1} display="flex">
          <Stack flex={1}>
            <Stack flex={1} justify="center" align="center">
              <Text c="dimmed">空</Text>
            </Stack>
          </Stack>
          <Divider orientation="vertical"></Divider>
          <Stack flex={2}></Stack>
        </Paper>
      </Stack>
    </>
  )
}