Footers
Large with logo left
import {
Box,
Stack,
HStack,
VStack,
Link,
Divider,
Image,
Text,
Button,
IconButton,
LinkProps
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub } from 'react-icons/fa';
import { BsDiscord } from 'react-icons/bs';
const Footer = () => {
return (
<Box p={{ base: 5, md: 8 }} maxW="5xl" marginInline="auto">
<Stack
spacing={{ base: 8, md: 0 }}
justifyContent="space-between"
direction={{ base: 'column', md: 'row' }}
>
<Box maxW="300px">
<Link href="https://templateskart.com" isExternal>
<Image w="100px" src="/assets/images/layouts/hero_image.png" alt="TemplatesKart" />
</Link>
<Text mt={2} color="gray.500" fontSize="md">
Build fully functional accessible web applications faster than ever
</Text>
</Box>
<HStack
spacing={4}
d={{ base: 'none', sm: 'flex' }}
justifyContent={{ sm: 'space-between', md: 'normal' }}
>
<VStack spacing={4} alignItems="flex-start">
<Text fontSize="md" fontWeight="bold">
About
</Text>
<VStack spacing={2} alignItems="flex-start" color="gray.500">
<CustomLink>Contrinute</CustomLink>
<CustomLink>Media assets</CustomLink>
<CustomLink>Changelog</CustomLink>
<CustomLink>Releases</CustomLink>
</VStack>
</VStack>
<VStack spacing={4} alignItems="flex-start">
<Text fontSize="md" fontWeight="bold">
Community
</Text>
<VStack spacing={2} alignItems="flex-start" color="gray.500">
<CustomLink>Chat on Discord</CustomLink>
<CustomLink>Follow on Twitter</CustomLink>
<CustomLink>Follow on Github</CustomLink>
<CustomLink>Github discussions</CustomLink>
</VStack>
</VStack>
<VStack spacing={4} alignItems="flex-start">
<Text fontSize="md" fontWeight="bold">
Project
</Text>
<VStack spacing={2} alignItems="flex-start" color="gray.500">
<CustomLink>TemplatesKart</CustomLink>
<CustomLink>Documentation</CustomLink>
<CustomLink>Github organization</CustomLink>
<CustomLink>npm organization</CustomLink>
</VStack>
</VStack>
</HStack>
</Stack>
<Divider my={4} />
<Stack direction={{ base: 'column', md: 'row' }} spacing={3} justifyContent="space-between">
<Text fontSize="md">
Built by{' '}
<Link
href="https://github.com/MA-Ahmad"
textDecoration="underline"
_hover={{ textDecoration: 'underline' }}
isExternal
>
Muhammad Ahmad
</Link>
</Text>
<Stack spacing={2} direction={{ base: 'column', md: 'row' }}>
<Button leftIcon={<FaGithub />} as={Link} href="#" rounded="md" colorScheme="gray">
Github Discussions
</Button>
<Button
leftIcon={<BsDiscord />}
as={Link}
href="#"
rounded="md"
color="white"
bg="purple.500"
_hover={{ bg: 'purple.600' }}
>
Discord community
</Button>
</Stack>
</Stack>
</Box>
);
};
const CustomLink = ({ children, ...props }: LinkProps) => {
return (
<Link href="#" fontSize="sm" _hover={{ textDecoration: 'underline' }} {...props}>
{children}
</Link>
);
};
export default Footer;
With logo left
import { Stack, HStack, Link, Divider, Image, IconButton, LinkProps } from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
const links = ['Blog', 'Documentation', 'Careers', 'Sign up', 'Terms of use', 'Privacy policy'];
const accounts = [
{
url: 'https://github.com/MA-Ahmad/templateskart',
label: 'Github Account',
type: 'gray',
icon: <FaGithub />
},
{
url: 'https://twitter.com/muhammad_ahmaad',
label: 'Twitter Account',
type: 'twitter',
icon: <FaTwitter />
},
{
url: 'https://linkedin.com/in/muhammad-ahmad20',
label: 'LinkedIn Account',
type: 'linkedin',
icon: <FaLinkedin />
}
];
const Footer = () => {
return (
<Stack
maxW="5xl"
marginInline="auto"
p={8}
spacing={{ base: 8, md: 0 }}
justifyContent="space-between"
alignItems="center"
direction={{ base: 'column', md: 'row' }}
>
<Link href="https://templateskart.com" isExternal>
<Image w="100px" src="/assets/images/layouts/hero_image.png" alt="TemplatesKart" />
</Link>
{/* Desktop Screen */}
<HStack spacing={4} alignItems="center" d={{ base: 'none', md: 'flex' }}>
{links.map((link, index) => (
<CustomLink key={index}>{link}</CustomLink>
))}
</HStack>
{/* Mobile and Tablet Screens */}
<Stack d={{ base: 'flex', md: 'none' }} alignItems="center">
<HStack alignItems="center">
<CustomLink>Sign up</CustomLink>
<Divider h="1rem" orientation="vertical" />
<CustomLink>Blog</CustomLink>
<Divider h="1rem" orientation="vertical" />
<CustomLink>Career</CustomLink>
</HStack>
<HStack alignItems="center">
<CustomLink>Documentation</CustomLink>
<Divider h="1rem" orientation="vertical" />
<CustomLink>Terms of use</CustomLink>
</HStack>
<CustomLink>Privacy policy</CustomLink>
</Stack>
<Stack direction="row" spacing={5} pt={{ base: 4, md: 0 }} alignItems="center">
{accounts.map((sc, index) => (
<IconButton
key={index}
as={Link}
isExternal
href={sc.url}
aria-label={sc.label}
colorScheme={sc.type}
icon={sc.icon}
rounded="md"
/>
))}
</Stack>
</Stack>
);
};
const CustomLink = ({ children, ...props }: LinkProps) => {
return (
<Link href="#" fontSize="sm" _hover={{ textDecoration: 'underline' }} {...props}>
{children}
</Link>
);
};
export default Footer;
With subscribe field
import * as React from 'react';
import {
Container,
Box,
Link as ChakraLink,
SimpleGrid,
Stack,
Text,
Popover,
PopoverTrigger,
Portal,
PopoverContent,
PopoverArrow,
PopoverCloseButton,
PopoverBody
} from '@chakra-ui/react';
import { siteConfig } from './site-config';
import FooterSignup from './signup';
import { ExternalFooterLink, InternalFooterLink, ExternalSocialLink } from './links';
// Here we have used react-icons package for the icons
import { FaGithub, FaDev, FaLinkedin, FaQuora, FaTwitter } from 'react-icons/fa';
const Footer = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<SimpleGrid
flexDirection="column-reverse"
gridTemplateColumns={['1fr', '1fr', '1fr 1fr', '1fr 1fr']}
borderTopWidth={2}
mt="30px"
borderTopColor="gray.900"
pt="20px"
>
<Box d={['block', 'block', 'none', 'none']} mb="30px">
<FooterSignup />
</Box>
<Box>
<SimpleGrid columns={[1, 1, 2, 2]}>
<Stack mb={['10px', '10px', 0, 0]}>
<Text as="span">
<ExternalFooterLink href="#" text="Contact us" />
</Text>
<Text as="span">
<ExternalFooterLink href="#" text="Contribute" />
</Text>
<Text as="span">
<InternalFooterLink href="#" text="Open source projects" />
</Text>
</Stack>
<Stack>
<Text as="span">
<Popover placement="top">
<PopoverTrigger>
<Text
as="span"
_focus={{ outline: 'none', boxShadow: 'none' }}
fontWeight={500}
color="gray.500"
cursor="pointer"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
Social Accounts
</Text>
</PopoverTrigger>
<Portal>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverBody>
<Stack
as="footer"
isInline
spacing={[1, 2]}
justifyContent="center"
alignItems="center"
>
<ExternalSocialLink
href={siteConfig.author.github}
icon={<FaGithub />}
type="gray"
label="Github Account"
/>
<ExternalSocialLink
href={siteConfig.author.dev}
icon={<FaDev />}
type="gray"
label="Dev Account"
/>
<ExternalSocialLink
href={siteConfig.author.linkedin}
icon={<FaLinkedin />}
type="linkedin"
label="LinkedIn Account"
/>
<ExternalSocialLink
href={siteConfig.author.twitter}
icon={<FaTwitter />}
type="twitter"
label="Twitter Account"
/>
<ExternalSocialLink
href={siteConfig.author.quora}
icon={<FaQuora />}
type="red"
label="Quora Account"
/>
</Stack>
</PopoverBody>
</PopoverContent>
</Portal>
</Popover>
</Text>
<Text as="span">
<ExternalFooterLink href="#" text="Sponsor" />
</Text>
<Text as="span">
<ExternalFooterLink href="#" isExternal={false} text="FAQs" />
</Text>
</Stack>
</SimpleGrid>
<Text mt="20px" color="gray.500">
Made with 🧡 by{' '}
<ChakraLink
_focus={{ boxShadow: 'none', outline: 'none' }}
target="_blank"
href={siteConfig.author.github}
fontWeight={600}
color="gray.400"
bgClip="text"
bgGradient="linear(to-l, #7928CA,#FF0080)"
_hover={{
bgGradient: 'linear(to-r, red.500, yellow.500)'
}}
>
Muhammad Ahmad
</ChakraLink>{' '}
</Text>
</Box>
<Box d={['none', 'none', 'block', 'block']}>
<FooterSignup />
</Box>
</SimpleGrid>
</Container>
);
};
export default Footer;
import * as React from 'react';
import { Link as ChakraLink, IconButton } from '@chakra-ui/react';
type ExternalFooterLinkProps = {
href: string;
text: string;
isExternal?: boolean;
};
export const ExternalFooterLink = (props: ExternalFooterLinkProps) => {
const { href, text, isExternal = true } = props;
return (
<ChakraLink
_focus={{ outline: 'none', boxShadow: 'none' }}
href={href}
target={isExternal ? '_blank' : '_self'}
fontWeight={500}
color="gray.500"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
{text}
</ChakraLink>
);
};
type InternalFooterLinkProps = {
href: string;
text: string;
};
export const InternalFooterLink = (props: InternalFooterLinkProps) => {
const { href, text } = props;
return (
<a>
<ChakraLink
_focus={{ outline: 'none', boxShadow: 'none' }}
as="span"
fontWeight={500}
color="gray.500"
_hover={{ color: 'gray.600', textDecoration: 'none' }}
>
{text}
</ChakraLink>
</a>
);
};
const iconProps = {
variant: 'ghost',
size: 'lg',
isRound: true
};
type ExternalSocialLinkProps = {
href: string;
label: string;
isExternal?: boolean;
type: string;
icon: any;
};
export const ExternalSocialLink = (props: ExternalSocialLinkProps) => {
const { href, label, icon, type, isExternal = true } = props;
return (
<IconButton
as={ChakraLink}
href={href}
target={isExternal ? '_blank' : '_self'}
aria-label={label}
icon={icon}
colorScheme={type}
{...iconProps}
/>
);
};
import * as React from 'react';
import { Box, Button, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
export default function FooterSignup() {
return (
<>
<Heading fontSize="24px" mb="15px" className="yellow-gradient-color">
Be the first to know
</Heading>
<Text color="gray.400" mb="15px">
Get notified about the upcoming sessions, news, articles, jobs, and opensource projects.
</Text>
<form action="#">
<Box position="relative">
<Input
type="email"
isRequired
name="entry.1808449400"
px="25px"
height="50px"
rounded="50px"
bg={useColorModeValue('gray.900', 'gray.600')}
_placeholder={{ color: 'gray.300' }}
placeholder="Enter your email"
_focus={{ outline: 0 }}
color="gray.100"
borderWidth={0}
/>
<Button
type="submit"
height="50px"
color="gray.100"
_hover={{ bg: 'yellow.400', color: 'gray.900' }}
position="absolute"
top="0"
right="0"
bg="gray.700"
rounded="50px"
px="25px"
>
Subscribe
</Button>
</Box>
</form>
</>
);
}
const baseUrl = 'https://github.com/MA-Ahmad/notebook';
export const siteConfig = {
copyright: `Copyright © ${new Date().getFullYear()} Muhammad Ahmad. All Rights Reserved.`,
author: {
name: 'Muhammad Ahmad',
github: 'https://github.com/MA-Ahmad',
twitter: 'https://twitter.com/muhammad_ahmaad',
linkedin: 'https://linkedin.com/in/muhammad-ahmad20',
quora: 'https://www.quora.com/profile/Muhammad-Ahmad-66',
dev: 'https://dev.to/m_ahmad',
email: 'muhammad.ahmad8043@gmail.com'
}
};
Fewer links
import { Flex, Link, Text, Container, VStack, useColorModeValue } from '@chakra-ui/react';
const footerData = [
{
label: 'Writing',
href: '#',
links: [
{ label: 'Digital Garden', href: '#' },
{ label: 'Tutorials', href: '#' },
{ label: 'React', href: '#' },
{ label: 'Community', href: '#' }
]
},
{
label: 'Art',
href: '#',
links: [
{ label: 'Design', href: '#' },
{ label: '3D Art', href: '#' },
{ label: 'Photography', href: '#' }
]
},
{
label: 'About',
href: '#',
links: [
{ label: 'Appearances', href: '#' },
{ label: 'Projects', href: '#' },
{ label: 'Uses', href: '#' }
]
},
{
label: 'Social',
href: '#',
links: [
{ label: 'Email', href: '#' },
{ label: 'Twitter', href: '#' },
{ label: 'Github', href: '#' },
{ label: 'Linkedin', href: '#' },
{ label: 'RSS', href: '#' }
]
}
];
const Footer = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<VStack spacing={5} alignItems="initial">
<Flex
flexWrap="wrap"
direction={{ base: 'column', md: 'row' }}
alignItems="start"
justifyContent="space-between"
>
{footerData.map((data, index) => (
<Flex key={index} direction="column" mb="3">
<Link
fontWeight="500"
href={data.href}
color={useColorModeValue('gray.800', 'gray.300')}
>
{data.label}
</Link>
<Flex direction={{ base: 'row', md: 'column' }}>
{data.links.map((link, index) => (
<Link
key={index}
padding={1}
fontSize={{ base: 'sm', sm: 'md' }}
href="#"
mr={{ base: 1, sm: 2, md: 0 }}
color="gray.500"
_hover={{ color: 'blue.600' }}
>
{link.label}
</Link>
))}
</Flex>
</Flex>
))}
</Flex>
<Flex alignItems="center">
<Text color="gray.500" fontSize="0.875rem" pl="0.5rem">
© 2019 company, Inc. All rights reserved.
</Text>
</Flex>
</VStack>
</Container>
);
};
export default Footer;
Big footer
import { Box, Heading, Flex, List, ListItem, Link, Text } from '@chakra-ui/react';
const Footer = () => {
return (
<Box
as="footer"
bg="gray.300"
borderTop="1px solid"
borderColor="gray.300"
py="2.5rem"
fontSize="0.875rem"
>
<Box
maxW="64rem"
marginX="auto"
pb="2rem"
mb="1.5rem"
px={10}
borderBottom="1px solid"
borderColor="gray.300"
>
<Flex flexWrap="wrap" alignItems="start" justifyContent="space-between">
<Box w={{ base: '100%', sm: '50%', md: 'max-content' }} mb={{ base: '1.5rem', lg: '0' }}>
<Heading as="h5" color="gray.700" mb="0.5rem" fontSize="0.875rem" fontWeight="600">
Company Name
</Heading>
<List lineHeight="2" justifyContent="center">
<LinkItem text="Careers" />
<LinkItem text="News" />
<LinkItem text="Policies" />
<LinkItem text="Help" />
<LinkItem text="Diversity & Belonging" />
</List>
</Box>
<Box w={{ base: '100%', sm: '50%', md: 'max-content' }} mb={{ base: '1.5rem', lg: '0' }}>
<Heading as="h5" color="gray.700" mb="0.5rem" fontSize="0.875rem" fontWeight="600">
Discover
</Heading>
<List lineHeight="2">
<LinkItem text="Trust & Safety" />
<LinkItem text="Travel Credit" />
<LinkItem text="Gift Cards" />
<LinkItem text="Airbnb Citizen" />
<LinkItem text="Business Travel" />
<LinkItem text="Things To Do" isTag={true} tagText="New" />
<LinkItem text="Airbnbmag" />
</List>
</Box>
<Box w={{ base: '100%', sm: '50%', md: 'max-content' }} mb={{ base: '1.5rem', lg: '0' }}>
<Heading as="h5" color="gray.700" mb="0.5rem" fontSize="0.875rem" fontWeight="600">
Hosting
</Heading>
<List lineHeight="2">
<LinkItem text="Why Host" />
<LinkItem text="Hospitality" />
<LinkItem text="Responsible Hosting" />
<LinkItem text="Community Center" />
<LinkItem text="Host an Experience" isTag={true} tagText="New" />
<LinkItem text="Open Homes" />
<LinkItem text="Donations" isTag={true} tagText="New" />
</List>
</Box>
<Box w={{ base: '100%', sm: '50%', md: 'max-content' }} mb={{ base: '1.5rem', lg: '0' }}>
<Flex justifyContent="start" mb="0.5rem" alignItems="baseline">
<Link href="#" mr="0.5rem">
<svg
style={{ width: '1rem', height: '1rem' }}
fill="#008F94"
viewBox="0 0 32 32"
role="img"
aria-label="Navigate to Facebook"
focusable="false"
>
<path
d="m8 14.41v-4.17c0-.42.35-.81.77-.81h2.52v-2.08c0-4.84 2.48-7.31 7.42-7.35 1.65 0 3.22.21 4.69.64.46.14.63.42.6.88l-.56 4.06c-.04.18-.14.35-.32.53-.21.11-.42.18-.63.14-.88-.25-1.78-.35-2.8-.35-1.4 0-1.61.28-1.61 1.73v1.8h4.52c.42 0 .81.42.81.88l-.35 4.17c0 .42-.35.71-.77.71h-4.21v16c0 .42-.35.81-.77.81h-5.21c-.42 0-.8-.39-.8-.81v-16h-2.52a.78.78 0 0 1 -.78-.78"
fillRule="evenodd"
></path>
</svg>
</Link>
<Link href="#" mr="0.5rem">
<svg
style={{ width: '1rem', height: '1rem' }}
fill="#008F94"
viewBox="0 0 32 32"
role="img"
aria-label="Navigate to Twitter"
focusable="false"
>
<path
d="m31 6.36c-1.16.49-2.32.82-3.55.95 1.29-.76 2.22-1.87 2.72-3.38a13.05 13.05 0 0 1 -3.91 1.51c-1.23-1.28-2.75-1.94-4.51-1.94-3.41 0-6.17 2.73-6.17 6.12 0 .49.07.95.17 1.38-4.94-.23-9.51-2.6-12.66-6.38-.56.95-.86 1.97-.86 3.09 0 2.07 1.03 3.91 2.75 5.06-1-.03-1.92-.3-2.82-.76v.07c0 2.89 2.12 5.42 4.94 5.98-.63.17-1.16.23-1.62.23-.3 0-.7-.03-1.13-.13a6.07 6.07 0 0 0 5.74 4.24c-2.22 1.74-4.78 2.63-7.66 2.63-.56 0-1.06-.03-1.43-.1 2.85 1.84 6 2.76 9.41 2.76 7.29 0 12.83-4.01 15.51-9.3 1.36-2.66 2.02-5.36 2.02-8.09v-.46c-.03-.17-.03-.3-.03-.33a12.66 12.66 0 0 0 3.09-3.16"
fillRule="evenodd"
></path>
</svg>
</Link>
<Link href="#" mr="0.5rem">
<svg
style={{ width: '1rem', height: '1rem' }}
fill="#008F94"
viewBox="0 0 24 24"
role="img"
aria-label="Navigate to Instagram"
focusable="false"
>
<path
d="m23.09.91c-.61-.61-1.33-.91-2.17-.91h-17.84c-.85 0-1.57.3-2.17.91s-.91 1.33-.91 2.17v17.84c0 .85.3 1.57.91 2.17s1.33.91 2.17.91h17.84c.85 0 1.57-.3 2.17-.91s.91-1.33.91-2.17v-17.84c0-.85-.3-1.57-.91-2.17zm-14.48 7.74c.94-.91 2.08-1.37 3.4-1.37 1.33 0 2.47.46 3.41 1.37s1.41 2.01 1.41 3.3-.47 2.39-1.41 3.3-2.08 1.37-3.41 1.37c-1.32 0-2.46-.46-3.4-1.37s-1.41-2.01-1.41-3.3.47-2.39 1.41-3.3zm12.66 11.63c0 .27-.09.5-.28.68a.92.92 0 0 1 -.67.28h-16.7a.93.93 0 0 1 -.68-.28.92.92 0 0 1 -.27-.68v-10.13h2.2a6.74 6.74 0 0 0 -.31 2.05c0 2 .73 3.71 2.19 5.12s3.21 2.12 5.27 2.12a7.5 7.5 0 0 0 3.75-.97 7.29 7.29 0 0 0 2.72-2.63 6.93 6.93 0 0 0 1-3.63c0-.71-.11-1.39-.31-2.05h2.11v10.12zm0-13.95c0 .3-.11.56-.31.77a1.05 1.05 0 0 1 -.77.31h-2.72c-.3 0-.56-.11-.77-.31a1.05 1.05 0 0 1 -.31-.77v-2.58c0-.29.11-.54.31-.76s.47-.32.77-.32h2.72c.3 0 .56.11.77.32s.31.47.31.76z"
fillRule="evenodd"
></path>
</svg>
</Link>
</Flex>
<List lineHeight="2">
<LinkItem text="Terms" />
<LinkItem text="Privacy" />
<LinkItem text="Site Map" />
</List>
</Box>
</Flex>
</Box>
<Flex maxW="64rem" mx="auto" alignItems="center" px={10}>
<svg
fill="#008F94"
style={{ width: '1.25rem', height: '1.25rem' }}
viewBox="0 0 1000 1000"
role="presentation"
aria-hidden="true"
focusable="false"
>
<path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z"></path>
</svg>
<Text color="gray.600" fontSize="0.875rem" pl="0.5rem">
© 2019 company, Inc. All rights reserved.
</Text>
</Flex>
</Box>
);
};
type LinkItemProps = {
text?: string;
isTag?: boolean;
tagText?: string;
};
const LinkItem = ({ text, isTag = false, tagText }: LinkItemProps) => {
return (
<ListItem display="flex">
<Link
fontWeight="600"
href="#"
color="rgba(113, 128, 150, 1)"
_hover={{ color: 'green.600' }}
>
{text}
</Link>
{isTag && (
<Text
as="span"
bg="#008F94"
px="0.25rem"
display="inline-flex"
alignItems="center"
color="#fff"
height="1.25rem"
borderRadius="0.25rem"
ml="0.25rem"
mt="0.25rem"
fontSize="0.75rem"
>
{tagText}
</Text>
)}
</ListItem>
);
};
export default Footer;
