feat: design applications and first api calls

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

components/Application/Members/Members.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Members as Component } from './Members'
+
+const Stories: Meta = {
+  title: 'Members',
+  component: Component
+}
+
+export default Stories
+
+export const Members: Story = (arguments_) => {
+  return <Component {...arguments_} />
+}

components/Application/Members/Members.test.tsx

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

components/Application/Members/Members.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image'
+
+import { Divider } from '../../design/Divider'
+
+export const Members: React.FC = () => {
+  return (
+    <>
+      <div className='mb-2'>
+        <h1 className='text-center pt-2 my-2 text-xl'>Members</h1>
+        <Divider />
+      </div>
+      <div className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded hover:bg-gray-300 dark:hover:bg-gray-900'>
+        <div className='min-w-[50px] flex rounded-full border-2 border-green-500'>
+          <Image
+            src='/images/data/divlo.png'
+            alt={"Users's profil picture"}
+            height={50}
+            width={50}
+            draggable='false'
+            className='rounded-full'
+          />
+        </div>
+        <div className='max-w-[145px] ml-4'>
+          <p className='overflow-hidden whitespace-nowrap overflow-ellipsis'>
+            Walidouxssssssssssss
+          </p>
+          <span className='text-green-600 dark:text-green-400'>Online</span>
+        </div>
+      </div>
+      {new Array(100).fill(null).map((_, index) => {
+        return (
+          <div
+            key={index}
+            className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded opacity-40 hover:bg-gray-300 dark:hover:bg-gray-900'
+          >
+            <div className='min-w-[50px] flex rounded-full border-2 border-transparent drop-shadow-md'>
+              <Image
+                src='/images/data/divlo.png'
+                alt={"Users's profil picture"}
+                height={50}
+                width={50}
+                draggable='false'
+                className='rounded-full'
+              />
+            </div>
+            <div className='max-w-[145px] ml-4'>
+              <p className='overflow-hidden whitespace-nowrap overflow-ellipsis'>
+                Walidouxssssssssssssssssssssssssssssss
+              </p>
+              <span className='text-red-800 dark:text-red-400'>Offline</span>
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}

components/Application/Members/index.ts

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