Stats
Library Stats
import * as React from 'react';
import { Container, Text, SimpleGrid, Box, chakra, Stack, HStack, Icon } from '@chakra-ui/react';
import { AiFillCheckCircle } from 'react-icons/ai';
interface StatData {
label: string;
score: string;
}
const statData: StatData[] = [
{
label: 'Weekly downloads',
score: '3.2M'
},
{
label: 'Stars on GitHub',
score: '77k'
},
{
label: 'Contributors',
score: '2.4k'
},
{
label: 'Followers on Twitter',
score: '17k'
}
];
const planList = [
'Customer obsessed. We put our customers front & center.',
'Transparency. Most of our work is public.',
'Freedom. We work from anywhere in the world.',
'Autonomy. We want to create a safe, high-trust team.',
'Excellence. We are aiming high, and we know it.'
];
const BrandStats = () => {
return (
<Container maxW="5xl" p={{ base: 4, sm: 10 }}>
<Stack direction={{ base: 'column', md: 'row' }} justifyContent="space-between">
<Stack spacing={4}>
<chakra.h1 fontSize="2xl" lineHeight={1.2} fontWeight="bold">
Our ultimate goal
</chakra.h1>
<Text fontSize="md" color="gray.400" maxW="480px">
We aim high trying to design the most effective and efficient tool for building UIs, for
developers and designers. ChakraUI started back in 2019, to unify React. Since then,
we've become a community of over 2M developers from every corner of the world.
</Text>
<Stack spacing={2}>
<Text fontSize="md" color="gray.400">
We plan on doing all that cultivating our values:
</Text>
{planList.map((data, index) => (
<HStack key={index} alignItems="center" spacing={1} fontSize="md">
<Icon as={AiFillCheckCircle} w={4} h={4} color="blue.400" />
<Text fontSize="md">{data}</Text>
</HStack>
))}
</Stack>
</Stack>
<Stack>
<SimpleGrid columns={2} spacing={5} pt={8} pl={{ base: 0, md: 10 }} margin="auto 0">
{statData.map((data, index) => (
<Stack
key={index}
pl={3}
py={1}
pr={1}
borderLeft="2px solid"
borderLeftColor="blue.400"
justifyContent="space-between"
>
<Box fontSize="2xl" fontWeight="bold" color="blue.400">
{data.score}
</Box>
<Text fontSize="md">{data.label}</Text>
</Stack>
))}
</SimpleGrid>
</Stack>
</Stack>
</Container>
);
};
export default BrandStats;
Blog Stats
import * as React from 'react';
import { Container, Text, SimpleGrid, Box } from '@chakra-ui/react';
interface StatData {
id: number;
label: string;
score: string;
}
const statData: StatData[] = [
{
id: 1,
label: 'Total post reactions',
score: '1,730'
},
{
id: 2,
label: 'Total post views',
score: '31,573'
},
{
id: 3,
label: 'Listings created',
score: '5'
}
];
const BlogStats = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={5} mt={12} mb={4}>
{statData.map((data) => (
<Box key={data.id} p={5} boxShadow="md" rounded="md" borderWidth={1}>
<Text fontWeight="extrabold" fontSize="x-large">
{data.score}
</Text>
<Text>{data.label}</Text>
</Box>
))}
</SimpleGrid>
</Container>
);
};
export default BlogStats;
Stats with icons
import React from 'react';
import {
HStack,
VStack,
Text,
useColorModeValue,
Flex,
Link,
Icon,
SimpleGrid,
Container,
Stack
} from '@chakra-ui/react';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
// Here we have used react-icons package for the icons
import { HiOutlineMail } from 'react-icons/hi';
import { BsArrowUpShort, BsArrowDownShort } from 'react-icons/bs';
import { AiOutlineLike, AiOutlineEye } from 'react-icons/ai';
interface StatData {
id: number;
label: string;
score: number;
icon: any;
percentage: string;
}
const statData: StatData[] = [
{
id: 1,
label: 'Total post reactions',
score: 1730,
icon: AiOutlineLike,
percentage: '10%'
},
{
id: 2,
label: 'Total post views',
score: 3245,
icon: AiOutlineEye,
percentage: '30%'
},
{
id: 3,
label: 'Total messages',
score: 100,
icon: HiOutlineMail,
percentage: '30%'
}
];
const StatsWithIcons = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={5} mt={6} mb={4}>
{statData.map((data, index) => (
<Card key={index} data={data} />
))}
</SimpleGrid>
</Container>
);
};
const Card = ({ data }: { data: StatData }) => {
return (
<motion.div whileHover={{ translateY: -5 }}>
<Stack
direction="column"
rounded="md"
boxShadow={useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'2px 4px 6px rgba(9, 17, 28, 0.9)'
)}
w="100%"
textAlign="left"
align="start"
spacing={0}
role="group"
overflow="hidden"
>
<HStack py={6} px={5} spacing={4} bg={useColorModeValue('gray.100', 'gray.800')} w="100%">
<Flex
justifyContent="center"
alignItems="center"
rounded="lg"
p={2}
bg="green.400"
position="relative"
w={12}
h={12}
overflow="hidden"
lineHeight={0}
boxShadow="inset 0 0 1px 1px rgba(0, 0, 0, 0.015)"
>
<Icon as={data.icon} w={6} h={6} color="white" />
</Flex>
<VStack spacing={0} align="start" maxW="lg" h="100%">
<Text as="h3" fontSize="md" noOfLines={2} color="gray.400">
{data.label}
</Text>
<HStack spacing={2}>
<Text as="h2" fontSize="lg" fontWeight="extrabold">
{data.score}
</Text>
<Flex>
{Number(data.score) > 100 ? (
<Icon as={BsArrowUpShort} w={6} h={6} color="green.400" />
) : (
<Icon as={BsArrowDownShort} w={6} h={6} color="red.400" />
)}
<Text as="h2" fontSize="md">
{data.percentage}
</Text>
</Flex>
</HStack>
</VStack>
</HStack>
<Flex
visibility="hidden"
opacity={0}
height={0}
alignItems="center"
px={5}
_groupHover={{ visibility: 'visible', opacity: 1, height: '40px' }}
transition="opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, height 0.3s ease-in-out"
>
<Link fontSize="md">View All</Link>
</Flex>
</Stack>
</motion.div>
);
};
export default StatsWithIcons;
Brand Stats
import * as React from 'react';
import { Container, Text, SimpleGrid, Box, Center } from '@chakra-ui/react';
interface StatData {
id: number;
label: string;
score: string;
}
const statData: StatData[] = [
{
id: 1,
label: 'Clients',
score: '550'
},
{
id: 2,
label: 'Projects',
score: '421'
},
{
id: 3,
label: 'Hours of Support',
score: '1,364'
},
{
id: 4,
label: 'Hard Workers',
score: '38'
}
];
const BrandStats = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<Center>
<Box textAlign="center">
<Text fontWeight="extrabold" fontSize="x-large" mb={2}>
<Box as="span" display="inline-block" position="relative">
Trusted by Developers
<Box
as="span"
display="block"
position="absolute"
bg={'blue.600'}
w={'100%'}
h={'1px'}
/>
</Box>
</Text>
<Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
</Box>
</Center>
<SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={{ base: 2, sm: 5 }} mt={12} mb={4}>
{statData.map((data) => (
<Box key={data.id} p={{ base: 2, sm: 5 }} textAlign="center">
<Text fontWeight="extrabold" fontSize="xx-large">
{data.score}
</Text>
<Text fontSize="sm">{data.label}</Text>
</Box>
))}
</SimpleGrid>
</Container>
);
};
export default BrandStats;
Split with image
import * as React from 'react';
import { Text, SimpleGrid, Box, Image, Flex, Stack } from '@chakra-ui/react';
interface StatData {
id: number;
label: string;
score: string;
}
const statData: StatData[] = [
{
id: 1,
label: 'Clients',
score: '550'
},
{
id: 2,
label: 'Projects',
score: '421'
},
{
id: 3,
label: 'Revenue',
score: '$5M'
}
];
const SplitWithImage = () => {
return (
<Stack minH="100vh" direction={{ base: 'column', md: 'row' }}>
<Flex flex={1}>
<Image alt="Cover image" objectFit="cover" src="https://bit.ly/2k1H1t6" />
</Flex>
<Flex p={8} flex={1} align="center" justifyContent="center">
<Flex direction="column">
<Text fontWeight="extrabold" fontSize="x-large" mb={2}>
<Box as="span" display="inline-block" position="relative">
Trusted by Our Clients
<Box as="span" display="block" position="absolute" bg="blue.600" w="100%" h="1px" />
</Box>
</Text>
<Text>
Lorem ipsum dolor sit amet consecte adipiscing elit. Vestibulum eros ex, mollis eget
urna eu, convallis interdum ligula. Aenean posuere quam quam, id ultrices nisi vehicula
et.
</Text>
<SimpleGrid columns={{ base: 2, sm: 3, md: 3 }} spacing={1} mt={12} mb={4}>
{statData.map((data) => (
<Box key={data.id} p={{ base: 2, sm: 5 }} textAlign="center">
<Text fontWeight="extrabold" fontSize="xx-large">
{data.score}
</Text>
<Text fontSize="sm">{data.label}</Text>
</Box>
))}
</SimpleGrid>
</Flex>
</Flex>
</Stack>
);
};
export default SplitWithImage;