feat(pages): add /application/guilds/join (#2)

components/Application/JoinGuildsPublic/Guild/Guild.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Guild as Component, GuildProps } from './Guild'
+
+const Stories: Meta = {
+  title: 'Guild',
+  component: Component
+}
+
+export default Stories
+
+export const Guild: Story<GuildProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Guild.args = {
+  guild: {
+    id: 1,
+    name: 'GuildExample',
+    description: 'guild example.',
+    icon: null,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    membersCount: 1
+  }
+}

components/Application/JoinGuildsPublic/Guild/Guild.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react'
+
+import { Guild } from './Guild'
+
+describe('<Guild />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Guild
+        guild={{
+          id: 1,
+          name: 'GuildExample',
+          description: 'guild example.',
+          icon: null,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          membersCount: 1
+        }}
+      />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

components/Application/JoinGuildsPublic/Guild/Guild.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image'
+
+import { GuildPublic } from 'models/Guild'
+
+export interface GuildProps {
+  guild: GuildPublic
+}
+
+export const Guild: React.FC<GuildProps> = (props) => {
+  const { guild } = props
+
+  return (
+    <div
+      key={guild.id}
+      className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'
+    >
+      <Image
+        className='rounded-full'
+        src={guild.icon != null ? guild.icon : '/images/data/guild-default.png'}
+        alt='logo'
+        width={80}
+        height={80}
+      />
+      <div className='m-2 text-center mt-3'>
+        <h3 data-cy='guild-name' className='font-bold text-xl mb-2'>
+          {guild.name}
+        </h3>
+        <p className='text-base w-11/12 mx-auto'>{guild.description}</p>
+      </div>
+      <p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
+        {guild.membersCount} members
+      </p>
+    </div>
+  )
+}

components/Application/JoinGuildsPublic/Guild/index.ts

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