@chakra-ui/react#SkeletonText JavaScript Examples
The following examples show how to use
@chakra-ui/react#SkeletonText.
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 |
function AdListItemSkeleton() {
return (
<HStack spacing="5" align="flex-start">
<SkeletonCircle
size={['60px']}
startColor="gray.50"
endColor="gray.100"
/>
<Stack spacing="5" w="full">
<Stack spacing="1">
<Skeleton minH="4" w="44" />
<Skeleton minH="10" w="md" />
</Stack>
<SkeletonText
noOfLines={3}
spacing="1.5"
startColor="gray.50"
endColor="gray.100"
minH="4"
/>
</Stack>
</HStack>
)
}
Example #2
Source File: BuilderListSkeleton.jsx From scaffold-directory with MIT License | 6 votes |
BuilderListSkeleton = () => (
<Box overflowX="auto">
<Center mb={5}>
<chakra.strong mr={2}>Total builders:</chakra.strong> <SkeletonText noOfLines={1} w={5} />
</Center>
<Table>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Challenges</Th>
<Th>Socials</Th>
<Th>Last Activity</Th>
</Tr>
</Thead>
<Tbody>
{[1, 2].map(lineNumber => {
return (
<Tr key={lineNumber}>
<Td>
<SkeletonAddress w="12.5" fontSize="16" />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
)
Example #3
Source File: FullPage.js From MeowForm with MIT License | 6 votes |
function FullPage(props) {
return (
<div>
<Flex>
<SkeletonText mt="4" noOfLines={4} spacing="4" />
</Flex>
< Box padding="6" boxShadow="lg" >
<Flex>
<SkeletonCircle size="1" padding="5%" ml="5%" mb="5%" />
<SkeletonCircle size="1" padding="5%" ml="25%" />
<SkeletonCircle size="1" padding="5%" ml="25%" />
</Flex>
</Box>
<SkeletonText mt="3" noOfLines={15} spacing="10" padding="5%"/>
</div>
);
}
Example #4
Source File: NewsSkeleton.js From sided.news.web with MIT License | 5 votes |
export default function NewsSkeleton({}) {
return (
<div className={styles.news}>
<div className={styles.left_col}>
<Skeleton
height="100%"
style={{
borderTopLeftRadius: "20px",
borderBottomLeftRadius: "20px",
}}
/>
</div>
<div className={styles.right_col}>
<div className={styles.news_title}>
<SkeletonText mt="4" noOfLines={4} spacing="4" />
</div>
<div>
<div className={styles.buttons}>
<div>
<Button colorScheme="teal" size="xs">
Read More
</Button>
</div>
<div>
<Link href="/">
<Button colorScheme="teal" size="xs" variant="outline">
Source
</Button>
</Link>
</div>
</div>
<div className={styles.date}>
{" "}
<Skeleton height="16px" />
</div>
</div>
</div>
</div>
);
}
Example #5
Source File: BuilderProfileCard.jsx From scaffold-directory with MIT License | 5 votes |
BuilderProfileCardSkeleton = ({ isLoaded, children }) => (
<Skeleton isLoaded={isLoaded}>{isLoaded ? children() : <SkeletonText mt="4" noOfLines={4} spacing="4" />}</Skeleton>
)
Example #6
Source File: BuilderProfileChallengesTableSkeleton.jsx From scaffold-directory with MIT License | 5 votes |
BuilderProfileChallengesTableSkeleton = () => (
<Box overflowX="auto">
<Table>
<Thead>
<Tr>
<Th w="30%">Name</Th>
<Th>Contract</Th>
<Th>Live Demo</Th>
<Th>Updated</Th>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{[1, 2].map(lineNumber => {
return (
<Tr key={lineNumber}>
<Td>
<SkeletonText noOfLines={1} py={2} />
</Td>
<Td>
<SkeletonText noOfLines={1} w="50%" />
</Td>
<Td>
<SkeletonText noOfLines={1} w="50%" />
</Td>
<Td>
<SkeletonText noOfLines={1} />
</Td>
<Td>
<Skeleton h={6} w={20} borderRadius="full">
Submitted
</Skeleton>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
)
Example #7
Source File: SubmissionReviewTableSkeleton.jsx From scaffold-directory with MIT License | 5 votes |
BuildsTableSkeleton = () => (
<Box overflowX="auto">
<Table mb={4}>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Build Name</Th>
<Th>Description</Th>
<Th>Branch URL</Th>
<Th>Submitted time</Th>
<Th>Actions</Th>
</Tr>
</Thead>
<Tbody>
{[1, 2].map(lineNumber => {
return (
<Tr key={lineNumber}>
<Td>
<SkeletonAddress w="12.5" fontSize="16" />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<HStack spacing={3}>
<Skeleton startColor="red.100" endColor="red.500">
<Button type="button" size="xs">
Reject
</Button>
</Skeleton>
<Skeleton startColor="green.100" endColor="green.500">
<Button type="button" style={{ marginRight: 10 }} size="xs">
Approve
</Button>
</Skeleton>
</HStack>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
)
Example #8
Source File: SubmissionReviewTableSkeleton.jsx From scaffold-directory with MIT License | 5 votes |
ChallengesTableSkeleton = () => (
<Box overflowX="auto">
<Table mb={4}>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Challenge</Th>
<Th>Contract</Th>
<Th>Live demo</Th>
<Th>Submitted time</Th>
<Th>Actions</Th>
</Tr>
</Thead>
<Tbody>
{[1, 2].map(lineNumber => {
return (
<Tr key={lineNumber}>
<Td>
<SkeletonAddress w="12.5" fontSize="16" />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<SkeletonText noOfLines={1} py={4} />
</Td>
<Td>
<Skeleton startColor="blue.100" endColor="blue.500">
<Button type="button" size="xs">
Review
</Button>
</Skeleton>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
)
Example #9
Source File: ActivityView.jsx From scaffold-directory with MIT License | 5 votes |
export default function ActivityView() {
const [eventsFeed, setEventFeeds] = useState([]);
const [isLoadingEvents, setIsLoadingEvents] = useState(false);
const { secondaryFontColor } = useCustomColorModes();
useEffect(() => {
const updateEvents = async () => {
setIsLoadingEvents(true);
const events = await getAllEvents(25);
setEventFeeds(events);
setIsLoadingEvents(false);
};
updateEvents();
}, []);
return (
<Container maxW="container.md" centerContent>
<Heading as="h1" mb="4">
Activity feed
</Heading>
<Text color={secondaryFontColor} textAlign="center" mb={10}>
Last 25 things happening at SRE.
</Text>
{isLoadingEvents ? (
<Box w="100%" maxW="500px">
<SkeletonText mt="4" noOfLines={10} spacing="4" />
</Box>
) : (
<Table>
<Thead>
<Tr>
<Th>Builder</Th>
<Th>Time</Th>
<Th>Action</Th>
</Tr>
</Thead>
<Tbody>
{eventsFeed.map(event => (
<EventRow key={`${event.timestamp}_${event.payload.userAddress}`} event={event} />
))}
</Tbody>
</Table>
)}
</Container>
);
}
Example #10
Source File: BuilderProfileView.jsx From scaffold-directory with MIT License | 4 votes |
export default function BuilderProfileView({ serverUrl, mainnetProvider, address, userProvider, userRole }) {
const { builderAddress } = useParams();
const { primaryFontColor, secondaryFontColor, borderColor, iconBgColor } = useCustomColorModes();
const [builder, setBuilder] = useState();
const [challengeEvents, setChallengeEvents] = useState([]);
const [isLoadingBuilder, setIsLoadingBuilder] = useState(false);
const [isBuilderOnBg, setIsBuilderOnBg] = useState(false);
const [isLoadingTimestamps, setIsLoadingTimestamps] = useState(false);
const toast = useToast({ position: "top", isClosable: true });
const toastVariant = useColorModeValue("subtle", "solid");
const challenges = builder?.challenges ? Object.entries(builder.challenges) : undefined;
const acceptedChallenges = getAcceptedChallenges(builder?.challenges);
const isMyProfile = builderAddress === address;
const fetchBuilder = async () => {
setIsLoadingBuilder(true);
const fetchedBuilder = await axios.get(serverUrl + `/builders/${builderAddress}`);
setBuilder(fetchedBuilder.data);
try {
await axios.get(bgBackendUrl + `/builders/${builderAddress}`);
} catch (e) {
// Builder Not found in BG
setIsLoadingBuilder(false);
return;
}
setIsBuilderOnBg(true);
setIsLoadingBuilder(false);
};
useEffect(() => {
fetchBuilder();
// eslint-disable-next-line
}, [builderAddress]);
useEffect(() => {
if (!builderAddress) {
return;
}
async function fetchChallengeEvents() {
setIsLoadingTimestamps(true);
try {
const fetchedChallengeEvents = await getChallengeEventsForUser(builderAddress);
setChallengeEvents(fetchedChallengeEvents.sort(byTimestamp).reverse());
setIsLoadingTimestamps(false);
} catch (error) {
toast({
description: "Can't get challenges metadata. Please try again",
status: "error",
variant: toastVariant,
});
}
}
fetchChallengeEvents();
// eslint-disable-next-line
}, [builderAddress]);
return (
<Container maxW="container.xl">
<SimpleGrid gap={14} columns={{ base: 1, xl: 4 }}>
<GridItem colSpan={1}>
<BuilderProfileCard
builder={builder}
mainnetProvider={mainnetProvider}
isMyProfile={isMyProfile}
userProvider={userProvider}
fetchBuilder={fetchBuilder}
userRole={userRole}
/>
</GridItem>
{isBuilderOnBg ? (
<GridItem colSpan={{ base: 1, xl: 3 }}>
<Box borderColor={borderColor} borderWidth={1} p={5}>
<Flex direction="column" align="center" justify="center">
<Image src="/assets/bg.png" mb={3} />
<Text mb={3} fontSize="lg" fontWeight="bold">
This builder has upgraded to BuidlGuidl.
</Text>
<Button as={Link} href={`${BG_FRONTEND_URL}/builders/${builderAddress}`} isExternal colorScheme="blue">
View their profile on Buidlguidl
</Button>
</Flex>
</Box>
</GridItem>
) : (
<GridItem colSpan={{ base: 1, xl: 3 }}>
<HStack spacing={4} mb={8}>
<Flex borderRadius="lg" borderColor={borderColor} borderWidth={1} p={4} w="full" justify="space-between">
<Flex bg={iconBgColor} borderRadius="lg" w={12} h={12} justify="center" align="center">
<InfoOutlineIcon w={5} h={5} />
</Flex>
<div>
<Text fontSize="xl" fontWeight="medium" textAlign="right">
{acceptedChallenges.length}
</Text>
<Text fontSize="sm" color={secondaryFontColor} textAlign="right">
challenges completed
</Text>
</div>
</Flex>
<Flex borderRadius="lg" borderColor={borderColor} borderWidth={1} p={4} w="full" justify="space-between">
<Flex bg={iconBgColor} borderRadius="lg" w={12} h={12} justify="center" align="center">
<InfoOutlineIcon w={5} h={5} />
</Flex>
<div>
<Text fontSize="xl" fontWeight="medium" textAlign="right">
{builder?.function ? (
<Tag colorScheme={userFunctionDescription[builder?.function].colorScheme} variant="solid">
{userFunctionDescription[builder?.function].label}
</Tag>
) : (
"-"
)}
</Text>
<Text fontSize="sm" color={secondaryFontColor} textAlign="right">
Role
</Text>
</div>
</Flex>
</HStack>
<Flex mb={4}>
<Text fontSize="2xl" fontWeight="bold">
Challenges
</Text>
<Spacer />
</Flex>
{isLoadingBuilder && <BuilderProfileChallengesTableSkeleton />}
{!isLoadingBuilder &&
(challenges ? (
<Box overflowX="auto">
<Table>
{isMyProfile && (
<TableCaption>
<Button as={RouteLink} colorScheme="blue" to="/">
Start a challenge
</Button>
</TableCaption>
)}
<Thead>
<Tr>
<Th>Name</Th>
<Th>Contract</Th>
<Th>Live Demo</Th>
<Th>Updated</Th>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{challenges.map(([challengeId, lastSubmission]) => {
if (!challengeInfo[challengeId]) {
return null;
}
const lastEventForChallenge = challengeEvents.filter(
event => event.payload.challengeId === challengeId,
)[0];
return (
<Tr key={challengeId}>
<Td>
<Link as={RouteLink} to={`/challenge/${challengeId}`} fontWeight="700" color="teal.500">
{challengeInfo[challengeId].label}
</Link>
</Td>
<Td>
<Link
// Legacy branchUrl
href={lastSubmission.contractUrl || lastSubmission.branchUrl}
color="teal.500"
target="_blank"
rel="noopener noreferrer"
>
Code
</Link>
</Td>
<Td>
<Link
href={lastSubmission.deployedUrl}
color="teal.500"
target="_blank"
rel="noopener noreferrer"
>
Demo
</Link>
</Td>
<Td>
{isLoadingTimestamps ? (
<SkeletonText noOfLines={1} />
) : (
<DateWithTooltip timestamp={lastEventForChallenge?.timestamp} />
)}
</Td>
<Td>
<ChallengeStatusTag
status={lastSubmission.status}
comment={lastSubmission.reviewComment}
autograding={lastSubmission.autograding}
/>
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</Box>
) : (
<Flex
justify="center"
align="center"
borderRadius="lg"
borderColor={borderColor}
borderWidth={1}
py={36}
w="full"
>
{isMyProfile ? (
<Box maxW="xs" textAlign="center">
<Text fontWeight="medium" color={primaryFontColor} mb={2}>
Start a new challenge
</Text>
<Text color={secondaryFontColor} mb={4}>
Show off your skills. Learn everything you need to build on Ethereum!
</Text>
<Button as={RouteLink} colorScheme="blue" to="/">
Start a challenge
</Button>
</Box>
) : (
<Box maxW="xs" textAlign="center">
<Text color={secondaryFontColor} mb={4}>
This builder hasn't completed any challenges.
</Text>
</Box>
)}
</Flex>
))}
</GridItem>
)}
</SimpleGrid>
</Container>
);
}
Example #11
Source File: ChallengeDetailView.jsx From scaffold-directory with MIT License | 4 votes |
export default function ChallengeDetailView({ serverUrl, address, userProvider, userRole, loadWeb3Modal }) {
const [descriptionJs, setDescriptionJs] = useState(null);
const [descriptionTs, setDescriptionTs] = useState(null);
const { challengeId } = useParams();
const history = useHistory();
const { isOpen, onOpen, onClose } = useDisclosure();
const [openModalOnLoad, setOpenModalOnLoad] = useState(false);
const challenge = challengeInfo[challengeId];
const isWalletConnected = !!userRole;
const isAnonymous = userRole && USER_ROLES.anonymous === userRole;
// Fetch challenge description from local files.
// In the future, this might be a fetch to the repos/branchs README
// (Ideally fetched at build time)
useEffect(() => {
getChallengeReadme(challengeId, "js")
.then(text => setDescriptionJs(parseGithubReadme(text)))
.catch(() => setDescriptionJs(challenge.description));
getChallengeReadme(challengeId, "ts")
.then(text => setDescriptionTs(parseGithubReadme(text)))
.catch(() => setDescriptionTs(challenge.description));
}, [challengeId, challenge]);
useEffect(() => {
if (!isWalletConnected || isAnonymous) return;
if (openModalOnLoad) {
onOpen();
setOpenModalOnLoad(false);
}
}, [isAnonymous, isWalletConnected, onOpen, userRole, openModalOnLoad, setOpenModalOnLoad]);
if (!challenge) {
// TODO implement a 404 page
// this looks good: https://ant.design/components/result/#components-result-demo-404
history.push("/404");
}
const handleSubmitChallengeModal = async () => {
if (isWalletConnected && !isAnonymous) {
return onOpen();
}
if (!isWalletConnected) {
await loadWeb3Modal();
setOpenModalOnLoad(true);
}
};
const challengeActionButtons = (type = "JS") => {
const repo = type === "JS" ? JS_CHALLENGE_REPO : TS_CHALLENGE_REPO;
return (
<Box>
<Button
as="a"
colorScheme="gray"
variant="outline"
href={`${repo}/tree/${challenge.branchName}`}
target="_blank"
rel="noopener noreferrer"
>
View it on Github <ExternalLinkIcon ml={1} />
</Button>
<Box pos="fixed" bottom={0} p={6} left={0} right={0}>
<Tooltip label={isAnonymous ? "You need to register as a builder" : "Submit Challenge"} shouldWrapChildren>
<Button colorScheme="blue" boxShadow="dark-lg" onClick={handleSubmitChallengeModal} disabled={isAnonymous}>
Submit challenge
</Button>
</Tooltip>
</Box>
</Box>
);
};
return (
// Magic number for maxW to match GitHub
<Container maxW="894px" mb="60px">
<Box textAlign="center" mb={6}>
<Heading as="h1" mb={4}>
{challenge.label}
</Heading>
</Box>
<Tabs variant="enclosed-colored" align="center">
<TabList>
<Tab>Javascript</Tab>
<Tab>Typescript</Tab>
</TabList>
<TabPanels align="left">
<TabPanel>
<SkeletonText mt="4" noOfLines={4} spacing="4" isLoaded={descriptionJs} />
<ReactMarkdown components={ChakraUIRenderer(chakraMarkdownComponents)}>{descriptionJs}</ReactMarkdown>
<Box textAlign="center" my={6}>
{challengeActionButtons("JS")}
</Box>
</TabPanel>
<TabPanel>
<SkeletonText mt="4" noOfLines={4} spacing="4" isLoaded={descriptionTs} />
<ReactMarkdown components={ChakraUIRenderer(chakraMarkdownComponents)}>{descriptionTs}</ReactMarkdown>
<Box textAlign="center" my={6}>
{challengeActionButtons("TS")}
</Box>
</TabPanel>
</TabPanels>
</Tabs>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Submit Challenge</ModalHeader>
<ModalCloseButton />
<ModalBody px={6} pb={8}>
<ChallengeSubmission
challenge={challenge}
serverUrl={serverUrl}
address={address}
userProvider={userProvider}
loadWeb3Modal={loadWeb3Modal}
/>
</ModalBody>
</ModalContent>
</Modal>
</Container>
);
}
Example #12
Source File: Dashboard.js From MeowForm with MIT License | 4 votes |
Dashboard = () => {
const { isLoading, user } = useAuth0();
const [check] = useMediaQuery("(min-width: 1025px)");
const { isOpen, onOpen, onClose } = useDisclosure();
const [formName, setFormName] = React.useState();
let userEmail = user.email;
let apiKey = process.env.REACT_APP_APIKEY;
let apiUrl = process.env.REACT_APP_HOSTURL;
const [data, setData] = React.useState();
const getData = async () => {
let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
setData(temp.data[0]);
console.log(data);
};
useEffect(() => {
getData();
if (data === undefined) {
setTimeout(() => getData(), 2500);
}
}, []);
let responses = 0;
if (data) {
for (let i = 0; i < data.forms.length; i++) {
responses += data.forms[i].formData.length;
}
}
const postApiData = async () => {
let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
email: user.email,
formName: formName,
url: "",
});
getData();
};
const addNewForm = () => {
if (formName === "") {
toast.error("Form is empty?");
} else {
// console.log(data.forms[0].formName);
let isCopy = false;
for (let i = 0; i < data.forms.length; i++) {
if (data.forms[i].formName === formName) {
isCopy = true;
}
}
if (isCopy) {
toast.error("form with such name already exits ");
} else {
postApiData();
setTimeout(() => getData(), 2000);
onClose();
setTimeout(
() => toast.success("Form Have beeen added ?"),
2000
);
}
}
};
return (
<Box backgroundColor='whiteAlpha.100'>
<Box
padding='6'
boxShadow='2xl'
align='center'
margin='2%'
borderRadius={check ? "full" : "0 "}>
<Flex align='center' flexDirection={check ? "row" : "column"}>
<Flex>
<Image src={user.picture} borderRadius='full' />
<Text
mt='10%'
ml='20px'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize={check ? "3xl" : "xl"}>
{user.name}
</Text>
</Flex>
<Flex align='center' ml={check ? "40%" : "10%"}>
<Box>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
responses
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Responses</Text>
</Box>
<Box ml='50%'>
<Text
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
{data ? (
data.forms.length
) : (
<SkeletonText></SkeletonText>
)}
</Text>
<Text>Forms</Text>
</Box>
</Flex>
</Flex>
</Box>
<Box
padding='6'
boxShadow='xl'
margin='2%'
borderRadius={check ? "25px" : "0 "}>
<Flex justifyContent='space-between'>
<Text
margin='5%'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'
fontSize='3xl'>
Forms
</Text>
<Button margin='5%' colorScheme='orange' onClick={onOpen}>
New form
</Button>
</Flex>
<Divider margin='2%' colorScheme='blackAlpha'></Divider>
{data ? (
data.forms.map((x) => (
<FormCard
formName={x.formName}
responses={x.formData.length}
formData={x.formData}
redirectUrl={x.redirectUrl}
email={userEmail}></FormCard>
))
) : (
<>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
<SkeletonText mt='3' noOfLines={1}></SkeletonText>
</>
)}
{data && data.forms.length === 0 ? (
<>
<Image
src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
width='25%'
height='25%'
ml='38%'
/>
<Text align='center'>
You haven't created a form Yet{" "}
</Text>
</>
) : (
<> </>
)}
</Box>
<Drawer
onClose={onClose}
isOpen={isOpen}
size={check ? "xs" : "xs"}>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader align='center'>
<Text
margin='1%'
fontWeight='extraBold'
fontSize='3xl'
bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
bgClip='text'>
Add Form
</Text>
<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
<Text></Text>
</DrawerHeader>
<DrawerBody>
<Box>
<Flex>
<Input
onChange={(e) =>
setFormName(e.target.value)
}
placeholder='Form Name'
/>
<Button
ml='0.5%'
colorScheme='orange'
onClick={addNewForm}>
{" "}
>{" "}
</Button>
</Flex>
</Box>
<Box></Box>
</DrawerBody>
</DrawerContent>
</Drawer>
<Toaster />
</Box>
);
}