@chakra-ui/react#ListItem TypeScript Examples
The following examples show how to use
@chakra-ui/react#ListItem.
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: CoindropRequirements.tsx From coindrop with GNU General Public License v3.0 | 6 votes |
CoindropRequirements: FC = () => (
<Box mt={2} textAlign="center">
<Text>
Coindrop URLs must:
</Text>
<UnorderedList listStylePosition="inside">
<ListItem>Start with a letter</ListItem>
<ListItem>Only include letters, numbers, dashes (-), and underscores (_)</ListItem>
<ListItem>End with a letter or number</ListItem>
<ListItem>Between 3 and 32 characters in length</ListItem>
</UnorderedList>
</Box>
)
Example #2
Source File: ComponentMapping.tsx From coindrop with GNU General Public License v3.0 | 6 votes |
components = { h1: ({ children }) => <Heading as="h1" my="1.5rem" size="2xl">{children}</Heading>, h2: ({ children }) => <Heading as="h2" my="1.5rem" size="xl">{children}</Heading>, h3: ({ children }) => <Heading as="h3" my="1.5rem" size="lg">{children}</Heading>, h4: ({ children }) => <Heading as="h4" my="1.5rem" size="md">{children}</Heading>, p: ({ children }) => <Text mb="1.5rem" fontSize="lg">{children}</Text>, Center, ul: ({ children }) => <UnorderedList mb="1.5rem">{children}</UnorderedList>, ol: ({ children }) => <OrderedList mb="1.5rem">{children}</OrderedList>, li: ({ children }) => <ListItem fontSize="lg">{children}</ListItem>, Image, ImageBorder, code: Code, CodeBlock, a: ({ children, href }) => <u><Link href={href} isExternal>{children}</Link></u>, NextLink: ({ children, href }) => <u><NextLink href={href}>{children}</NextLink></u>, }
Example #3
Source File: FilesList.tsx From ke with MIT License | 6 votes |
export function FilesList({
value,
onChange,
listItemIcon = Paperclip,
linkProps,
}: FilesListProps): ReactElement<FilesListProps> {
const deleteFile = (file: FileDescriptor): void => {
const restFiles = value.filter((f) => f.uuid !== file.uuid)
onChange(restFiles)
}
return (
<List>
{value.map((file) => (
<ListItem display="flex" alignItems="center" className={listItemCss} key={file.uuid}>
<ListIcon as={listItemIcon} />
{file?.url ? (
<Link href={file.url} isExternal {...linkProps}>
{file.name}
</Link>
) : (
file.name
)}
<IconButton
aria-label="Удалить"
variant="unstyled"
size="xs"
icon={<X color="red" size={16} />}
ml={2}
onClick={() => deleteFile(file)}
/>
</ListItem>
))}
</List>
)
}
Example #4
Source File: UploadButton.tsx From ke with MIT License | 6 votes |
function UploadingList({ files }: UploadingListProps): ReactElement<UploadingListProps> {
return (
<List>
{files.map((file) => (
<ListItem key={file.key}>
<ListIcon as={Loader} />
{file.name}
<Progress hasStripe isAnimated value={Math.floor((file.loaded / file.total) * 100)} />
</ListItem>
))}
</List>
)
}
Example #5
Source File: FilesList.tsx From ke with MIT License | 6 votes |
export function FilesList({
value,
listItemIcon = Paperclip,
linkProps,
}: FilesListProps): ReactElement<FilesListProps> {
return (
<List>
{value.map((file) => (
<ListItem key={file.uuid}>
<ListIcon as={listItemIcon} />
{file?.url ? (
<Link href={file.url} isExternal {...linkProps}>
{file.name}
</Link>
) : (
file.name
)}
</ListItem>
))}
</List>
)
}
Example #6
Source File: LoadingSkeleton.tsx From ksana.in with Apache License 2.0 | 6 votes |
export function LoadingSkeleton() {
const data = [1, 2, 3]
const bgBox = useColorModeValue('white', 'gray.800')
return (
<List spacing={3}>
{data.map((d: number) => (
<ListItem
key={d}
w={'full'}
bg={bgBox}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}
p={6}
>
<Skeleton height="30px" mb="4" />
<Skeleton height="10px" mb="1" />
<Skeleton height="10px" />
<HStack spacing={2} mt={4}>
<Skeleton height="40px" width="40px" />
<Skeleton height="40px" width="40px" />
<Skeleton height="40px" width="40px" />
<Skeleton height="40px" width="40px" />
</HStack>
</ListItem>
))}
</List>
)
}
Example #7
Source File: PrivateApiRequirements.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
PrivateApiRequirements = (): JSX.Element => {
const requirements: Array<RequirementsItem> = (useAppSelector(state => state.config.private_api_requirements) ?? []);
const [showProgress, setShowProgress] = useBoolean();
const refreshRequirements = () => {
setShowProgress.on();
getPrivateApiRequirements().then(requirements => {
// I like longer spinning
setTimeout(() => {
setShowProgress.off();
}, 1000);
if (!requirements) return;
store.dispatch(setConfig({ name: 'private_api_requirements', value: requirements }));
});
};
return (
<Box border='1px solid' borderColor={useColorModeValue('gray.200', 'gray.700')} borderRadius='xl' p={3} width='325px'>
<Stack direction='row' align='center'>
<Text fontSize='lg' fontWeight='bold'>Private API Requirements</Text>
<Box
_hover={{ cursor: 'pointer' }}
animation={showProgress ? `${spin} infinite 1s linear` : undefined}
onClick={refreshRequirements}
>
<BiRefresh />
</Box>
</Stack>
<UnorderedList mt={2} ml={8}>
{requirements.map(e => (
<ListItem key={e.name}>
<Stack direction='row' align='center'>
<Text fontSize='md'><strong>{e.name}</strong>:
<Box as='span' color={e.pass ? 'green' : 'red'}>{e.pass ? 'Pass' : 'Fail'}</Box>
</Text>
{(!e.pass) ? (
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>How to Fix</PopoverHeader>
<PopoverBody>
<Text>
{e.solution}
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
): null}
</Stack>
</ListItem>
))}
</UnorderedList>
</Box>
);
}
Example #8
Source File: PermissionRequirements.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
PermissionRequirements = (): JSX.Element => {
const permissions: Array<RequirementsItem> = (useAppSelector(state => state.config.permissions) ?? []);
const [showProgress, setShowProgress] = useBoolean();
const refreshRequirements = () => {
setShowProgress.on();
checkPermissions().then(permissions => {
// I like longer spinning
setTimeout(() => {
setShowProgress.off();
}, 1000);
if (!permissions) return;
store.dispatch(setConfig({ name: 'permissions', value: permissions }));
});
};
return (
<Box border='1px solid' borderColor={useColorModeValue('gray.200', 'gray.700')} borderRadius='xl' p={3} width='325px'>
<Stack direction='row' align='center'>
<Text fontSize='lg' fontWeight='bold'>macOS Permissions</Text>
<Box
_hover={{ cursor: 'pointer' }}
animation={showProgress ? `${spin} infinite 1s linear` : undefined}
onClick={refreshRequirements}
>
<BiRefresh />
</Box>
</Stack>
<UnorderedList mt={2} ml={8}>
{permissions.map(e => (
<ListItem key={e.name}>
<Stack direction='row' align='center'>
<Text fontSize='md'><strong>{e.name}</strong>:
<Box as='span' color={e.pass ? 'green' : 'red'}>{e.pass ? 'Pass' : 'Fail'}</Box>
</Text>
{(e.pass) ? (
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>How to Fix</PopoverHeader>
<PopoverBody>
<Text>
{e.solution}
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
): null}
</Stack>
</ListItem>
))}
</UnorderedList>
</Box>
);
}
Example #9
Source File: ErrorDialog.tsx From bluebubbles-server with Apache License 2.0 | 5 votes |
ErrorDialog = ({
title = 'Error!',
errorsPrefix = 'The following errors have occurred:',
errors,
closeButtonText = 'Close',
isOpen,
modalRef,
onClose
}: ErrorDialogProps): JSX.Element => {
return (
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={modalRef}
onClose={() => onClose()}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
{title}
</AlertDialogHeader>
<AlertDialogBody>
{errorsPrefix}
<br />
<br />
<UnorderedList>
{errors.map(e => {
return <ListItem key={e.id}>{e.message}</ListItem>;
})}
</UnorderedList>
</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={modalRef as React.LegacyRef<HTMLButtonElement> | undefined}
onClick={() => onClose()}
>
{closeButtonText}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
);
}
Example #10
Source File: Body.tsx From website with MIT License | 5 votes |
LI: React.FC<JSX.IntrinsicElements['li'] & ListItemProps> = ({ children, ...rest }) => {
return <ListItem {...rest}>{children}</ListItem>
}
Example #11
Source File: mdxComponents.tsx From lucide with ISC License | 5 votes |
components = {
h1: (props) => (
<HeadingAnchored as="h1" size="xl" mb={4} {...props}/>
),
h2: ({children, ...rest}) => (
<HeadingAnchored as="h2" size="lg" py={4} { ...rest}>
{children}
<Divider mt={4}/>
</HeadingAnchored>
),
h3: (props) => (
<HeadingAnchored as="h3" size="md" pt={4} mb={4} {...props}/>
),
h4: (props) => (
<HeadingAnchored as="h4" size="sm" pt={4} mb={4} {...props}/>
),
h5: (props) => (
<HeadingAnchored as="h5" size="xs" pt={2} mb={1} {...props}/>
),
h6: (props) => (
<HeadingAnchored as="h6" size="xs" pt={2} mb={1} opacity={.75} {...props}/>
),
ul: (props) => <UnorderedList my={2}>{props.children}</UnorderedList>,
ol: (props) => <OrderedList my={2}>{props.children}</OrderedList>,
li: (props) => <ListItem my={1}>{props.children}</ListItem>,
p: (props) => <Text my={4}>{props.children}</Text>,
img: ({ children, ...rest }) => <Image {...rest} borderRadius={4} my={2}>{children}</Image>,
code: ({ className, children: code }) => {
const language = className.replace('language-', '');
return (
<CodeBlock
//@ts-ignore
my={6}
code={code}
language={language}
/>
)
},
table: (props) => <Table {...props} rounded={4} mb={4}/>,
thead: Thead,
tbody: Tbody,
tr: Tr,
th: Th,
td: Td,
blockquote: (props) => (
<Alert
mt="4"
role="none"
status="warning"
variant="left-accent"
as="blockquote"
rounded={4}
my="1.5rem"
{...props}
/>
),
inlineCode: InlineCode,
hr: (props) => <Divider my={4}/>,
a: ({children, href, ...rest}) => {
let link = href
const isExternal = link.startsWith('http')
if(link.startsWith('packages/')) {
link = href.replace('packages/', '')
}
link = link.replace('.md', '')
return (
<NextLink
href={isExternal ? href : `/docs/${link}`}
{...rest}
passHref
>
<Link isExternal={isExternal} color='#F56565'>{children}</Link>
</NextLink>
)
}
}
Example #12
Source File: About.tsx From calories-in with MIT License | 4 votes |
function About({ isOpen, onClose }: Props) {
function onContact() {
window.location.href = 'mailto:[email protected]'
}
return (
<Modal isOpen={isOpen} onClose={onClose} size="2xl" scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalHeader>About </ModalHeader>
<ModalCloseButton />
<ModalBody>
<Text fontSize="lg">
<Text>Hi, I'm Vladimir, the person behind this project.</Text>
<br />
<Text>
<Text fontWeight="semibold" as="span" textColor="teal.600">
Calories-In
</Text>{' '}
is made for people who follow meal plans that involve preparing
everything by yourself and gives them full control to fine tune
the nutritional values.
</Text>
<br />
<Text>
The idea was born out of my experience of trying to find a better
alternative to Google Sheets for calculating the macros of my own
meal plans. I wanted to be able to do this on desktop as it's more
convenient but nothing really felt fast and simple enough.
</Text>
<br />
<Text>The main differences to other apps in this space are:</Text>
<br />
<List ml={8}>
<ListItem>
<ListIcon as={CheckCircle} color="teal.600" />
<Text fontWeight="semibold" as="span" textColor="teal.600">
Faster search
</Text>{' '}
: There are actually not that many foods you need when you
prepare everything yourself. This means all of the food data can
be downloaded beforehand which makes the search super fast. Of
course you can add your own foods if you'd like.{' '}
</ListItem>
<br />
<ListItem>
<ListIcon as={CheckCircle} color="teal.600" />
<Text fontWeight="semibold" as="span" textColor="teal.600">
Undo/Redo
</Text>{' '}
: Building a plan from scratch or updating an existing one
involves some back and forth choosing the right foods and
adjusting their amounts. This is especially true if you want to
be as close as possible to a specific calorie limit and have
your macros be a certain percentages split.
</ListItem>
<br />
<ListItem>
<ListIcon as={CheckCircle} color="teal.600" />
<Text fontWeight="semibold" as="span" textColor="teal.600">
Faster export
</Text>{' '}
: Creating the PDF file for your meal plan is done entirely
inside the browser. It does not involve generating and
downloading it from a server. This means I can keep the cost of
running the website low and you get your file in just a few
seconds.
</ListItem>
<br />
<ListItem>
<ListIcon as={CheckCircle} color="teal.600" />
<Text fontWeight="semibold" as="span" textColor="teal.600">
Simpler
</Text>{' '}
: There are no other pages except the editor. Most of the other
tools are bloated with additional features for professionals,
such as managing clients, creating invoices, etc.
</ListItem>
<br />
<ListItem>
<ListIcon as={CheckCircle} color="teal.600" />
<Text fontWeight="semibold" as="span" textColor="teal.600">
Fully mobile
</Text>{' '}
: You can use your phone or tablet to build your meal plans
right from your browser. If you add the app to your home screen
it will look and feel almost like a native one.
</ListItem>
</List>
<Text>
<br />
Let me know if you found it useful or have any comments in
general:
</Text>
<br />
<Button size="lg" colorScheme="teal" onClick={onContact}>
Contact me directly
</Button>
<br />
<br />
<Text>No email will go unanswered, I promise :)</Text>
</Text>
</ModalBody>
<ModalFooter>
<Button size="lg" onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
)
}
Example #13
Source File: faq.tsx From coindrop with GNU General Public License v3.0 | 4 votes |
accordionText: AccordionText[] = [
{
title: "How are there no fees?",
body: (
<Box>
<Text mb="1rem">
Coindrop does not process any payments.
</Text>
<Text mb="0.25rem">
Transactions are either sent:
</Text>
<UnorderedList mb="1rem">
<ListItem>Peer-to-peer (e.g. Bitcoin)</ListItem>
<ListItem>Through a payment provider of choice (e.g. PayPal)</ListItem>
</UnorderedList>
<Text mb="1rem">
{'Depending on the payment method senders choose, there may be a small transaction fee for them. '}
<b>That's the beauty of Coindrop - senders can choose the payment method with the lowest transaction fee.</b>
</Text>
</Box>
),
},
{
title: "How does this site make money?",
body: (
<Box>
<Text mb="1rem">
To cover costs and fund development of this site, we may display relevant advertisements, offers, and affiliate links.
</Text>
<Text>
Keep in mind the code to this website is open-source so if we ever implemented obtrusive monetization tactics, you could always fork the project on Github :)
</Text>
</Box>
),
},
{
title: "What if one of my payment methods is not listed?",
body: (
<Text>
{"We will add any payment method option as long as it's safe and not against the law. Submit a request "}
<Link
href={githubAddPaymentMethodRequest}
isExternal
>
<u>here</u>
</Link>
.
</Text>
),
},
{
title: "Who created this?",
body: (
<Box>
<Text>
<Link
href={`${markJacksonWebsite}/about`}
isExternal
>
<u>Mark Jackson</u>
</Link>
</Text>
</Box>
),
},
{
title: "How can I contribute?",
body: (
<Text>
{'Submit feature requests, report bugs, and contribute code on our public '}
<Link href={githubUrl} isExternal>
<u>Github</u>
</Link>
{' page.'}
</Text>
),
},
{
title: "How can I support?",
body: (
<>
<Text>
{'Donate at '}
<NextLink href="/coindrop" passHref>
<Link>
<u>coindrop.to/coindrop</u>
</Link>
</NextLink>
</Text>
<Text>
{'Give us a Like on '}
<Link href="https://alternativeto.net/software/coindrop/" isExternal>
<u>AlternativeTo.net</u>
</Link>
</Text>
<Text mt={2}>
Thank you! ?
</Text>
</>
),
},
]
Example #14
Source File: TopNavigation.tsx From website with MIT License | 4 votes |
TopNavigation: React.FC<TopNavigationProps> = ({ title }) => {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<Grid
as="nav"
templateColumns={`1fr 1fr minmax(auto, ${theme.sizes['6xl']}) 1fr 1fr`}
backgroundColor="gray.900"
color="white"
height={['88px', '80px']}
zIndex={50}
>
<List display="flex" flexWrap="wrap" alignItems="center" gridColumn="3/4" m={0} p={0}>
<ListItem display="flex" alignItems="center" pos="relative" h="100%" mr="auto">
<NextChakraLink
href="/"
display="flex"
alignItems="center"
py=".5rem"
px="1rem"
h="100%"
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
<Logo height={40} fill={theme.colors.white} title={title} />
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
</ListItem>
<ListItem display={['none', 'flex']} alignItems="center" h="100%">
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
h="100%"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</ListItem>
<ListItem py="1.5rem" px="1rem" display={['flex', 'none']} alignItems="center" h="100%">
<IconButton variant="outline" aria-label="Open menu" icon={<HamburgerIcon />} onClick={onOpen} />
<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Menu Utama</DrawerHeader>
<DrawerBody>
<NextChakraLink
href="/community"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Komunitas
</NextChakraLink>
<NextChakraLink
href="/submit-a-talk"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
Ajukan Topik
</NextChakraLink>
<NextChakraLink
href="/faq"
display="flex"
alignItems="center"
py="1.5rem"
px="1rem"
color="inherit"
lineHeight={1}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)', textDecoration: 'none' }}
>
FAQ
</NextChakraLink>
</DrawerBody>
</DrawerContent>
</Drawer>
</ListItem>
</List>
</Grid>
)
}
Example #15
Source File: ketentuan-layanan.tsx From ksana.in with Apache License 2.0 | 4 votes |
function Terms() {
const textColor = useColorModeValue('gray.500', 'gray.300')
return (
<Layout>
<MetaHead
title="Ketentuan Layanan | Ksana.in"
description="Persyaratan layanan yang merupakan perjanjian mengikat dan mengatur penggunaan Anda atas Ksana.in"
/>
<VStack spacing={4} textAlign="center" as="section" mt="32">
<VStack spacing={4} textAlign="center">
<Heading
as="h1"
fontWeight={700}
fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
lineHeight={'110%'}
color="orange.400"
>
Ketentuan Layanan
</Heading>
<Image width={200} height={122} src={'/images/orange/ksana.svg'} alt="Ksana.in" />
</VStack>
<Container maxW={'4xl'} mx="auto" as="section">
<VStack spacing={8} textAlign="left">
<Text color={textColor}>
Terima kasih telah menggunakan{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
. Persyaratan layanan ini merupakan perjanjian yang mengikat dan mengatur penggunaan
Anda atas{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
dan akses ke situs web{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>{' '}
. Dengan menggunakan salah satu layanan{' '}
<Link href="/" color="orange.400">
{BRAND}
</Link>
, atau mengakses salah satu situs web kami, Anda setuju untuk terikat oleh persyaratan
layanan berikut.
</Text>
<Text color={textColor}>
Jika Anda memasuki perjanjian ini atas nama perusahaan atau badan hukum lainnya, Anda
menyatakan bahwa Anda memiliki kewenangan untuk mengikat entitas tersebut,
afiliasinya, semua pengguna yang mengakses layanan kami melalui akun Anda. Dalam kasus
tersebut, istilah "Anda" atau "milik Anda" merujuk pada perusahaan atau entitas hukum,
dan pengguna yang terkait dengannya. Jika Anda tidak memiliki kewenangan, jangan
setuju dengan syarat dan ketentuan ini atas nama perusahaan atau badan hukum lainnya.
</Text>
<Text color={textColor}>
Jika Anda tidak setuju dengan persyaratan layanan ini,{' '}
<Text as="span" fontWeight="bold">
jangan terima persyaratannya, dan jangan gunakan layanannya.
</Text>
</Text>
<Text color={textColor}>
Kami berhak memperbarui dan mengubah persyaratan layanan dari waktu ke waktu tanpa
pemberitahuan sebelumnya. Setiap fitur baru yang menambah atau meningkatkan layanan
saat ini, termasuk rilis alat dan sumber daya baru, harus tunduk pada persyaratan
layanan. Penggunaan berkelanjutan atas layanan setelah perubahan tersebut merupakan
persetujuan Anda untuk perubahan tersebut. Anda dapat meninjau versi terbaru dari
persyaratan layanan kapan saja di sini.
</Text>
<Text color={textColor}>
Pelanggaran salah satu persyaratan di bawah ini akan mengakibatkan penghentian akun
Anda. Meskipun kami melarang perilaku dan konten tertentu di layanan, Anda memahami
dan setuju bahwa kami tidak dapat bertanggung jawab atas konten yang diposting di
layanan dan Anda mungkin akan melihat materi tersebut. Anda setuju untuk menggunakan
layanan dengan risiko Anda sendiri.
</Text>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Ketentuan Privasi
</Heading>
<Text color={textColor}>
Kami menghormati privasi Anda. Pernyataan lengkap tentang kebijakan privasi kami dapat
ditemukan di{' '}
<Link href="/kebijakan-privasi" color="orange.400">
halaman kebijakan privasi
</Link>
. Kebijakan privasi kami secara tegas dimasukkan sebagai referensi ke dalam perjanjian
ini.
</Text>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Persyaratan Akun
</Heading>
<Text color={textColor}>Untuk menggunakan layanan ini, Anda harus:</Text>
<List spacing={3}>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Berusia 11 tahun atau lebih dan jadilah manusia. Akun yang didaftarkan oleh "bot"
atau metode otomatis lainnya tidak diizinkan. berikan nama lengkap resmi Anda,
alamat email yang valid, dan informasi lainnya yang diminta untuk menyelesaikan
proses pendaftaran.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda bertanggung jawab untuk menjaga keamanan akun dan kata sandi Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak dapat dan tidak akan bertanggung jawab atas kehilangan atau kerusakan
akibat kegagalan Anda untuk mematuhi kewajiban keamanan ini. Login Anda hanya dapat
digunakan oleh satu orang - satu login yang digunakan bersama oleh banyak orang
tidak diizinkan. Anda dapat membuat login terpisah untuk sebanyak mungkin orang
sesuai rencana Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda bertanggung jawab atas semua konten yang diposting dan aktivitas yang terjadi
di bawah akun Anda (bahkan ketika konten diposting oleh orang lain yang memiliki
akun di bawah akun Anda).
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Anda tidak boleh menggunakan layanan untuk tujuan ilegal atau tidak sah. Anda tidak
boleh, dalam penggunaan layanan, melanggar hukum apa pun di yurisdiksi Anda
(termasuk namun tidak terbatas pada undang-undang hak cipta atau merek dagang)
</ListItem>
</List>
<Heading
as="h3"
fontWeight={700}
fontSize={{ base: 'lg', sm: 'xl', md: '2xl' }}
lineHeight={'110%'}
mt="8"
mb="2"
>
Hak Cipta dan Kepemilikan Konten
</Heading>
<List spacing={3}>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak mengklaim hak kekayaan intelektual atas materi yang Anda berikan ke
layanan. Profil dan materi yang Anda unggah tetap menjadi milik Anda. Namun, jika
Anda mengatur konten Anda untuk dilihat secara publik, Anda setuju untuk mengizinkan
orang lain untuk melihat konten Anda.
</ListItem>
<ListItem color={textColor}>
<ListIcon as={HiCheck} color="green.500" />
Kami tidak menyaring konten, tetapi kami memiliki hak (tetapi bukan kewajiban) atas
kebijakan kami sendiri untuk menolak atau menghapus konten apa pun yang tersedia
melalui layanan.
</ListItem>
</List>
<Text color={textColor} mt="8">
Pertanyaan tentang ketentuan layanan kami dapat ditujukan ke [email protected]
</Text>
<Text color={textColor} mt="8">
Terakhir diperbarui pada{' '}
<Text color="orange.400" as="span">
29 Mei 2021
</Text>
</Text>
</VStack>
</Container>
</VStack>
</Layout>
)
}
Example #16
Source File: Login.tsx From dope-monorepo with GNU General Public License v3.0 | 4 votes |
export default function Login(props: Props) {
const toast = createStandaloneToast(theme);
const [ loading, setLoading ] = useState(false);
const [ loggedIn, setLoggedIn ] = useState(false);
useEffect(() => {
props.manager.events.on('loggedIn', () => setLoading(true));
}, []);
const login = () => {
if ((window.ethereum as any).chainId !== '0x1') {
toast({
title: "Wrong network",
description: "Please switch to the main Ethereum network",
status: "error",
...toastStyle,
});
return;
}
props.authenticator.login()
.then(() => {
setLoggedIn(true)
toast({
title: "Success",
description: "You have successfully logged in!",
status: "success",
...toastStyle
});
})
.catch((err) => {
setLoggedIn(false);
toast({
title: "Error " + (err.code ?? ""),
description: err.message ?? err,
status: "error",
...toastStyle
});
});
}
return (
<ChakraProvider theme={theme}>
<Center style={{
height: "100vh",
backdropFilter: "brightness(50%)",
}}>
{loading ? <Spinner size="xl" color="white" /> : <Container style={{
padding: "1rem",
borderStyle: "solid",
boxShadow: "0px 0px 15px rgba(0,0,0,1)",
borderColor: "black",
borderWidth: "0px",
backgroundColor: "white",
borderRadius: "7px",
}}>
<VStack>
<Heading>
Please login before accessing the game
</Heading>
<br />
<Text>
To login, you need to sign a message using your wallet provider. Our personal favorite is Metamask but you can use any other extension or wallet provider.
</Text>
<UnorderedList spacing={4} style={{
paddingLeft: "1rem",
}}>
<ListItem>
Click on this button to trigger the sign message
<br />
<Button variant="primary" onClick={login}>
Sign
</Button>
</ListItem>
<ListItem>Your wallet provider will popup a dialog and you will need to press `Sign`</ListItem>
<ListItem>
Wait for this to show as logged in
<HStack style={{
paddingLeft: "1rem",
paddingRight: "1rem",
}}>
{loggedIn ? <CheckIcon /> : <Spinner color='red.500' />}
<Text style={{
paddingTop: "1rem",
}}>{loggedIn ? 'Logged in' : 'Not logged in'}</Text>
</HStack>
</ListItem>
<ListItem>Press continue</ListItem>
</UnorderedList>
<Button
disabled={!loggedIn}
onClick={() => props.manager.events.emit('loggedIn')}
style={{
position: "relative",
top: "30px"
}}
variant="primary"
>
Continue
</Button>
</VStack>
</Container>}
</Center>
</ChakraProvider>
);
}
Example #17
Source File: ChatType.tsx From dope-monorepo with GNU General Public License v3.0 | 4 votes |
export default function ChatType(props: Props) {
const [ unreadMessages, setUnreadMessages ] = React.useState(0);
const [ inputText, setInputText ] = React.useState('');
const [ messages, setMessages ] = React.useState(props.messagesStore);
const [ canSendMessage, setCanSendMessage ] = React.useState((props.chatMessageBoxes?.length ?? 0) < 3);
const messagesListRef = React.useRef<HTMLUListElement>(null);
let state = React.useRef({
i: -1,
});
useEffect(() => {
props.manager.events.on('chat_message', (message: DataTypes[NetworkEvents.SERVER_PLAYER_CHAT_MESSAGE]) => {
setMessages(m => [...m, message]);
const lastMessageEl = messagesListRef.current?.lastElementChild as HTMLLIElement;
if (lastMessageEl &&
lastMessageEl?.parentElement?.parentElement && !isVisible(lastMessageEl, lastMessageEl?.parentElement?.parentElement))
setUnreadMessages(u => u + 1);
});
// constantly check chatMessageBoxes size and if it's less than 3, set canSendMessage to true
const interval = setInterval(() => setCanSendMessage((props.chatMessageBoxes?.length ?? 0) < 3));
return () => clearInterval(interval);
}, []);
const handleInputKey = (e: KeyboardEvent) => {
if (e.key === 'Enter' && canSendMessage) handleSubmit(inputText);
else if (e.key === 'Escape')
// send "nothing", chat will get closed & message will not get sent
handleSubmit('');
else if (e.key === 'ArrowUp') {
state.current.i = ++state.current.i % props.precedentMessages.length;
const precedentMessage = props.precedentMessages[state.current.i];
if (precedentMessage) setInputText(precedentMessage);
} else if (e.key === 'ArrowDown') {
// rolling window, wrap around
state.current.i = --state.current.i % props.precedentMessages.length;
if (state.current.i < 0) state.current.i = props.precedentMessages.length - 1;
const precedentMessage = props.precedentMessages[state.current.i];
if (precedentMessage) setInputText(precedentMessage);
}
};
const handleSubmit = (content: string) => {
if (content.length > 150)
return;
props.manager.events.emit('chat_submit', content);
};
return (
<ChakraProvider theme={theme}>
<Container
style={{
position: 'absolute',
backgroundColor: 'rgba(0,0,0,0.7)',
borderRadius: '0.5rem',
boxShadow: '0 0.5rem 1rem rgba(0, 0, 0, 0.7)',
height: '30%',
width: '30%',
left: "1%",
bottom: "1%",
}}>
<Stack style={{
paddingTop: '1rem',
height: '95%',
}}>
<div style={{
display: 'flex',
overflow: 'auto',
flexDirection: 'column-reverse',
marginBottom: '-3%',
}}>
<List ref={messagesListRef} spacing={-2} style={{
}}>
<Text style={{
color: 'blueviolet',
}}>
Welcome to the Dopeverse!
</Text>
{messages.map((message, i) => <ListItem key={i}>
<HStack style={{
opacity: '0.8'
}}>
<Text style={{
color: 'white',
}}>
{message.author}: {message.message}
</Text>
<Spacer />
<Text style={{
color: 'grey',
fontSize: '0.6rem',
}}>
{new Date(message.timestamp).toLocaleString()}
</Text>
</HStack>
</ListItem>)}
</List>
</div>
<Spacer />
<Center>
<Button
style={{
marginRight: '1%',
marginTop: '-10%'
}}
variant="primary"
backgroundColor="red.600"
hidden={inputText.length <= 150}
onClick={() => setInputText(inputText.substring(0, 150))}
>
❌ Message too long
</Button>
<Button
style={{
marginTop: '-10%',
}}
variant="primary"
hidden={unreadMessages === 0}
onClick={(e) => {
setUnreadMessages(0);
e.currentTarget.hidden = true;
if (messagesListRef.current)
(messagesListRef.current as HTMLOListElement).lastElementChild?.scrollIntoView({
behavior: 'smooth',
});
}}
>
⬇️ New message ({unreadMessages})
</Button>
</Center>
<Center>
<InputGroup width="90%" size="md">
<Input
autoFocus={true}
focusBorderColor="white"
onBlur={({ target }) => target.focus()}
pr="4.5rem"
placeholder="Message"
_placeholder={{ color: '#b8b8b8' }}
textColor="#f5f5f5"
value={inputText}
onChange={({ target }) => setInputText(target.value)}
onKeyDown={handleInputKey}
style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
}}
/>
<InputRightElement width="4.5rem" style={{ paddingRight: '2%' }}>
<Button h="1.75rem" size="sm" disabled={!canSendMessage} onClick={() => handleSubmit(inputText)}>
Send
</Button>
</InputRightElement>
</InputGroup>
</Center>
</Stack>
</Container>
</ChakraProvider>
);
}
Example #18
Source File: StateTree.tsx From engine with MIT License | 4 votes |
StateTree: view = ({
data,
path,
_viewId,
isBodyVisible = observe.views[prop._viewId].data.isBodyVisible,
updateIsBodyVisible = update.views[prop._viewId].data.isBodyVisible,
}) => {
if (!data) {
return null;
}
let isRoot = false;
if (path === undefined) {
path = "";
isRoot = true;
} else {
if (path === "") {
path = `${data.name}`;
} else {
path = `${path}.${data.name}`;
}
}
const hasChildren = data.children && Object.keys(data.children).length > 0;
const hasElements =
(data.elements?.view?.length || 0) +
(data.elements?.producer?.length || 0) >
0;
return (
<ListItem ml="0" key={_viewId}>
{!isRoot && hasChildren && (
<Flex mb="2">
<Tag
variant={isBodyVisible ? "solid" : "subtle"}
cursor="pointer"
size="sm"
userSelect="none"
onClick={() => updateIsBodyVisible.set(!isBodyVisible)}
>
<TagLeftIcon>
{!isBodyVisible && <ChevronDownIcon />}
{isBodyVisible && <ChevronUpIcon />}
</TagLeftIcon>
<TagLabel>{data.name}</TagLabel>
</Tag>
{hasElements && (
<ElementsSummary parentId={_viewId} elements={data.elements} />
)}
{path.split(".").length > 1 && (
<Text fontSize="sm" ml="4" color="gray.500">
{path}
</Text>
)}
</Flex>
)}
{!isRoot && !hasChildren && (
<Flex mb="2">
<Flex>
<Text fontSize="sm">{data.name}</Text>
{hasElements && (
<ElementsSummary parentId={_viewId} elements={data.elements} />
)}
</Flex>
{path.split(".").length > 1 && (
<Text fontSize="sm" ml="4" color="gray.500">
{path}
</Text>
)}
</Flex>
)}
{isRoot && (
<Text color="gray.500" fontWeight="bold">
Root
</Text>
)}
<ElementsList
elements={data.elements}
parentId={_viewId}
path={path}
></ElementsList>
{(isBodyVisible || isRoot) && (
<Children data={data.children} path={path} />
)}
</ListItem>
);
}
Example #19
Source File: index.tsx From engine with MIT License | 4 votes |
Header = () => (
<AccordionItem>
<Heading>
<AccordionButton _expanded={{ bg: "gray.300", color: "white" }}>
<Box flex="1" textAlign="left">
Header
</Box>
<AccordionIcon />
</AccordionButton>
</Heading>
<AccordionPanel pb={4}>
<HStack mb="3">
<Box w="70%">
Fill values from a past runtime call, a unit test or auto determine
values based on observe and update dependencies
</Box>
<Box w="30%">
<Button size="sm" mr="3" mb="2" color="teal">
Auto
</Button>
<Popover>
<PopoverTrigger>
<Button size="sm" mr="3" mb="2" color="purple">
From call
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>Runtime call history (5)</PopoverHeader>
<PopoverCloseButton />
<PopoverBody>
<OrderedList>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:15:10.123
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:13:2.130
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 14:12:41.500
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 13:21:20.341
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
23/02/2022 12:40:19.983
</ListItem>
</OrderedList>
</PopoverBody>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger>
<Button size="sm" color="blue">
From test
</Button>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverHeader>Tests (100% coverage)</PopoverHeader>
<PopoverCloseButton />
<PopoverBody>
<OrderedList>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should ensure guards work (30% coverage)
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should do computation when y is less (70% coverage)
</ListItem>
<ListItem
cursor="pointer"
_hover={{
color: "teal.500",
}}
>
should reject if y is greater than (64% coverage)
</ListItem>
</OrderedList>
</PopoverBody>
</PopoverContent>
</Popover>
</Box>
</HStack>
<Divider mb="4" />
<Box mb="4">
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="pie" w="32" />
<Input defaultValue="3.14" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="http" w="32" />
<Input defaultValue={`axios from "axios"`} />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="[mock]" bg="black.100" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="operation" w="32" />
<Input defaultValue="prop.operation" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="sum" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="foo" w="32" />
<Input defaultValue="observe.foo.value" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="123" bg="teal.800" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="bam" w="32" />
<Input defaultValue="observe.bar.internal.something" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="321" bg="teal.800" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="updateSome" w="32" />
<Input defaultValue="update.a.value.somewhere" />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input defaultValue="444" bg="yellow.700" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
<HStack>
<InputGroup size="sm" w="70%">
<InputLeftAddon children="" w="32" />
<Input placeholder="enter something..." />
</InputGroup>
<InputGroup size="sm" w="30%">
<Input placeholder="sample value" />
<InputRightAddon children={<SettingsIcon />} cursor="pointer" />
</InputGroup>
</HStack>
</Box>
<HStack>
<Text w="70%" size="sm">
Last run took 14ms
</Text>
<ButtonGroup variant="outline" spacing="4">
<Button size="sm" colorScheme="black">
Save as test
</Button>
<Button size="sm" colorScheme="green" variant="solid">
Run
</Button>
</ButtonGroup>
</HStack>
</AccordionPanel>
</AccordionItem>
)
Example #20
Source File: home.tsx From portfolio with MIT License | 4 votes |
Home = () => {
return (
<Flex direction="column" align="center">
<Flex direction={["column", "column", "row"]}>
<MotionBox
opacity="0"
initial={{
translateX: -150,
opacity: 0
}}
animate={{
translateX: 0,
opacity: 1,
transition: {
duration: ANIMATION_DURATION
}
}}
m="auto"
mb={[16, 16, "auto"]}
>
<Avatar
size={"2xl"}
src={UserIcon}
// src={"https://avatars2.githubusercontent.com/u/37842853?v=4"}
/>
</MotionBox>
<MotionFlex
ml={["auto", "auto", 16]}
m={["auto", "initial"]}
w={["90%", "85%", "80%"]}
maxW="800px"
opacity="0"
justify="center"
direction="column"
initial={{
opacity: 0,
translateX: 150
}}
animate={{
opacity: 1,
translateX: 0,
transition: {
duration: ANIMATION_DURATION
}
}}
>
<Header underlineColor={ORANGE} emoji="?" mt={0} className="face">
Hey!
</Header>
<Box as="h2" fontSize="2xl" fontWeight="400" textAlign="left">
My name is{" "}
<Box as="strong" fontWeight="600">
Ahmad
</Box>{" "}
and I'm a{" "}
<Box as="span" whiteSpace="nowrap">
Full Stack Developer and
</Box>{" "}
<Box as="span" whiteSpace="nowrap">
an open source lover
</Box>
from{" "}
<Box as="span" whiteSpace="nowrap">
Pakistan ??
</Box>
</Box>
<Box as="h2" fontSize="2xl" fontWeight="400" mt={5} textAlign="left">
This is my digital garden, where I write about the things I'm
working on and share what I've learned. ?
</Box>
</MotionFlex>
</Flex>
<MotionBox
w="100%"
opacity="0"
initial={{
translateY: 80
}}
animate={{
translateY: 0,
opacity: 1,
transition: {
delay: ANIMATION_DURATION - 0.1,
duration: ANIMATION_DURATION
}
}}
>
<Box mt={10}>
<Stack
mb={10}
mx={[0, 0, 10]}
padding={4}
align="start"
borderLeft="4px solid"
borderColor={"#53c8c4"}
color={"whatsapp"}
_hover={{ shadow: "lg" }}
backgroundColor={useColorModeValue("gray.100", "#1e2533")}
rounded="sm"
fontSize="md"
>
<Text textAlign="center" color="#53c8c4" fontWeight="bold">
Highlights
</Text>
<UnorderedList textAlign="left" paddingLeft={5} m={0}>
<ListItem>
<Link as={NavLink} to="/open-source">
Live/Local Github Repos
<Badge ml="1" colorScheme="green">
New
</Badge>
</Link>
</ListItem>
<ListItem>
<Link as={NavLink} to="/story-timeline">
Story page
</Link>
</ListItem>
<ListItem>
<Link as={NavLink} to="/tech-stack">
Tech Stack
</Link>
</ListItem>
<ListItem>
<Link as={NavLink} to="/achievements">
Achievements
</Link>
</ListItem>
</UnorderedList>
</Stack>
<Projects projects={projectsList} />
</Box>
</MotionBox>
</Flex>
);
}
Example #21
Source File: notebook-post.tsx From portfolio with MIT License | 4 votes |
NotebookPost: React.SFC<PostProps> = () => {
const textColor = useColorModeValue("gray.500", "gray.200");
const post = articles[4];
return (
<>
<VStack mt={0} mb={6} spacing={1} align="start">
<Heading as="h1" fontSize="3xl" lineHeight="shorter" fontWeight="bold">
{post.title}
</Heading>
<Divider
orientation="horizontal"
opacity={1}
borderBottomWidth={0}
height={"1px"}
bg={"gray.200"}
/>
</VStack>
<Flex
justifyContent={"space-between"}
flexDirection={["column", "row", "row"]}
>
<HStack spacing={2} isInline>
<Text fontSize="sm" fontWeight="400" color={textColor}>
{post.published}
</Text>
<Text fontSize="sm" fontWeight="400" color={textColor}>
•
</Text>
<Tooltip hasArrow label="Views" placement="top">
<Flex alignItems="center">
<Text
fontSize="sm"
noOfLines={1}
fontWeight="400"
align="left"
color={textColor}
>
{post.views}
</Text>
<Icon as={FaEye} ml={1} color={textColor} />
</Flex>
</Tooltip>
<Text fontSize="sm" fontWeight="600" color={textColor}>
•
</Text>
<Tooltip hasArrow label="Read time" placement="top">
<Text
fontSize="sm"
noOfLines={1}
fontWeight="400"
align="left"
color={textColor}
>
{post.readTime}
</Text>
</Tooltip>
</HStack>
<HStack spacing={1} alignItems="center">
{post.tags.map(tag => (
<Tag
size="sm"
padding="0 3px"
key={tag}
colorScheme={getTagColor(tag)}
>
{tag}
</Tag>
))}
</HStack>
</Flex>
<HStack align="end" mt={5}>
<Link href={post.live} isExternal>
<Button
ml={2}
variant="outline"
size={["sm"]}
color={useColorModeValue("green.600", "green.200")}
bg={useColorModeValue("white", "gray.800")}
leftIcon={<BiLinkExternal size={18} />}
>
Demo
</Button>
</Link>
<Link href={post.github_url} isExternal>
<Button
ml={2}
variant="outline"
size={["sm"]}
color={useColorModeValue("green.600", "green.200")}
bg={useColorModeValue("white", "gray.800")}
leftIcon={<FiGithub size={18} />}
>
Github link
</Button>
</Link>
</HStack>
<Box height={["35vh", "45vh", "55vh", "70vh"]} marginTop={5}>
<Carousel images={post.images} />
</Box>
<VStack spacing={5} align={"start"} mt={6}>
<Header fontSize={"xl"} mt={0} mb={0}>
What will you learn?
</Header>
<Box fontSize="md">
<UnorderedList textAlign="left" paddingLeft={5} m={0}>
<ListItem>How to create a CRUD app with react</ListItem>
<ListItem>How to create a responsive app using ChakraUi</ListItem>
<ListItem>How to use animations with framer-motion</ListItem>
<ListItem>How to create slider with framer-motion</ListItem>
</UnorderedList>
</Box>
</VStack>
<VStack spacing={5} align={"start"} mt={6}>
<Header fontSize={"xl"} mt={0} mb={0}>
Built with
</Header>
<Box fontSize="md">
<UnorderedList textAlign="left" paddingLeft={5} m={0}>
<ListItem>
Programming language -{" "}
<Link
href="https://www.typescriptlang.org/"
isExternal
color={"blue.500"}
>
Typescript
</Link>
</ListItem>
<ListItem>
Front-end library -{" "}
<Link
href="https://github.com/facebook/react/"
isExternal
color={"blue.500"}
>
React
</Link>
</ListItem>
<ListItem>
UI components -{" "}
<Link href="https://chakra-ui.com/" isExternal color={"blue.500"}>
Chakra-ui
</Link>
</ListItem>
<ListItem>
Animation library -{" "}
<Link
href="https://www.framer.com/motion/"
isExternal
color={"blue.500"}
>
Framer motion
</Link>
</ListItem>
<ListItem>
Notes display -{" "}
<Link
href="https://github.com/tsuyoshiwada/react-stack-grid"
isExternal
color={"blue.500"}
>
react-stack-grid
</Link>
</ListItem>
<ListItem>
Forms Validation -{" "}
<Link
href="https://react-hook-form.com/"
isExternal
color={"blue.500"}
>
React hook form
</Link>
</ListItem>
<ListItem>
Icons -{" "}
<Link
href="https://react-icons.github.io/react-icons/"
isExternal
color={"blue.500"}
>
React icons
</Link>
</ListItem>
<ListItem>
Images placeholder -{" "}
<Link href="https://blurha.sh/" isExternal color={"blue.500"}>
blurhash
</Link>
</ListItem>
<ListItem>
Progressive image loading -{" "}
<Link
href="https://github.com/FormidableLabs/react-progressive-image"
isExternal
color={"blue.500"}
>
react-progressive-image
</Link>
</ListItem>
</UnorderedList>
</Box>
</VStack>
</>
);
}
Example #22
Source File: HomeLayout.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
HomeLayout = (): JSX.Element => {
const address = useAppSelector(state => state.config.server_address);
const fcmClient = useAppSelector(state => state.config.fcm_client);
const password = useAppSelector(state => state.config.password);
const port = useAppSelector(state => state.config.socket_port);
const qrCode = fcmClient ? buildQrData(password, address, fcmClient) : null;
return (
<Box p={3} borderRadius={10}>
<Flex flexDirection="column">
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>Connection Details</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
This page will detail your current connection details. This includes your
server address and your local port.
</Text>
<br />
<UnorderedList>
<ListItem><strong>Server Address:</strong> This is the address that your clients will connect to</ListItem>
<ListItem><strong>Local Port:</strong> This is the port that the HTTP server is running on,
and the port you will use when port forwarding
for a dynamic DNS
</ListItem>
</UnorderedList>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Spacer />
<Flex flexDirection="row" justifyContent="space-between">
<Stack>
<Flex flexDirection="row" alignItems='center'>
<Text fontSize='md' fontWeight='bold' mr={2}>Server Address: </Text>
{(!address) ? (
<SkeletonText noOfLines={1} />
) : (
<Text fontSize='md'>{address}</Text>
)}
<Tooltip label='Copy Address'>
<IconButton
ml={3}
size='md'
aria-label='Copy Address'
icon={<BiCopy size='22px' />}
onClick={() => copyToClipboard(address)}
/>
</Tooltip>
<Popover placement='bottom' isLazy={true}>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }} >
<Tooltip label='Show QR Code'>
<IconButton
ml={1}
size='md'
aria-label='Show QR Code'
icon={<AiOutlineQrcode size='24px' />}
/>
</Tooltip>
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>QR Code</PopoverHeader>
<PopoverBody>
<Flex justifyContent='center' flexDirection='column' alignItems='center'>
<Text>
Your QR Code contains your server configuration so that clients can connect.
Your QR Code should remain <strong>private</strong> as it contains sensitive information!
</Text>
<Box border="5px solid" borderColor='white' mt={4} height='266px' width='266px' borderRadius='lg' mb={3}>
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/* @ts-ignore: ts2876 */}
{(qrCode) ? <QRCode value={qrCode as string} /> : null}
</Box>
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Flex flexDirection="row">
<Text fontSize='md' fontWeight='bold' mr={2}>Local Port: </Text>
{(!port) ? (
<SkeletonText noOfLines={1} />
) : (
<Text fontSize='md'>{port}</Text>
)}
</Flex>
</Stack>
<Divider orientation="vertical" />
</Flex>
</Stack>
<Stack direction='column' p={5}>
<Flex flexDirection='row' justifyContent='flex-start' alignItems='center'>
<Text fontSize='2xl'>iMessage Highlights</Text>
<Popover trigger='hover'>
<PopoverTrigger>
<Box ml={2} _hover={{ color: 'brand.primary', cursor: 'pointer' }}>
<AiOutlineInfoCircle />
</Box>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Information</PopoverHeader>
<PopoverBody>
<Text>
These are just some fun stats that I included to give you a quick "snapshot"
of your iMessage history on the Mac Device. This does not include messages that
are on Apple's servers, only what is local to this device.
</Text>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
<Divider orientation='horizontal' />
<Spacer />
{ /* Delays are so older systems do not freeze when requesting data from the databases */ }
<SimpleGrid columns={3} spacing={5}>
<TotalMessagesStatBox />
<TopGroupStatBox delay={200} />
<BestFriendStatBox delay={400} />
<DailyMessagesStatBox delay={600} />
<TotalPicturesStatBox delay={800} />
<TotalVideosStatBox delay={1000} />
</SimpleGrid>
</Stack>
</Flex>
</Box>
);
}
Example #23
Source File: DynamicDnsDialog.tsx From bluebubbles-server with Apache License 2.0 | 4 votes |
DynamicDnsDialog = ({
onCancel,
onConfirm,
isOpen,
modalRef,
onClose,
port = 1234
}: DynamicDnsDialogProps): JSX.Element => {
const [address, setAddress] = useState('');
const [error, setError] = useState('');
const isInvalid = (error ?? '').length > 0;
return (
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={modalRef}
onClose={() => onClose()}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize='lg' fontWeight='bold'>
Set Dynamic DNS
</AlertDialogHeader>
<AlertDialogBody>
<Text>Enter your Dynamic DNS URL, including the schema and port. Here are some examples:</Text>
<br />
<UnorderedList>
<ListItem>http://thequickbrownfox.ddns.net:{port}</ListItem>
<ListItem>http://bluebubbles.no-ip.org:{port}</ListItem>
</UnorderedList>
<br />
<Text>If you plan to use your own custom certificate, please remember to use <strong>"https://"</strong> as your URL scheme</Text>
<br />
<FormControl isInvalid={isInvalid}>
<FormLabel htmlFor='address'>Dynamic DNS</FormLabel>
<Input
id='address'
type='text'
maxWidth="20em"
value={address}
placeholder={`http://<your DNS>:${port}`}
onChange={(e) => {
setError('');
setAddress(e.target.value);
}}
/>
{isInvalid ? (
<FormErrorMessage>{error}</FormErrorMessage>
) : null}
</FormControl>
</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={modalRef as React.LegacyRef<HTMLButtonElement> | undefined}
onClick={() => {
if (onCancel) onCancel();
onClose();
}}
>
Cancel
</Button>
<Button
ml={3}
bg='brand.primary'
ref={modalRef as React.LegacyRef<HTMLButtonElement> | undefined}
onClick={() => {
if (address.length === 0) {
setError('Please enter a Dynamic DNS address!');
return;
}
if (onConfirm) onConfirm(address);
onClose();
}}
>
Save
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
);
}