feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

components/Footer/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Footer as Component, FooterProps } from './'
+
+const Stories: Meta = {
+  title: 'Footer',
+  component: Component
+}
+
+export default Stories
+
+export const Footer: Story<FooterProps> = (arguments_) => (
+  <Component {...arguments_} />
+)
+Footer.args = { version: '1.0.0' }

components/Footer/Footer.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react'
+
+import { Footer } from './'
+
+describe('<Footer />', () => {
+  it('should render with appropriate link tag version', async () => {
+    const version = '1.0.0'
+    const { getByText } = render(<Footer version={version} />)
+    const versionLink = getByText(`website v${version}`) as HTMLAnchorElement
+    expect(getByText('Thream')).toBeInTheDocument()
+    expect(versionLink).toBeInTheDocument()
+    expect(versionLink.href).toEqual(
+      `https://github.com/Thream/website/releases/tag/v${version}`
+    )
+  })
+})

components/Footer/Footer.tsx

@@ -1,8 +1,16 @@
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 
-export const Footer: React.FC = () => {
+import { API_VERSION } from '../../utils/api'
+import { VersionLink } from './VersionLink'
+
+export interface FooterProps {
+  version: string
+}
+
+export const Footer: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
 
   return (
     <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'>
@@ -14,6 +22,10 @@ export const Footer: React.FC = () => {
         </Link>{' '}
         | {t('common:all-rights-reserved')}
       </p>
+      <p className='mt-1'>
+        <VersionLink repository='website' version={version} /> |{' '}
+        <VersionLink repository='api' version={API_VERSION} />
+      </p>
     </footer>
   )
 }

components/Footer/VersionLink.tsx

@@ -0,0 +1,19 @@
+export interface VersionLinkProps {
+  version: string
+  repository: 'website' | 'api'
+}
+
+export const VersionLink: React.FC<VersionLinkProps> = (props) => {
+  const { version, repository } = props
+
+  return (
+    <a
+      className='hover:underline text-green-800 dark:text-green-400'
+      href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
+      target='_blank'
+      rel='noopener noreferrer'
+    >
+      {repository} v{version}
+    </a>
+  )
+}