@chakra-ui/react#OrderedList JavaScript Examples
The following examples show how to use
@chakra-ui/react#OrderedList.
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: 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 #2
| Source File: get-invitation.js From idena-web with MIT License | 4 votes |
|
export default function GetInvitation() {
const router = useRouter()
const {t} = useTranslation()
const [nickname, setNickname] = useState('')
const failToast = useFailToast()
const successToast = useSuccessToast()
const [code, setCode] = useState()
const [isWaiting, setIsWaiting] = useState(false)
const size = useBreakpointValue(['lg', 'md'])
const invitationCodeRef = useRef()
const {scrollTo: scrollToCode} = useScroll(invitationCodeRef)
const getCode = async () => {
setIsWaiting(true)
const name = nickname.startsWith('@') ? nickname.substring(1) : nickname
try {
const {invitation} = await getInvitationCode(name, cookie.get('refId'))
setCode(invitation)
successToast(t('Your invitation code has been generated successfully!'))
scrollToCode()
} catch (e) {
failToast(e.message)
} finally {
setIsWaiting(false)
}
}
return (
<Layout showHamburger={false}>
<Page>
<Flex
align="center"
alignSelf="stretch"
justify={['center', 'space-between']}
mb={[8, 2]}
w={['100%', null]}
>
<PageTitle
fontSize={['base', 'xl']}
fontWeight={['bold', 500]}
mb={0}
>
{t('How to get an invitation')}
</PageTitle>
<CloseButton
color={['blue.500', 'inherit']}
size="lg"
position={['absolute', 'inherit']}
right={2}
onClick={() => router.push('/home')}
/>
</Flex>
<Flex
direction="column"
maxW="480px"
w={['100%', null]}
fontSize={['mdx', 'md']}
>
<Text>
{t(
'To minimize the probability of a Sybil attack, the pace of network growth is restricted: Idena network participation is invitation-based. New invitations can be sent out only by validated users. The number of invitations is limited and increases as the network grows.',
{nsSeparator: '|'}
)}
</Text>
<Text mt={2}>
{t(
'Please choose the platform where you have the most active account:',
{nsSeparator: '|'}
)}
</Text>
<Tabs variant="unstyled" mt={8}>
<TabList bg={['gray.50', 'white']} p={[1, 0]} borderRadius="md">
<GetInvitationTab
iconSelected={<TelegramInvertedIcon />}
icon={<TelegramIcon />}
title="Telegram"
/>
<GetInvitationTab
iconSelected={<DiscordInvertedIcon />}
icon={<DiscordIcon />}
title="Discord"
/>
<GetInvitationTab
iconSelected={<TwitterIcon />}
icon={<TwitterIcon />}
title="Twitter"
/>
<GetInvitationTab
iconSelected={<RedditInvertedIcon />}
icon={<RedditIcon />}
title="Reddit"
/>
</TabList>
<TabPanels>
<GetInvitationTabPanel>
<GetInvitationTabTitle>Telegram</GetInvitationTabTitle>
<Text>
<Trans t={t} i18nKey="joinIdenaTelegram">
Join the official{' '}
<Link
href="https://t.me/IdenaNetworkPublic"
target="_blank"
color="blue.500"
>
Idena Telegram group
</Link>{' '}
and request an invitation code from the community.
</Trans>
</Text>
</GetInvitationTabPanel>
<GetInvitationTabPanel>
<GetInvitationTabTitle>Discord</GetInvitationTabTitle>
<Text>
<Trans t={t} i18nKey="joinIdenaDiscord">
Join{' '}
<Link
href="https://discord.gg/8BusRj7"
target="_blank"
color="blue.500"
>
Idena Community Discord
</Link>{' '}
and request an invitation code from the community in
#invite-requests channel.
</Trans>
</Text>
</GetInvitationTabPanel>
<GetInvitationTabPanel>
<GetInvitationTabTitle>Twitter</GetInvitationTabTitle>
<OrderedList spacing={2}>
<ListItem>
{t('Follow')}{' '}
<Link
href="https://twitter.com/IdenaNetwork"
target="_blank"
color="blue.500"
>
@IdenaNetwork
</Link>{' '}
</ListItem>
<ListItem>
<Stack spacing={4}>
<Text>
<Trans t={t} i18nKey="joinIdenaTwitterSendTweet">
<Link
target="_blank"
color="blue.500"
rel="noreferrer"
href="https://twitter.com/intent/tweet?text=I%20want%20to%20join%20%40IdenaNetwork%20to%20become%20a%20validator%20of%20the%20first%20Proof-of-Person%20blockchain%20%23IdenaInvite%0A%0Ahttps://www.idena.io"
>
Send a tweet
</Link>{' '}
with a hashtag #IdenaInvite from your account. To get
an invite, your account should be older than 1 year or
older than two months and have at least 50 followers.
The tweet should say:
</Trans>
</Text>
<Flex mt={4} p={[7, 10]} borderRadius="md" bg="gray.50">
<Flex direction={['column', 'row']}>
<Stack>
<Text color="gray.500">
I want to join @IdenaNetwork to become a validator
of the first Proof-of-Person blockchain
#IdenaInvite
</Text>
<Text>
<Link
href="https://www.idena.io"
target="_blank"
color="blue.500"
>
https://www.idena.io
</Link>
</Text>
</Stack>
<GetInvitationCopyButton
ml={[0, 10]}
value={
'I want to join @IdenaNetwork to become a validator of the first Proof-of-Person blockchain #IdenaInvite\n' +
'\n' +
'https://www.idena.io'
}
/>
</Flex>
</Flex>
</Stack>
</ListItem>
<ListItem>
<Stack spacing={4} pt={2}>
<Text>
<Trans t={t} i18nKey="joinIdenaTwitterGetCode">
Enter your twitter name and click{' '}
<i>Get an invitation code</i> button. The code will be
shown automatically.
</Trans>
</Text>
<Stack>
<Text color="gray.500" fontWeight="500">
{t('Your nickname')}
</Text>
<GetInvitationTwitterInput
value={nickname}
onChange={value => setNickname(value)}
/>
</Stack>
{code ? (
<Flex
boxShadow="0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)"
px={10}
py={8}
borderRadius="lg"
position="relative"
>
<Flex
direction={['column', 'row']}
justifyContent="space-between"
w="100%"
>
<Stack spacing={0}>
<Text color="muted">{t('Invitation code')}</Text>
<Text
color="gray.500"
fontWeight={500}
wordBreak="break-all"
>
{code}
</Text>
</Stack>
<GetInvitationCopyButton
value={code}
ml={[0, 10]}
/>
</Flex>
</Flex>
) : (
<Flex>
<PrimaryButton
ml="auto"
onClick={getCode}
isLoading={isWaiting}
loadingText=""
w={['100%', 'auto']}
size={size}
>
{t('Get an invitation code')}
</PrimaryButton>
</Flex>
)}
<Box ref={invitationCodeRef}></Box>
</Stack>
</ListItem>
</OrderedList>
</GetInvitationTabPanel>
<GetInvitationTabPanel>
<GetInvitationTabTitle>Reddit</GetInvitationTabTitle>
<Text color="gray.500">
<Trans t={t} i18nKey="joinIdenaReddit">
Join{' '}
<Link
href="https://www.reddit.com/r/Idena/"
target="_blank"
color="blue.500"
>
Idena subreddit
</Link>{' '}
and request an invitation code from the community.
</Trans>
</Text>
</GetInvitationTabPanel>
</TabPanels>
</Tabs>
</Flex>
</Page>
</Layout>
)
}
