Table

import { Table, Checkbox, ButtonIcon, TextInput, Badge } from 'sxa-ui'
import { RiArrowRightSLine } from '@remixicon/react'

function Demo() {
  return (
    <Table>
        <Table.Header>
            <Table.Row>
                <Table.Th cellType={Table.cellTypes.checkbox}>
                    <Checkbox />
                </Table.Th>
                <Table.Th>
                    <Table.CellText>ID</Table.CellText>
                    <Table.SortButton direction={Table.sortButtonDirections.asc} />
                </Table.Th>
                <Table.Th>
                    <Table.CellText>Status</Table.CellText>
                    <Table.SortButton direction={Table.sortButtonDirections.desc} />
                </Table.Th>
                <Table.Th>
                    <Table.CellText>First Name</Table.CellText>
                    <Table.SortButton />
                </Table.Th>
                <Table.Th>
                    <Table.CellText>Input</Table.CellText>
                </Table.Th>
                <Table.Th>
                </Table.Th>
            </Table.Row>
        </Table.Header>

        <Table.Body>
            <Table.Row>
                <Table.Td cellType={Table.cellTypes.checkbox}>
                    <Checkbox />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>1</Table.CellText>
                </Table.Td>
                <Table.Td>
                    <Badge label='PENDING' state={Badge.states.info} />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>Günther</Table.CellText>
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.input}>
                    <TextInput placeholder='Placeholder...' />
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.alignRight}>
                    <ButtonIcon
                      variant={ButtonIcon.variants.ghost}
                      icon={RiArrowRightSLine}
                    />
                </Table.Td>
            </Table.Row>
            <Table.Row>
                <Table.Td cellType={Table.cellTypes.checkbox}>
                    <Checkbox />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>2</Table.CellText>
                </Table.Td>
                <Table.Td>
                    <Badge label='ACCEPTED' state={Badge.states.success} />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>Horst</Table.CellText>
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.input}>
                    <TextInput placeholder='Placeholder...' />
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.alignRight}>
                    <ButtonIcon
                      variant={ButtonIcon.variants.ghost}
                      icon={RiArrowRightSLine}
                    />
                </Table.Td>
            </Table.Row>
            <Table.Row>
                <Table.Td cellType={Table.cellTypes.checkbox}>
                    <Checkbox />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>3</Table.CellText>
                </Table.Td>
                <Table.Td>
                    <Badge label='DECLINED' state={Badge.states.error} />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>Elfriede</Table.CellText>
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.input}>
                    <TextInput placeholder='Placeholder...' />
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.alignRight}>
                    <ButtonIcon
                      variant={ButtonIcon.variants.ghost}
                      icon={RiArrowRightSLine}
                    />
                </Table.Td>
            </Table.Row>
            <Table.Row>
                <Table.Td cellType={Table.cellTypes.checkbox}>
                    <Checkbox />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>4</Table.CellText>
                </Table.Td>
                <Table.Td>
                    <Badge label='ACCEPTED' state={Badge.states.success} />
                </Table.Td>
                <Table.Td>
                    <Table.CellText>Holger</Table.CellText>
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.input}>
                    <TextInput placeholder='Placeholder...' />
                </Table.Td>
                <Table.Td cellType={Table.cellTypes.alignRight}>
                    <ButtonIcon
                      variant={ButtonIcon.variants.ghost}
                      icon={RiArrowRightSLine}
                    />
                </Table.Td>
            </Table.Row>
        </Table.Body>
    </Table>
  )
}

export default Demo