Stacked Lists
Aritcles list
import { Fragment } from 'react';
import {
Container,
Box,
chakra,
Flex,
Stack,
VStack,
HStack,
Grid,
Icon,
Divider,
Link,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { IconType } from 'react-icons';
import { FaRegComment, FaRegHeart, FaRegEye } from 'react-icons/fa';
interface ArticleAttributes {
title: string;
link: string;
created_at: string;
meta: {
reactions: number;
comments: number;
views: number;
};
}
const articles: ArticleAttributes[] = [
{
title: 'Started 2022 by updating portfolio website',
link: 'https://mahmad.me/blog/started-2022-by-updating-portfolio-website-1jde-temp-slug-4553258',
created_at: '21 Jan 2022',
meta: {
reactions: 225,
comments: 20,
views: 500
}
},
{
title: 'Create professional portfolio website with Nextjs and ChakraUI',
link: 'https://mahmad.me/blog/create-professional-portfolio-website-with-nextjs-and-chakraui-4lkn',
created_at: '20 Jun 2021',
meta: {
reactions: 400,
comments: 25,
views: 300
}
},
{
title: `Find out what's new in my portfolio website`,
link: 'https://mahmad.me/blog/what-s-new-in-my-portfolio-websitea',
created_at: '31 Sept 2022',
meta: {
reactions: 5,
comments: 15,
views: 150
}
}
];
const Articles = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Flex justifyContent="left" mb={3}>
<chakra.h3 fontSize="2xl" fontWeight="bold" textAlign="center">
Articles
</chakra.h3>
</Flex>
<VStack border="1px solid" borderColor="gray.400" rounded="md" overflow="hidden" spacing={0}>
{articles.map((article, index) => (
<Fragment key={index}>
<Grid
templateRows={{ base: 'auto auto', md: 'auto' }}
w="100%"
templateColumns={{ base: 'unset', md: '4fr 2fr 2fr' }}
p={{ base: 2, sm: 4 }}
gap={3}
alignItems="center"
_hover={{ bg: useColorModeValue('gray.200', 'gray.700') }}
>
<Box gridColumnEnd={{ base: 'span 2', md: 'unset' }}>
<chakra.h3 as={Link} href={article.link} isExternal fontWeight="bold" fontSize="lg">
{article.title}
</chakra.h3>
<chakra.p
fontWeight="medium"
fontSize="sm"
color={useColorModeValue('gray.600', 'gray.300')}
>
Published: {article.created_at}
</chakra.p>
</Box>
<HStack
spacing={{ base: 0, sm: 3 }}
alignItems="center"
fontWeight="medium"
fontSize={{ base: 'xs', sm: 'sm' }}
color={useColorModeValue('gray.600', 'gray.300')}
>
<ArticleStat icon={FaRegComment} value={article.meta.comments} />
<ArticleStat icon={FaRegHeart} value={article.meta.reactions} />
<ArticleStat icon={FaRegEye} value={article.meta.views} />
</HStack>
<Stack
spacing={2}
direction="row"
fontSize={{ base: 'sm', sm: 'md' }}
justifySelf="flex-end"
alignItems="center"
>
{['Manage', 'Edit'].map((label, index) => (
<ArticleSettingLink key={index} label={label} />
))}
</Stack>
</Grid>
{articles.length - 1 !== index && <Divider m={0} />}
</Fragment>
))}
</VStack>
</Container>
);
};
const ArticleStat = ({ icon, value }: { icon: IconType; value: number }) => {
return (
<Flex p={1} alignItems="center">
<Icon as={icon} w={5} h={5} mr={2} />
<chakra.span> {value} </chakra.span>
</Flex>
);
};
const ArticleSettingLink = ({ label }: { label: string }) => {
return (
<chakra.p
as={Link}
_hover={{ bg: useColorModeValue('gray.400', 'gray.600') }}
p={1}
rounded="md"
>
{label}
</chakra.p>
);
};
export default Articles;
Notifications list
import { Fragment } from 'react';
import {
Container,
Flex,
Stack,
VStack,
Icon,
Divider,
useColorModeValue,
Avatar,
Text
} from '@chakra-ui/react';
// Here we have used react-icons package for the icon
import { BsDot } from 'react-icons/bs';
interface Notification {
notification: string;
dateTime: string;
userName: string;
userAvatar: string;
isOnline: boolean;
}
const notifications: Notification[] = [
{
notification: `It's <span style="font-weight: 600">Dan Abrahmov's</span> birthday. Wish him well!`,
dateTime: '2 days ago',
userName: 'Dan Abrahmov',
userAvatar: 'https://bit.ly/dan-abramov',
isOnline: true
},
{
notification: `<span style="font-weight: 600">Kent Dodds</span> liked your photo.`,
dateTime: 'yesterday',
userName: 'Kent Dodds',
userAvatar: 'https://bit.ly/kent-c-dodds',
isOnline: true
},
{
notification: `<span style="font-weight: 600">Jena Karlis</span> registered new client as <span style="font-weight: 600">Trilia</span>.`,
dateTime: '4 days ago',
userName: 'Jena Karlis',
userAvatar:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=334&q=80',
isOnline: false
}
];
const NotificationsList = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<VStack
boxShadow={useColorModeValue(
'2px 6px 8px rgba(160, 174, 192, 0.6)',
'2px 6px 8px rgba(9, 17, 28, 0.9)'
)}
bg={useColorModeValue('gray.100', 'gray.800')}
rounded="md"
overflow="hidden"
spacing={0}
>
{notifications.map((notification, index) => (
<Fragment key={index}>
<Flex
w="100%"
justifyContent="space-between"
alignItems="center"
_hover={{ bg: useColorModeValue('gray.200', 'gray.700') }}
>
<Stack spacing={0} direction="row" alignItems="center">
<Flex p={4}>
<Avatar size="md" name={notification.userName} src={notification.userAvatar} />
</Flex>
<Flex direction="column" p={2}>
<Text
color={useColorModeValue('black', 'white')}
fontSize={{ base: 'sm', sm: 'md', md: 'lg' }}
dangerouslySetInnerHTML={{ __html: notification.notification }}
/>
<Text
color={useColorModeValue('gray.400', 'gray.200')}
fontSize={{ base: 'sm', sm: 'md' }}
>
{notification.dateTime}
</Text>
</Flex>
</Stack>
{notification.isOnline && (
<Flex p={4}>
<Icon as={BsDot} w={10} h={10} color="blue.400" />
</Flex>
)}
</Flex>
{notifications.length - 1 !== index && <Divider m={0} />}
</Fragment>
))}
</VStack>
</Container>
);
};
export default NotificationsList;
Media Traffic with table
import * as React from 'react';
import {
Container,
Box,
chakra,
Flex,
Divider,
TableContainer,
Table,
Thead,
Tbody,
Th,
Tr,
Td,
useColorModeValue
} from '@chakra-ui/react';
interface Network {
name: string;
visotors: string;
visotorsRatio: string;
}
const networks: Network[] = [
{
name: 'Instagram',
visotors: '3,550',
visotorsRatio: '70%'
},
{
name: 'Twitter',
visotors: '1,229',
visotorsRatio: '50%'
},
{
name: 'Facebook',
visotors: '1,115',
visotorsRatio: '40%'
}
];
const MediaTraffic = () => {
return (
<Container maxW="3xl" py={10} px={4}>
<Box border="1px solid" borderColor="gray.400" rounded="md" boxShadow="lg" overflow="hidden">
<Flex justifyContent="left" p={5}>
<chakra.h3 fontSize="xl" fontWeight="bold" textAlign="center">
Social Media Traffic
</chakra.h3>
</Flex>
<Divider />
<TableContainer>
<Table size="md">
<Thead>
<Tr fontWeight="900">
<Th>Network</Th>
<Th>Visitors</Th>
<Th>New Users Rate</Th>
</Tr>
</Thead>
<Tbody>
{networks.map((network, index) => (
<Tr key={index}>
<Td fontSize="sm">{network.name}</Td>
<Td fontSize="sm">{network.visotors}</Td>
<Td>
<Box w="100%" bg={useColorModeValue('gray.300', 'gray.600')} rounded="md">
<Box w={network.visotorsRatio} h={2} bg="blue.400" rounded="md"></Box>
</Box>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
</Container>
);
};
export default MediaTraffic;
