feat(pages): add /application/[guildId]/[channelId] (#4)

components/Application/Members/Member/Member.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Member as Component, MemberProps } from './Member'
+import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
+
+const Stories: Meta = {
+  title: 'Member',
+  component: Component
+}
+
+export default Stories
+
+export const Member: Story<MemberProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Member.args = { member: memberExampleComplete }

components/Application/Members/Member/Member.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react'
+
+import { Member } from './Member'
+import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
+
+describe('<Member />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Member member={memberExampleComplete} />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/Members/Member/Member.tsx

@@ -0,0 +1,45 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { MemberWithPublicUser } from '../../../../models/Member'
+import { API_URL } from '../../../../tools/api'
+
+export interface MemberProps {
+  member: MemberWithPublicUser
+}
+
+export const Member: React.FC<MemberProps> = (props) => {
+  const { member } = props
+
+  return (
+    <Link href={`/application/users/${member.user.id}`}>
+      <a>
+        <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'>
+            <Image
+              src={
+                member.user.logo == null
+                  ? '/images/data/user-default.png'
+                  : API_URL + member.user.logo
+              }
+              alt={"Users's profil picture"}
+              height={50}
+              width={50}
+              draggable={false}
+              className='rounded-full'
+            />
+          </div>
+          <div className='max-w-[145px] ml-4'>
+            <p
+              data-cy='member-user-name'
+              className='overflow-hidden whitespace-nowrap overflow-ellipsis'
+            >
+              {member.user.name}
+            </p>
+            {member.user.status != null && <span>{member.user.status}</span>}
+          </div>
+        </div>
+      </a>
+    </Link>
+  )
+}

components/Application/Members/Member/index.ts

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