feat: design applications and first api calls

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

components/design/IconLink/IconLink.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { IconLink } from './IconLink'
+
+describe('<IconLink />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<IconLink href='' />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/design/IconLink/IconLink.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+
+export interface IconLinkProps {
+  selected?: boolean
+  href: string
+  title?: string
+}
+
+export const IconLink: React.FC<IconLinkProps> = (props) => {
+  const { children, selected, href, title } = props
+
+  return (
+    <div className='w-full flex justify-center group'>
+      <Link href={href}>
+        <a className='w-full flex justify-center relative group' title={title}>
+          {children}
+          <div className='absolute flex items-center w-3 h-12 left-0'>
+            <span
+              className={classNames(
+                'absolute w-4/12 bg-green-700 rounded-r-lg group-hover:h-5',
+                {
+                  'h-full': selected
+                }
+              )}
+            ></span>
+          </div>
+        </a>
+      </Link>
+    </div>
+  )
+}

components/design/IconLink/index.ts

@@ -0,0 +1 @@
+export * from './IconLink'