feat: add version number in footer

components/Footer.tsx

@@ -1,13 +1,42 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
-export const Footer: React.FC = () => {
+export interface FooterProps {
+  version: string
+}
+
+export const Footer: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
+
+  const versionLink = useMemo(() => {
+    if (version !== '0.0.0-development') {
+      return `https://github.com/Divlo/Divlo/releases/tag/v${version}`
+    }
+    return 'https://github.com/Divlo/Divlo/tree/develop'
+  }, [version])
 
   return (
-    <footer className='bg-white flex justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
+    <footer className='bg-white flex flex-col items-center justify-center py-6 text-lg border-t-2 border-gray-600 dark:border-gray-400 dark:bg-black'>
       <p>
-        <span className='text-yellow dark:text-yellow-dark'>Divlo</span> |{' '}
-        {t('common:allRightsReserved')}
+        <Link href='/'>
+          <a className='hover:underline text-yellow dark:text-yellow-dark'>
+            Divlo
+          </a>
+        </Link>{' '}
+        | {t('common:allRightsReserved')}
+      </p>
+      <p className='mt-1'>
+        Version{' '}
+        <a
+          className='hover:underline text-yellow dark:text-yellow-dark'
+          href={versionLink}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          {version}
+        </a>
       </p>
     </footer>
   )

components/__test__/Footer.test.tsx

@@ -3,8 +3,25 @@ import { render } from '@testing-library/react'
 import { Footer } from '../Footer'
 
 describe('<Footer />', () => {
-  it('should render', async () => {
-    const { getByText } = render(<Footer />)
+  it('should render the version link pointing to the GitHub release', async () => {
+    const version = '1.0.0'
+    const { getByText } = render(<Footer version={version} />)
+    const versionLink = getByText(version) as HTMLAnchorElement
     expect(getByText('Divlo')).toBeInTheDocument()
+    expect(versionLink).toBeInTheDocument()
+    expect(versionLink.href).toEqual(
+      `https://github.com/Divlo/Divlo/releases/tag/v${version}`
+    )
+  })
+
+  it('should render the version link pointing to the `develop` branch', async () => {
+    const version = '0.0.0-development'
+    const { getByText } = render(<Footer version={version} />)
+    const versionLink = getByText(version) as HTMLAnchorElement
+    expect(getByText('Divlo')).toBeInTheDocument()
+    expect(versionLink).toBeInTheDocument()
+    expect(versionLink.href).toEqual(
+      'https://github.com/Divlo/Divlo/tree/develop'
+    )
   })
 })