@chakra-ui/react#Heading JavaScript Examples
The following examples show how to use
@chakra-ui/react#Heading.
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: MeetupSpeakers.js From codeursenseine.com with MIT License | 6 votes |
|
MeetupSpeakers = ({ speakers, ...props }) => (
<StackInline spacing={10} {...props}>
{speakers &&
speakers.map((speaker) => (
<Box key={speaker.twitter}>
<Heading as="h5" size="sm" color="brand.900">
{speaker.name}
</Heading>
<Image
boxSize="7.5rem"
objectFit="cover"
src={speaker.avatar}
alt={speaker.name}
fallbackSrc="/default.jpg"
borderRadius={4}
mt={2}
/>
{speaker.twitter && (
<A href={`https://twitter.com/${speaker.twitter}`} target="_blank">
@{speaker.twitter}
</A>
)}
</Box>
))}
</StackInline>
)
Example #2
| Source File: Card.js From DAOInsure with MIT License | 6 votes |
|
function Card({ cardTitle, backgroundColor, children, isLoading }) {
return (
<VStack borderRadius="10px" borderStyle="solid" borderColor="whatsapp.500" borderWidth="1px" width="100%" alignItems="flex-start">
<Box backgroundColor={backgroundColor} width="100%" borderBottomWidth="1px" borderColor="whatsapp.500" px="20px" py="20px">
<Skeleton isLoaded={!isLoading}>
<Heading fontSize="16px">
{cardTitle}
</Heading>
</Skeleton>
</Box>
<VStack alignItems="flex-start" px="20px" py="20px" width="100%">
{children}
</VStack>
</VStack>
);
}
Example #3
| Source File: MDXComponents.js From benjamincarlson.io with MIT License | 6 votes |
|
MDXComponents = {
h1: (props) => <Heading as="h1" size="xl" my={4} {...props} />,
h2: (props) => <Heading as="h2" size="lg" fontWeight="bold" {...props} />,
h3: (props) => <Heading as="h3" size="md" fontWeight="bold" {...props} />,
h4: (props) => <Heading as="h4" size="sm" fontWeight="bold" {...props} />,
h5: (props) => <Heading as="h5" size="sm" fontWeight="bold" {...props} />,
h6: (props) => <Heading as="h6" size="xs" fontWeight="bold" {...props} />,
inlineCode: (props) => (
<Code colorScheme="yellow" fontSize="0.84em" {...props} />
),
br: (props) => <Box height="24px" {...props} />,
hr: Hr,
a: CustomLink,
p: (props) => <Text as="p" mt={0} lineHeight="tall" {...props} />,
ul: (props) => <Box as="ul" pt={2} pl={4} ml={2} {...props} />,
ol: (props) => <Box as="ol" pt={2} pl={4} ml={2} {...props} />,
li: (props) => <Box as="li" pb={1} {...props} />,
blockquote: Quote,
}
Example #4
| Source File: components.js From idena-web with MIT License | 6 votes |
|
export function FormSectionTitle(props) {
return (
<Heading
as="h3"
pt="2"
pb="3"
mb={2}
fontSize="mdx"
fontWeight={500}
lineHeight="5"
{...props}
/>
)
}
Example #5
| Source File: Podcast.js From grandcast.fm with Apache License 2.0 | 6 votes |
|
Podcast = ({ podcast }) => {
const { title, itunesId, description, artwork, categories } = podcast
const [subscribeMutation, { data }] = useMutation(PODCAST_SUBSCRIBE)
return (
<Flex rounded="lg" borderWidth="2px" m={4}>
<Box width="200px">
<Image src={artwork} boxSize="200px" />
<Button
width="100%"
onClick={() =>
subscribeMutation({ variables: { itunesID: itunesId } })
}
>
<AddIcon />
</Button>
</Box>
<Box m={4} maxWidth="300px">
<Heading noOfLines={2}>{title}</Heading>
<Text noOfLines={3}>{description}</Text>
<Stack isInline>
{categories.slice(0, 3).map((c) => {
return <Tag key={c}>{c}</Tag>
})}
</Stack>
</Box>
</Flex>
)
}
Example #6
| Source File: 404.js From blobs.app with MIT License | 6 votes |
|
NotFoundPage = () => (
<>
<SEO title="404: Not found" />
<Box textAlign="center" py="24">
<Logo />
<Heading>404: Not Found</Heading>
<Text fontSize="xl" my={5}>
You just hit a route that doesn't exist...
</Text>
</Box>
</>
)
Example #7
| Source File: chakraMarkdownTheme.jsx From scaffold-directory with MIT License | 6 votes |
|
MdH1 = ({ children }) => {
const { borderColor } = useCustomColorModes();
return (
<Heading as="h1" size="xl" mt={6} mb={4} pb={2} borderBottom="1px solid" borderColor={borderColor}>
{children}
</Heading>
);
}
Example #8
| Source File: Header.jsx From fastapi-react with MIT License | 6 votes |
|
Header = () => {
return (
<Flex
as="nav"
align="center"
justify="space-between"
wrap="wrap"
padding="0.5rem"
bg="gray.400"
>
<Flex align="center" mr={5}>
<Heading as="h1" size="sm">Todos</Heading>
<Divider />
</Flex>
</Flex>
);
}
Example #9
| 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 #10
| Source File: MeetupSpeaker.js From codeursenseine.com with MIT License | 5 votes |
|
MeetupSpeaker = ({ speaker, ...props }) => {
const md = new Remarkable("full", {
html: true,
});
// Save original method to invoke.
var originalRender = md.renderer.rules.link_open;
md.renderer.rules.link_open = function () {
// Invoke original method first.
let result = originalRender.apply(null, arguments);
result = result.replace(
">",
'target="_blank" rel="noopener noreferrer" class="remarkable-link">'
);
return result;
};
const bio = md.render(speaker.bio);
return (
<Stack spacing={2} {...props}>
<Heading as="h5" size="sm" color="brand.900">
{speaker.name}
</Heading>
<Stack isInline spacing={6}>
<Image
boxSize={{ base: "5rem", sm: "7.5rem" }}
flex="none"
objectFit="cover"
src={speaker.avatar}
alt={speaker.name}
fallbackSrc="/default.jpg"
borderRadius={4}
/>
<Stack>
<Box
className="remarkable"
dangerouslySetInnerHTML={{ __html: bio }}
/>
{speaker.twitter && (
<Text>
Twitter :{" "}
<A
href={`https://twitter.com/${speaker.twitter}`}
target="_blank"
>
@{speaker.twitter}
</A>
</Text>
)}
</Stack>
</Stack>
</Stack>
);
}
Example #11
| Source File: Stats.js From DAOInsure with MIT License | 5 votes |
|
function Stats(props) {
return (
<VStack width='100%'>
<VStack
borderColor='whatsapp.500'
borderStyle='solid'
borderWidth='1px'
alignItems='flex-start'
px='20px'
py='15px'
width='100%'
boxShadow='base'
borderRadius='10px'>
<Text fontWeight='600'>Treasury Funds</Text>
<Heading fontSize='24px' textColor='whatsapp.500'>
50 DAI
</Heading>
</VStack>
<VStack
borderColor='whatsapp.500'
borderStyle='solid'
borderWidth='1px'
alignItems='flex-start'
px='20px'
py='15px'
width='100%'
boxShadow='base'
borderRadius='10px'>
<Text fontWeight='600'>Total Claims</Text>
<Heading fontSize='24px' textColor='whatsapp.500'>
{props.claims}
</Heading>
</VStack>
<VStack
borderColor='whatsapp.500'
borderStyle='solid'
borderWidth='1px'
alignItems='flex-start'
px='20px'
py='15px'
width='100%'
boxShadow='base'
borderRadius='10px'>
<Text fontWeight='600'>DAO Members</Text>
<Heading fontSize='24px' textColor='whatsapp.500'>
{props.daoMemberCount}
</Heading>
</VStack>
</VStack>
);
}
Example #12
| Source File: GearList.js From benjamincarlson.io with MIT License | 5 votes |
|
GearList = () => {
const { data, error } = useSWR('/api/gear', fetcher)
const { colorMode } = useColorMode()
const color = {
light: 'black',
dark: 'white'
}
if (error) return <div>Error loading gear!</div>
if (!data) return <CircularProgress isIndeterminate color={color[colorMode]}></CircularProgress>
var software = data.filter(function (g) {
return g.software == 1
})
var hardware = data.filter(function (g) {
return g.software == 0
})
var cameraGear = data.filter(function (g) {
return g.software == 2
})
return (
<>
<Heading letterSpacing="tight" mb={2} mt={2} as="h2" size="xl">
Hardware
</Heading>
{hardware.map((g, i) => (
<Gear key={i} gear={g} />
))}
<Heading letterSpacing="tight" mb={2} mt={4} as="h2" size="xl">
Software
</Heading>
{software.map((g, i) => (
<Gear key={i} gear={g} />
))}
<Heading letterSpacing="tight" mb={2} mt={4} as="h2" size="xl">
Camera Gear
</Heading>
{cameraGear.map((g, i) => (
<Gear key={i} gear={g} />
))}
</>
)
}
Example #13
| Source File: too-many-tabs.js From idena-web with MIT License | 5 votes |
|
export default function ManyTabs() {
const router = useRouter()
const {t} = useTranslation()
return (
<Flex
flexWrap="wrap"
color="brand.gray"
bg="gray.100"
fontSize="md"
h="100vh"
flex={1}
w="100%"
align="center"
justify="center"
>
<Flex align="center" justify="center" px={20} py={20} bg="white">
<Stack alignItems="center" spacing={4}>
<Image
ignoreFallback
src="/static/idena-logo-circle.svg"
alt="logo"
w={16}
/>
<Heading fontSize="lg" fontWeight={500} color="gray.500">
{t('Error, many tabs…')}
</Heading>
<Text color="muted" w="320px" textAlign="center">
{t(
'Idena supports only one active tab with the app. Please reload this page to continue using this tab or close it.'
)}
</Text>
<IconButton
onClick={() => router.reload()}
rightIcon={<RefreshIcon boxSize={5} />}
>
{t('Reload page')}
</IconButton>
</Stack>
</Flex>
</Flex>
)
}
Example #14
| Source File: Modal.js From blobs.app with MIT License | 5 votes |
|
Modal = ({ title, src, children, actions, size = '2xl' }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Box onClick={onOpen}>{src}</Box>
<ChakModal
isOpen={isOpen}
onClose={onClose}
isCentered
motionPreset="scale"
size={size}
autoFocus={false}
returnFocusOnClose={false}
>
<ModalOverlay background="rgba(78,86,107,0.71)" />
<ModalContent>
<ModalHeader px={{ base: '2', lg: '10' }}>
<Flex align="center">
<Flex
direction={{ base: 'column', lg: 'row' }}
align="center"
justify={{ base: 'center', lg: 'space-between' }}
flex="1"
>
<Heading fontSize="xl" variant="main">
{title}
</Heading>
<Box>{actions}</Box>
</Flex>
<Button
onClick={onClose}
variant="subtle"
pos="relative"
right={{ base: '0', lg: '-20px' }}
>
<CloseIcon />
</Button>
</Flex>
</ModalHeader>
<Divider />
<ModalBody py="5" px="10">
{typeof children === 'function' ? children() : children}
</ModalBody>
</ModalContent>
</ChakModal>
</>
);
}
Example #15
| 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 #16
| 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 #17
| Source File: MeetupLayout.js From codeursenseine.com with MIT License | 4 votes |
|
MeetupLayout = ({ children, title }) => {
const data = useStaticQuery(graphql`
{
sponsors: allFile(
filter: {
sourceInstanceName: { eq: "sponsors" }
childMdx: { frontmatter: { isMeetupSponsor: { eq: true } } }
}
sort: { order: ASC, fields: childMdx___frontmatter___name }
) {
nodes {
childMdx {
frontmatter {
name
link
logo {
publicURL
}
}
}
}
}
associations: allFile(
filter: {
sourceInstanceName: { eq: "associations" }
internal: {}
extension: { eq: "mdx" }
}
sort: { fields: childMdx___frontmatter___name }
) {
nodes {
childMdx {
frontmatter {
name
link
logo {
publicURL
}
}
}
}
}
}
`);
return (
<Layout theme="meetups">
<Seo title={title} />
<Grid templateColumns={{ base: "1fr", md: "2.5fr 1fr" }} gap={8}>
<Box>{children}</Box>
<Stack spacing={10}>
<Stack spacing={6}>
<Heading as="h2" size="lg" fontWeight="normal" mb={8}>
Sponsors meetups
</Heading>
<Grid templateColumns="1fr 1fr" gap={4}>
{data.sponsors.nodes.map(({ childMdx: sponsor }) => (
<Card
isLink
as="a"
href={sponsor.frontmatter.link}
title={sponsor.frontmatter.name}
key={sponsor.frontmatter.name}
p={0}
>
<Image
src={sponsor.frontmatter.logo.publicURL}
alt={sponsor.frontmatter.name}
/>
</Card>
))}
</Grid>
</Stack>
<Stack spacing={6}>
<Heading as="h2" size="lg" fontWeight="normal" mb={8}>
Associations
</Heading>
<Grid templateColumns="1fr 1fr" gap={4}>
{data.associations.nodes.map(({ childMdx: association }) => (
<Card
isLink
as="a"
href={association.frontmatter.link}
title={association.frontmatter.name}
key={association.frontmatter.name}
p={0}
>
<Flex align="center" justify="center">
<Image
src={association.frontmatter.logo.publicURL}
alt={association.frontmatter.name}
/>
</Flex>
</Card>
))}
</Grid>
</Stack>
</Stack>
</Grid>
</Layout>
);
}
Example #18
| Source File: ClaimsList.js From DAOInsure with MIT License | 4 votes |
|
function ClaimsList({ claims }) {
let history = useHistory();
return (
<VStack alignItems='flex-start' width='100%' spacing={4}>
{claims.map((claim) => {
return (
<VStack
key={claim[0].toNumber()}
alignItems='flex-start'
borderStyle='solid'
borderWidth='1px'
borderRadius='10px'
borderColor='whatsapp.500'
px={6}
py={4}
width='100%'>
<HStack
justifyItems='flex-start'
alignItems='flex-start'
width='100%'>
<Box>
<HStack>
<Box
borderStyle='solid'
borderWidth='2px'
borderRadius='full'
borderColor='whatsapp.500'
padding='2px'>
<Avatar
size='sm'
icon={
<Jazzicon
diameter='32'
address={claim[1]}
/>
}
/>
</Box>
<Text>{claim[1]}</Text>
<Tag
colorScheme='whatsapp'
fontWeight='600'>
? : {claim[4].toNumber()}
</Tag>
<Tag
colorScheme='whatsapp'
fontWeight='600'>
? : {claim[5].toNumber()}
</Tag>
</HStack>
</Box>
<Spacer />
</HStack>
<Link
cursor='pointer'
to={`/voting/${claim[0].toNumber()}`}>
<Heading fontSize='20px' textColor='whatsapp.500'>
{claim[2]}
</Heading>
</Link>
<Text>{claim.claimSummary}</Text>
<Text fontWeight='600'>{claim.startTime}</Text>
</VStack>
);
})}
</VStack>
);
}
Example #19
| Source File: Hero.js From benjamincarlson.io with MIT License | 4 votes |
|
export default function Hero() {
return (
<Box bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")}>
<Flex
w="100%"
flexDir={["column", "column", "row"]}
align="center"
px={4}
mt={[8, 8, 16]}
mb={8}
maxW="1200px"
mx="auto"
>
<Flex flexDir="column" w={["100%", "100%", "50%"]} mr={[0, 0, 4]}>
<motion.div
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: .7, delay: .4 }}
>
<Heading
letterSpacing="tight"
mb={4}
as="h1"
size="xl"
fontWeight={700}
>
Hello! I'm Benjamin Carlson -
</Heading>
</motion.div>
<motion.div
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: .7, delay: .8 }}
>
<Text
fontSize="xl"
color={useColorModeValue("gray.600", "gray.500")}
mb={6}
>
A <strong>software engineer ??</strong>, <strong>creator ?</strong>, and <strong>student ??</strong> living and working in CT. You've stumbled onto my online portfolio, resume, blog, and all things in between.
</Text>
</motion.div>
<motion.div
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: .7, delay: 1.2 }}
>
<Flex flexDir={["column", "row", "row"]}>
<Link href="https://youtube.com/benjamincarlson" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} mr={[0, 2, 2]} mb={[2, 0, 0]} isExternal>
<Button
w={["100%", "100%", null]}
colorScheme="red"
size="md"
rightIcon={<YoutubeIcon fontSize="xl" />}
boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
_hover={{ transform: "translateY(-2px)", opacity: .85, bgColor: useColorModeValue("red.400", "red.500") }}
>
Visit my YouTube
</Button>
</Link>
<Link href="https://github.com/sponsors/bjcarlson42" _hover={{ textDecor: 'none' }} w={["100%", "100%", null]} isExternal>
<Button
w={["100%", "100%", null]}
colorScheme="gray"
variant="outline"
size="md"
rightIcon={<GitHubIcon fontSize="xl" />}
boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
_hover={{ transform: "translateY(-2px)", bgColor: useColorModeValue("gray.100", "gray.800") }}
>
Sponsor me on GitHub
</Button>
</Link>
</Flex>
</motion.div>
</Flex>
<Box mt={[10, 10, 0]} w={["100%", "100%", "50%"]}>
<motion.div
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: .7, delay: 1.6 }}
>
<AspectRatio ratio={16 / 9}>
<iframe src="https://www.youtube.com/embed/uNKBWrkMO_Q" alt="Featured YouTube video" allowFullScreen={true} style={{ borderRadius: 10 }} />
</AspectRatio>
</motion.div>
</Box>
</Flex>
</Box>
)
}
Example #20
| Source File: [id].js From idena-web with MIT License | 4 votes |
|
export default function Certificate({id, certificate}) {
const {
isOpen: isMenuOpen,
onOpen: onMenuOpen,
onClose: onMenuClose,
} = useDisclosure()
const {t} = useTranslation()
const menuRef = useRef()
useClickOutside(menuRef, () => {
onMenuClose()
})
const {data: identity, isLoading: identityIsLoading, isFetched} = useQuery(
['fetch-identity', certificate.coinbase],
() => fetchIdentity(certificate.coinbase, true),
{
retry: false,
refetchOnWindowFocus: false,
}
)
const identityState = identity?.state || IdentityStatus.Undefined
return (
<Flex
background="rgba(17, 17, 17, 0.8)"
flexDirection="column"
alignItems="center"
justifyContent="center"
flex={1}
height="100vh"
>
<Flex
borderRadius="md"
backgroundColor="white"
justifyContent="center"
px={10}
py={8}
direction="column"
overflow="hidden"
position="relative"
>
<CertificateTypeLabel type={certificate.type} />
<Flex direction="column" alignItems="center" px={5}>
<Image ignoreFallback src="/static/idena-logo-round.svg" h={16} />
<Heading fontSize="lg" fontWeight="500" mt="45px">
{t('Certificate')}
</Heading>
<Text color="muted" fontSize="md" mt={2}>
{t('Training validation is passed successfully')}
</Text>
<Stack
mt={7}
spacing={3 / 2}
bg="gray.50"
px={6}
py={4}
rounded="lg"
fontSize="sm"
w={280}
>
<Flex justifyContent="space-between">
<Box> {t('Short session score')}</Box>
<Box>{toPercent(certificate.shortScore / 6)}</Box>
</Flex>
<Flex justifyContent="space-between">
<Box> {t('Long session score')}</Box>
<Box>{toPercent(certificate.longScore / 18)}</Box>
</Flex>
<Flex justifyContent="space-between">
<Box> {t('Reporting score')}</Box>
<Box>{toPercent(certificate.reportScore / 6)}</Box>
</Flex>
</Stack>
<Stack isInline spacing={3} align="center" w={280} mt={8}>
<Avatar size={8} address={certificate.coinbase} />
<Stack spacing={0} overflow="hidden" w="100%">
{identityIsLoading ? (
<Skeleton h={4} w={20}></Skeleton>
) : (
<Heading fontSize="md" fontWeight={500} lineHeight={4}>
{mapIdentityToFriendlyStatus(identityState)}
</Heading>
)}
<Heading
fontSize="sm"
textOverflow="ellipsis"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={500}
color="muted"
lineHeight="shorter"
>
{certificate.coinbase}
</Heading>
</Stack>
{isFetched && identityState === IdentityStatus.Undefined && (
<Flex position="relative">
<Icon
as={MdMoreVert}
cursor="pointer"
boxSize={5}
onClick={onMenuOpen}
/>
<Flex
position="absolute"
borderRadius="lg"
py={2}
boxShadow="0 4px 6px 0 rgba(83, 86, 92, 0.24), 0 0 2px 0 rgba(83, 86, 92, 0.2)"
right={0}
top={6}
zIndex={100}
bg="white"
display={isMenuOpen ? 'flex' : 'none'}
ref={menuRef}
>
<IconButton
w="100%"
color="brandGray.080"
icon={<AddUserIcon color="blue.500" boxSize={5} />}
_hover={{bg: 'gray.50'}}
_active={{bg: 'gray.50'}}
onClick={() => {
onMenuClose()
openExternalUrl(
`https://app.idena.io/dna/invite?address=${certificate.coinbase}`
)
}}
>
{t('Send invite')}
</IconButton>
</Flex>
</Flex>
)}
</Stack>
<Divider mt={7}></Divider>
</Flex>
<Flex
mt={16}
justifyContent="space-between"
w="100%"
alignItems="center"
>
<Box fontSize="md" color="muted" lineHeight={4}>
{new Date(certificate.timestamp).toLocaleDateString()}
</Box>
<Flex>
<Link
target="_blank"
href={`https://telegram.me/share/url?url=${encodeURIComponent(
`https://app.idena.io/certificate/${id}`
)}&text=${encodeURIComponent(
`I am looking for an invitation code to join Idena. Please find my ${CertificateTypeTitle(
certificate.type
).toUpperCase()} training validation certificate in the link attached.`
)}`}
_hover={{color: 'blue.500'}}
>
<TelegramIcon boxSize={5} />
</Link>
</Flex>
</Flex>
</Flex>
</Flex>
)
}
