@chakra-ui/react#InputLeftElement JavaScript Examples
The following examples show how to use
@chakra-ui/react#InputLeftElement.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: components.js From idena-web with MIT License | 6 votes |
|
export function GetInvitationTwitterInput({value, onChange}) {
const [inputAddonVisible, setInputAddonVisible] = useState(false)
const size = useBreakpointValue(['lg', 'md'])
return (
<InputGroup size={size}>
<InputLeftElement
pointerEvents="none"
color="gray.300"
fontSize="md"
// eslint-disable-next-line react/no-children-prop
children="@"
display={inputAddonVisible ? 'flex' : 'none'}
/>
<Input
onFocus={() => setInputAddonVisible(true)}
onBlur={() => !value && setInputAddonVisible(false)}
onChange={e => onChange(e.target.value)}
pl={[10, 6]}
/>
</InputGroup>
)
}
Example #2
| Source File: Forget.js From GitMarkonics with MIT License | 5 votes |
|
export default function Forget() {
return (
<>
<Navbar />
<div className="login">
<div className="login__container">
<div className="login__containerTop">
<div className="login__img"></div>
<p>Add a crisp to your bulky documents !!</p>
<h4>Welcome to the website</h4>
</div>
<div className="login__containerBottom">
<VStack className="input__container" w="65%" m="auto">
<Heading
fontSize="1.2rem"
color="blue.500"
fontWeight="semibold"
py={3}
>
FORGET PASSWORD
</Heading>
<InputGroup w="95%" borderRadius="full" bgColor="gray.200">
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input required
borderRadius="full"
type="tel"
placeholder="Email Address"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="login__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
type="tel" required
borderRadius="full"
placeholder="Password"
paddingLeft="60px"
/>
</InputGroup>
<HStack className="login__btn" alignSelf="flex-end">
<Button
colorScheme="pink"
px="6"
size="sm"
fontWeight="bold"
className="loginBtn"
>
SUBMIT
</Button>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/login" >Remember?</a>
</Link>
</HStack>
</VStack>
</div>
</div>
</div>
</>
)
}
Example #3
| Source File: Login.js From GitMarkonics with MIT License | 5 votes |
|
function Login() {
return (
<>
<Navbar />
<div className="login">
<div className="login__container">
<div className="login__containerTop">
<div className="login__img"></div>
<p>Add a crisp to your bulky documents !!</p>
<h4>Welcome to the website</h4>
</div>
<div className="login__containerBottom">
<VStack className="input__container" w="65%" m="auto">
<Heading
fontSize="1.2rem"
color="blue.500"
fontWeight="semibold"
py={3}
>
USER LOGIN
</Heading>
<InputGroup w="95%" borderRadius="full" bgColor="gray.200">
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiAccountPinBoxFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
borderRadius="full"
type="tel"
placeholder="Username"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="login__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<RiLockPasswordFill color="#C6C6E8" fontSize="2.1rem" />
}
/>
<Input
type="password"
borderRadius="full"
placeholder="Password"
paddingLeft="60px"
/>
</InputGroup>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/register" >Need Account ?</a>
</Link>
<HStack className="login__btn" alignSelf="flex-end">
<Button
colorScheme="pink"
px="6"
size="sm"
fontWeight="bold"
className="loginBtn"
>
LOGIN
</Button>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/forget" >Forgot password?</a>
</Link>
</HStack>
</VStack>
</div>
</div>
</div>
</>
);
}
Example #4
| Source File: search.js From react-table-library with MIT License | 5 votes |
|
Component = () => {
let data = { nodes };
const chakraTheme = getTheme(DEFAULT_OPTIONS);
const theme = useTheme(chakraTheme);
const [search, setSearch] = React.useState('');
const handleSearch = (event) => {
setSearch(event.target.value);
};
data = {
nodes: data.nodes.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
};
const COLUMNS = [
{ label: 'Task', renderCell: (item) => item.name },
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
},
{ label: 'Type', renderCell: (item) => item.type },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
},
{ label: 'Tasks', renderCell: (item) => item.nodes?.length },
];
return (
<div>
<Stack spacing={10}>
<InputGroup>
<InputLeftElement
pointerEvents="none"
children={<FaSearch style={{ color: '#4a5568' }} />}
/>
<Input placeholder="Search Task" value={search} onChange={handleSearch} />
</InputGroup>
</Stack>
<br />
<Box p={3} borderWidth="1px" borderRadius="lg">
<CompactTable columns={COLUMNS} data={data} theme={theme} />
</Box>
<br />
<DocumentationSee anchor={'Features/' + key} />
</div>
);
}
Example #5
| Source File: Register.js From GitMarkonics with MIT License | 4 votes |
|
function Register() {
return (
<>
<Navbar />
<div className="Register">
<div className="Register__container">
<div className="Register__containerTop">
<div className="Register__img"></div>
<p>Add a crisp to your bulky documents !!</p>
<h4>Welcome to the website</h4>
</div>
<div className="Register__containerBottom">
<VStack className="input__container" w="65%" m="auto">
<Heading
fontSize="1.2rem"
color="blue.500"
fontWeight="semibold"
py={3}
>
Register HERE
</Heading>
<InputGroup w="95%" borderRadius="full">
<Input
borderRadius="full"
type="tel"
placeholder="First Name"
bgColor="gray.200"
/>
<Input
borderRadius="full"
type="tel"
placeholder="Last Name"
bgColor="gray.200"
marginLeft="4px"
/>
</InputGroup>
<InputGroup w="95%" borderRadius="full" bgColor="gray.200">
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<BsFillPersonFill color="#C6C6E8" fontSize="1.6rem" />
}
/>
<Input
borderRadius="full"
type="tel"
placeholder="Username"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="Register__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
}
/>
<Input
type="password"
borderRadius="full"
placeholder="Password"
paddingLeft="60px"
/>
</InputGroup>
<InputGroup
className="Register__input"
w="95%"
borderRadius="full"
bgColor="gray.200"
>
<InputLeftElement
margin="0 20px"
pointerEvents="none"
children={
<BsFillLockFill color="#C6C6E8" fontSize="1.4rem" />
}
/>
<Input
type="password"
borderRadius="full"
placeholder=" Confirm Password"
paddingLeft="60px"
/>
</InputGroup>
<Link fontSize="sm" textDecoration="underline" color="blue">
<a href="/login" >Have Account?</a>
</Link>
<HStack className="Register__btn" alignSelf="flex-end">
<Button
colorScheme="pink"
px="6"
size="sm"
fontWeight="bold"
className="RegisterBtn"
>
Register
</Button>
</HStack>
</VStack>
</div>
</div>
</div>
</>
);
}
Example #6
| Source File: Todo.js From benjamincarlson.io with MIT License | 4 votes |
|
Todo = () => {
const toast = useToast()
const { colorMode } = useColorMode()
const { isOpen, onOpen, onClose } = useDisclosure()
const colorSecondary = {
light: 'gray.600',
dark: 'gray.400',
}
const borderColor = {
light: 'gray.200',
dark: 'gray.600',
}
const colorSmall = {
light: 'gray.400',
dark: 'gray.600',
}
const myTodos = [
{
completed: false,
title: 'Improve Final Cut Pro skills ?',
},
{
completed: false,
title: 'Finish my degree ?',
},
{
completed: false,
title: 'Grow my YouTube channel ?',
},
{
completed: false,
title: 'Grow coffeeclass.io ☕',
},
]
const [todos, setTodos] = useState(myTodos)
const [input, setInput] = useState('')
const removeTodo = todo => {
setTodos(todos.filter(t => t !== todo))
}
const toggleCompleted = todo => {
todo.completed = !todo.completed
setTodos([...todos])
}
const addTodo = () => {
setTodos(todos.concat({
completed: false,
title: input,
}))
setInput('')
}
return (
<>
<Box as="section" w="100%" mt={10} mb={20}>
<Stack spacing={4} w="100%">
<Heading letterSpacing="tight" size="lg" fontWeight={700} as="h2">Todo List ?</Heading>
<Text color={colorSecondary[colorMode]}>Here is a list of things I plan to accomplish over the next year. Try it out yourself!</Text>
<InputGroup size="md" mt={4} borderColor="gray.500" borderColor={borderColor[colorMode]}>
<InputLeftElement
pointerEvents="none"
children={<Search2Icon color={useColorModeValue("gray.500", "gray.600")} />}
/>
<Input
aria-label="Enter a Todo!"
placeholder="Improve Python skills ?"
value={input}
onChange={e => setInput(e.target.value)}
/>
<InputRightElement width="6.75rem">
<Button
aria-label="Add a TODO!"
fontWeight="bold"
h="1.75rem"
size="md"
colorScheme="gray"
mr={2}
variant="outline"
px={10}
onClick={() => {
if (input == '')
toast({
title: 'Whoops! There\'s an error!',
description: "Input can't be empty!",
status: "error",
duration: 2000,
isClosable: true,
})
else {
addTodo(input)
}
}}
>
Add Todo!
</Button>
</InputRightElement>
</InputGroup>
<Flex flexDir="column">
{todos.map((todo, index) => (
<Flex
key={index}
justify="space-between"
align="center"
my={1}
>
<Flex align="center">
<Icon fontSize="xl" mr={2} as={ChevronRightIcon} color={colorSecondary[colorMode]} />
<Tooltip label={`Click "${todo.title}" to mark as completed.`} placement="top" hasArrow>
<Text color={colorSecondary[colorMode]} textDecor={todo.completed && "line-through"} _hover={{ cursor: 'pointer' }} onClick={() => toggleCompleted(todo)}>{todo.title}</Text>
</Tooltip>
</Flex>
<Tooltip label={`Delete "${todo.title}"`} placement="top" hasArrow>
<IconButton aria-label={`Delete "${todo.title}" from Todo list.`} icon={<DeleteIcon color="red.400" />} onClick={() => removeTodo(todo)} />
</Tooltip>
</Flex>
))}
</Flex>
<Flex align="center">
<Text onClick={() => setTodos(myTodos)} _hover={{ cursor: 'pointer' }} color={colorSmall[colorMode]}>Reset</Text>
<Divider orientation="vertical" mx={2} h={4} />
<Text onClick={onOpen} _hover={{ cursor: 'pointer' }} color={colorSmall[colorMode]}>Help</Text>
</Flex>
</Stack>
</Box>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Todo List Help</ModalHeader>
<ModalCloseButton />
<ModalBody>
<OrderedList>
<ListItem>
<Text fontWeight="bold">Add a Todo</Text>
<Text>Input your Todo and click the "Add Todo!" button to add a new Todo.</Text>
</ListItem>
<ListItem>
<Text fontWeight="bold">Reset</Text>
<Text>Click the "Reset" button to reset the list.</Text>
</ListItem>
<ListItem>
<Text fontWeight="bold">Delete</Text>
<Text>Click the "Delete" button to delete a Todo.</Text>
</ListItem>
<ListItem>
<Text fontWeight="bold">Completed</Text>
<Text>Click a Todo to mark it as completed.</Text>
</ListItem>
<ListItem>
<Text fontWeight="bold">View Code</Text>
<Text>Click the "View Code" button to view the code on GitHub for this simple TODO list.</Text>
</ListItem>
</OrderedList>
<Divider my={6} />
<Text><strong>Current state of Todo List:</strong> [{todos.map(t => { return `{"${t.title}",${t.completed}},` })}]</Text>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Link
href="https://github.com/bjcarlson42/benjamincarlson.io/blob/master/components/Todo.js"
_hover={{ textDecor: 'none' }}
isExternal
>
<Button variant="ghost">View Code</Button>
</Link>
</ModalFooter>
</ModalContent>
</Modal>
</>
)
}
Example #7
| Source File: image-search.js From idena-web with MIT License | 4 votes |
|
export function ImageSearchDialog({onPick, onClose, onError, ...props}) {
const {t} = useTranslation()
const searchInputRef = React.useRef()
const [current, send] = useMachine(
Machine({
context: {
images: [],
},
initial: 'idle',
states: {
idle: {},
searching: {
invoke: {
// eslint-disable-next-line no-shadow
src: (_, {query}) => searchImages(query),
onDone: {
target: 'done',
actions: [
assign({
images: (_, {data}) => data,
}),
log(),
],
},
onError: 'fail',
},
},
done: {
on: {
PICK: {
actions: [
assign({
selectedImage: (_, {image}) => image,
}),
log(),
],
},
},
},
fail: {
entry: [(_, {data: {message}}) => onError(message), log()],
},
},
on: {
SEARCH: 'searching',
},
})
)
const {images, selectedImage} = current.context
const [query, setQuery] = useState()
return (
<Dialog
size="lg"
initialFocusRef={searchInputRef}
onClose={onClose}
{...props}
>
<DialogBody d="flex">
<Stack minH="sm" maxH="sm" spacing={4} flex={1}>
<Stack
isInline
as="form"
onSubmit={e => {
e.preventDefault()
send('SEARCH', {query})
}}
>
<InputGroup w="full">
<InputLeftElement w={5} h={5} top={1.5} left={3}>
<SearchIcon boxSize={3} color="gray.200" />
</InputLeftElement>
<Input
ref={searchInputRef}
type="search"
id="query"
placeholder={t('Search the picture on the web')}
bg="gray.50"
pl={10}
value={query}
onChange={e => setQuery(e.target.value)}
/>
</InputGroup>
<PrimaryButton type="submit">Search</PrimaryButton>
</Stack>
{eitherState(current, 'idle') && (
<Flex direction="column" flex={1} align="center" justify="center">
<Stack spacing={4} align="center" w="3xs">
<Box p={3}>
<SearchIcon boxSize="56px" color="gray.100" />
</Box>
<Text color="muted" textAlign="center" w="full">
{t(
'Type your search in the box above to find images using search box'
)}
</Text>
</Stack>
</Flex>
)}
{eitherState(current, 'done') && (
<SimpleGrid
columns={4}
spacing={2}
overflow="auto"
px={6}
style={{marginLeft: '-24px', marginRight: '-24px'}}
>
{images.map(({thumbnail}) => (
<AspectRatio
ratio={1}
w={28}
minH={28}
bg={thumbnail === selectedImage ? 'blue.032' : 'white'}
borderColor={
thumbnail === selectedImage ? 'blue.500' : 'gray.50'
}
borderWidth={1}
borderRadius="md"
overflow="hidden"
position="relative"
transition="all 0.6s cubic-bezier(0.16, 1, 0.3, 1)"
onClick={() => {
send('PICK', {image: thumbnail})
}}
onDoubleClick={() => {
onPick(selectedImage)
}}
>
<Image
src={thumbnail}
objectFit="contain"
objectPosition="center"
borderColor={
thumbnail === selectedImage ? 'blue.500' : 'transparent'
}
borderWidth={1}
borderRadius="md"
/>
</AspectRatio>
))}
</SimpleGrid>
)}
{eitherState(current, 'searching') && (
<Flex direction="column" flex={1} align="center" justify="center">
<Spinner color="blue.500" />
</Flex>
)}
</Stack>
</DialogBody>
<DialogFooter>
<SecondaryButton onClick={onClose}>{t('Cancel')}</SecondaryButton>
<PrimaryButton
onClick={() => {
onPick(selectedImage)
}}
>
{t('Select')}
</PrimaryButton>
</DialogFooter>
</Dialog>
)
}
Example #8
| Source File: showreel.js From react-table-library with MIT License | 4 votes |
|
Component = () => {
const [data, setData] = React.useState({ nodes });
//* Theme *//
const chakraTheme = getTheme({
...DEFAULT_OPTIONS,
striped: true,
});
const customTheme = {
Table: `
--data-table-library_grid-template-columns: 64px repeat(5, minmax(0, 1fr));
margin: 16px 0px;
`,
};
const theme = useTheme([chakraTheme, customTheme]);
//* Resize *//
const resize = { resizerHighlight: '#dee2e6' };
//* Pagination *//
const pagination = usePagination(data, {
state: {
page: 0,
size: 4,
},
onChange: onPaginationChange,
});
function onPaginationChange(action, state) {
console.log(action, state);
}
//* Search *//
const [search, setSearch] = React.useState('');
useCustom('search', data, {
state: { search },
onChange: onSearchChange,
});
function onSearchChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Filter *//
const [isHide, setHide] = React.useState(false);
useCustom('filter', data, {
state: { isHide },
onChange: onFilterChange,
});
function onFilterChange(action, state) {
console.log(action, state);
pagination.fns.onSetPage(0);
}
//* Select *//
const select = useRowSelect(data, {
onChange: onSelectChange,
});
function onSelectChange(action, state) {
console.log(action, state);
}
//* Tree *//
const tree = useTree(
data,
{
onChange: onTreeChange,
},
{
clickType: TreeExpandClickTypes.ButtonClick,
treeYLevel: 1,
treeIcon: {
margin: '4px',
iconDefault: null,
iconRight: <FaChevronRight />,
iconDown: <FaChevronDown />,
},
},
);
function onTreeChange(action, state) {
console.log(action, state);
}
//* Sort *//
const sort = useSort(
data,
{
onChange: onSortChange,
},
{
sortIcon: {
iconDefault: null,
iconUp: <FaChevronUp />,
iconDown: <FaChevronDown />,
},
sortFns: {
TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
},
},
);
function onSortChange(action, state) {
console.log(action, state);
}
//* Drawer *//
const [drawerId, setDrawerId] = React.useState(null);
const [edited, setEdited] = React.useState('');
const handleEdit = (event) => {
setEdited(event.target.value);
};
const handleCancel = () => {
setEdited('');
setDrawerId(null);
};
const handleSave = () => {
const node = findNodeById(data.nodes, drawerId);
const editedNode = { ...node, name: edited };
const nodes = insertNode(data.nodes, editedNode);
setData({
nodes,
});
setEdited('');
setDrawerId(null);
};
//* Modal *//
const [modalOpened, setModalOpened] = React.useState(false);
//* Custom Modifiers *//
let modifiedNodes = data.nodes;
// search
modifiedNodes = modifiedNodes.filter((node) =>
node.name.toLowerCase().includes(search.toLowerCase()),
);
// filter
modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;
//* Columns *//
const COLUMNS = [
{
label: 'Task',
renderCell: (item) => item.name,
resize,
sort: { sortKey: 'TASK' },
select: {
renderHeaderCellSelect: () => (
<Checkbox
colorScheme="teal"
isChecked={select.state.all}
isIndeterminate={!select.state.all && !select.state.none}
onChange={select.fns.onToggleAll}
/>
),
renderCellSelect: (item) => (
<Checkbox
colorScheme="teal"
style={{ backgroundColor: '#ffffff' }}
isChecked={select.state.ids.includes(item.id)}
onChange={() => select.fns.onToggleById(item.id)}
/>
),
},
tree: true,
},
{
label: 'Deadline',
renderCell: (item) =>
item.deadline.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
}),
resize,
sort: { sortKey: 'DEADLINE' },
},
{ label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
{
label: 'Complete',
renderCell: (item) => item.isComplete.toString(),
resize,
sort: { sortKey: 'COMPLETE' },
},
{
label: 'Tasks',
renderCell: (item) => (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span>{item.nodes?.length}</span>
<IconButton
aria-label="edit"
icon={<FaPen />}
size="xs"
variant="ghost"
colorScheme="teal"
onClick={() => setDrawerId(item.id)}
/>
</div>
),
resize,
sort: { sortKey: 'TASKS' },
},
];
return (
<>
<Modal isOpen={modalOpened} onClose={() => setModalOpened(false)}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Not all features included here, but we got ...</ModalHeader>
<ModalCloseButton />
<ModalBody>
<div>
<Checkbox colorScheme="teal" isChecked>
Resize
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Sort
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Search
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Filter
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Select
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Tree
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Drawer on Edit
</Checkbox>
</div>
<div>
<Checkbox colorScheme="teal" isChecked>
Pagination
</Checkbox>
</div>
</ModalBody>
</ModalContent>
</Modal>
{/* Form */}
<HStack m={3}>
<Button colorScheme="teal" onClick={() => setModalOpened(true)}>
Features?
</Button>
<InputGroup>
<InputLeftElement
pointerEvents="none"
children={<FaSearch style={{ color: '#4a5568' }} />}
/>
<Input
placeholder="Search Task"
value={search}
onChange={(event) => setSearch(event.target.value)}
/>
</InputGroup>
<Checkbox
style={{ whiteSpace: 'nowrap' }}
colorScheme="teal"
isChecked={isHide}
onChange={(event) => setHide(event.target.checked)}
>
Hide Complete
</Checkbox>
</HStack>
{/* Table */}
<Box p={3} borderWidth="1px" borderRadius="lg">
<CompactTable
columns={COLUMNS}
data={{ ...data, nodes: modifiedNodes }}
theme={theme}
layout={{ custom: true }}
select={select}
tree={tree}
sort={sort}
pagination={pagination}
/>
</Box>
<br />
<HStack justify="flex-end">
<IconButton
aria-label="previous page"
icon={<FaChevronLeft />}
colorScheme="teal"
variant="ghost"
disabled={pagination.state.page === 0}
onClick={() => pagination.fns.onSetPage(pagination.state.page - 1)}
/>
{pagination.state.getPages(modifiedNodes).map((_, index) => (
<Button
key={index}
colorScheme="teal"
variant={pagination.state.page === index ? 'solid' : 'ghost'}
onClick={() => pagination.fns.onSetPage(index)}
>
{index + 1}
</Button>
))}
<IconButton
aria-label="next page"
icon={<FaChevronRight />}
colorScheme="teal"
variant="ghost"
disabled={pagination.state.page + 1 === pagination.state.getTotalPages(data.nodes)}
onClick={() => pagination.fns.onSetPage(pagination.state.page + 1)}
/>
</HStack>
<Drawer isOpen={drawerId} onClose={handleCancel} placement="right">
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Create your account</DrawerHeader>
<DrawerBody>
<Text>Name: </Text>
<Input
autoFocus
value={
edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name
}
onChange={handleEdit}
data-autofocus
/>
</DrawerBody>
<DrawerFooter>
<Button variant="outline" mr={3} onClick={handleCancel}>
Cancel
</Button>
<Button onClick={handleSave} colorScheme="teal">
Save
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}
