fix: improve overall rendering (#10)

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, Story } from '@storybook/react'
-
-import { GuildPublic as Component, GuildPublicProps } from './GuildPublic'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-const Stories: Meta = {
-  title: 'GuildPublic',
-  component: Component
-}
-
-export default Stories
-
-export const GuildPublic: Story<GuildPublicProps> = (arguments_) => {
-  return <Component {...arguments_} />
-}
-GuildPublic.args = {
-  guild: {
-    ...guildExample,
-    membersCount: 1
-  }
-}

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.test.tsx

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { GuildPublic } from './GuildPublic'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-describe('<GuildPublic />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <GuildPublic
-        guild={{
-          ...guildExample,
-          membersCount: 1
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/JoinGuildsPublic/GuildPublic/GuildPublic.tsx

@@ -1,5 +1,10 @@
+import { useState } from 'react'
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
+import classNames from 'classnames'
+
+import { Emoji } from 'components/Emoji'
+import { ConfirmGuildJoin } from 'components/Application/ConfirmGuildJoin'
 
 import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
 
@@ -9,27 +14,59 @@ export interface GuildPublicProps {
 
 export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
   const { guild } = props
+  const [isConfirmed, setIsConfirmed] = useState(false)
 
   const { t } = useTranslation()
 
   return (
-    <div 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 className='relative overflow-hidden rounded border border-gray-500 dark:border-gray-700 hover:-translate-y-2 hover:shadow-none shadow-lg transition duration-200 ease-in-out'>
+      <div
+        className={classNames(
+          'flex flex-col items-center h-full justify-center cursor-pointer p-4 pt-8 transition duration-200 ease-in-out',
+          { '-translate-x-full': isConfirmed }
+        )}
+        onClick={() => setIsConfirmed(!isConfirmed)}
+      >
+        <Image
+          className='rounded-full'
+          src={
+            guild.icon != null ? guild.icon : '/images/data/guild-default.png'
+          }
+          alt='logo'
+          width={80}
+          height={80}
+        />
+        <div className='w-full px-4 m-2 text-center mt-6'>
+          <h3
+            data-cy='guild-name'
+            className='w-full center font-bold text-xl mb-2 truncate'
+          >
+            {guild.name}
+          </h3>
+          <p className='break-words'>
+            {guild.description != null ? (
+              guild.description
+            ) : (
+              <span className='flex h-full opacity-25 justify-center items-center'>
+                <Emoji value=':eyes:' size={25} />
+                <span className='ml-2'>Nothing&apos;s here...</span>
+              </span>
+            )}
+          </p>
+        </div>
+        <p className='flex flex-col text-green-800 dark:text-green-400 mt-auto'>
+          {guild.membersCount} {t('application:members')}
+        </p>
       </div>
-      <p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
-        {guild.membersCount} {t('application:members')}
-      </p>
+      <ConfirmGuildJoin
+        className={classNames(
+          'absolute w-full h-full flex flex-col w-ful h-ful top-1/2 -translate-y-1/2 left-full translate-x- rounded-2xl justify-center items-center transition-all',
+          {
+            '!left-0': isConfirmed
+          }
+        )}
+        handleJoinGuild={() => setIsConfirmed(!isConfirmed)}
+      />
     </div>
   )
 }

components/Application/JoinGuildsPublic/JoinGuildsPublic.tsx

@@ -10,6 +10,7 @@ import { usePagination } from '../../../hooks/usePagination'
 
 export const JoinGuildsPublic: React.FC = () => {
   const [search, setSearch] = useState('')
+
   const { authentication } = useAuthentication()
   const { t } = useTranslation()
 
@@ -29,7 +30,7 @@ export const JoinGuildsPublic: React.FC = () => {
   }
 
   return (
-    <>
+    <div className='flex flex-col w-full h-full transition-all'>
       <input
         data-cy='search-guild-input'
         onChange={handleChange}
@@ -38,9 +39,9 @@ export const JoinGuildsPublic: React.FC = () => {
         name='search-guild'
         placeholder={`🔎  ${t('application:search')}...`}
       />
-      <div className='w-full flex items-center justify-center p-12'>
+      <div className='w-full p-12'>
         <InfiniteScroll
-          className='guilds-public-list max-w-[1600px] grid grid-cols-1 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-8 !overflow-hidden'
+          className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
           dataLength={items.length}
           next={nextPage}
           scrollableTarget='application-page-content'
@@ -52,6 +53,6 @@ export const JoinGuildsPublic: React.FC = () => {
           })}
         </InfiniteScroll>
       </div>
-    </>
+    </div>
   )
 }