Page

'use client'

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

export const PageBasic = () => {
  return (
    <Page.Root height="320px" borderWidth="1px" rounded="l3">
      <Page.Header title="Users" description="Manage your team members" />
      <Page.Body>
        <Text textStyle="sm">Page content goes here.</Text>
      </Page.Body>
    </Page.Root>
  )
}

'use client'

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

export const PageWithActions = () => {
  return (
    <Page.Root height="320px" borderWidth="1px" rounded="l3">
      <Page.Header
        title="Users"
        description="Manage your team members"
        actions={
          <ButtonGroup justifyContent="flex-end">
            <Button variant="glass" colorPalette="accent" size="sm">
              Invite
            </Button>
          </ButtonGroup>
        }
      />
      <Page.Body>
        <Text textStyle="sm">Page content goes here.</Text>
      </Page.Body>
    </Page.Root>
  )
}

'use client'

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

export const PageSettings = () => {
  return (
    <Page.Root variant="settings" height="320px" borderWidth="1px" rounded="l3">
      <Page.Header
        title="Settings"
        description="Manage your workspace preferences"
      />
      <Page.Body>
        <Text textStyle="sm">Settings content goes here.</Text>
      </Page.Body>
    </Page.Root>
  )
}

'use client'

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

export const PageLoading = () => {
  return (
    <Page.Root loading height="320px" borderWidth="1px" rounded="l3">
      <Page.Header title="Users" />
      <Page.Body>
        <Text textStyle="sm">This content is hidden while loading.</Text>
      </Page.Body>
    </Page.Root>
  )
}