v3/packages/design-system/molecules/footer/Footer.tsx

import { AmbientLarge } from '@roleypoly/design-system/atoms/typography';
import * as React from 'react';
import { FaHeart } from 'react-icons/fa';
import { Flags } from './Flags';
import { FooterWrapper, HoverColor } from './Footer.styled';

const year = new Date().getFullYear();

export const Footer = () => (
    <FooterWrapper>
        <AmbientLarge>
            <div>
                &copy; {year} Roleypoly &ndash; Made with{' '}
                <FaHeart size={'0.8em'} color={'#fe4365'} />
                &nbsp;in Raleigh, NC
            </div>
            <div>
                <a href="https://discord.gg/Xj6rK3E">Discord/Support</a> &ndash;&nbsp;
                <a href="https://patreon.com/kata">Patreon</a> &ndash;&nbsp;
                <a href="https://github.com/roleypoly">GitHub</a>
            </div>
            <HoverColor>
                <Flags height={'1em'} />
            </HoverColor>
        </AmbientLarge>
    </FooterWrapper>
);