feat: update card list items for new creator data

packages/components/src/CardList/CardList.tsx

@@ -1,9 +1,11 @@
-import { Flex, Grid, Text } from 'theme-ui'
+import Masonry from 'react-responsive-masonry'
+import { Flex, Text } from 'theme-ui'
 
 import { CardListItem } from '../CardListItem/CardListItem'
+import { Icon } from '../Icon/Icon'
 import { Loader } from '../Loader/Loader'
 
-import type { ListItem } from '../CardListItem/CardListItem'
+import type { ListItem } from '../CardListItem/types'
 
 export interface IProps {
   filteredList: ListItem[] | null
@@ -16,40 +18,46 @@ export const CardList = (props: IProps) => {
   const { filteredList, list } = props
 
   const listToShow = filteredList === null ? list : filteredList
-  const displayItems = listToShow.map((item) => (
-    <CardListItem item={item} key={item._id} />
-  ))
+  const displayItems = listToShow
+    .sort(
+      (a, b) =>
+        Date.parse(b.creator?._lastActive || '0') -
+        Date.parse(a.creator?._lastActive || '0'),
+    )
+    .map((item) => <CardListItem item={item} key={item._id} />)
 
   const isListEmpty = displayItems.length === 0
   const hasListLoaded = list
-  const results = `${displayItems.length} ${displayItems.length == 1 ? 'result' : 'results'}`
+  const results = `${displayItems.length} ${
+    displayItems.length == 1 ? 'result' : 'results'
+  }`
 
   return (
     <Flex
       data-cy="CardList"
       sx={{
         flexDirection: 'column',
-        gap: 4,
+        gap: 2,
       }}
     >
       {!hasListLoaded && <Loader />}
       {hasListLoaded && (
         <>
-          <Flex>
-            <Text data-cy="list-results">{results}</Text>
-          </Flex>
-          <Grid
+          <Flex
             sx={{
-              alignItems: 'flex-start',
-              flexWrap: 'wrap',
-              gap: 4,
+              justifyContent: 'space-between',
+              paddingX: 2,
+              fontSize: 2,
             }}
-            width="250px"
-            columns={3}
           >
-            {!isListEmpty && displayItems}
-            {isListEmpty && EMPTY_LIST}
-          </Grid>
+            <Text data-cy="list-results">{results}</Text>
+            <Flex sx={{ alignItems: 'center', gap: 1 }}>
+              <Text> Most active</Text>
+              <Icon glyph="arrow-full-down" />
+            </Flex>
+          </Flex>
+          {isListEmpty && EMPTY_LIST}
+          {!isListEmpty && <Masonry columnsCount={2}>{displayItems}</Masonry>}
         </>
       )}
     </Flex>

packages/components/src/CardListItem/CardDetailsFallback.tsx

@@ -0,0 +1,52 @@
+import { Flex } from 'theme-ui'
+
+import { Category } from '../Category/Category'
+import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { Username } from '../Username/Username'
+
+import type { ListItem } from './types'
+
+interface IProps {
+  item: ListItem
+}
+
+export const CardDetailsFallback = ({ item }: IProps) => {
+  const { _id, isSupporter, isVerified, subType, type } = item
+
+  return (
+    <Flex sx={{ padding: 2, gap: 2 }}>
+      <MemberBadge profileType={type} size={50} />
+      <Flex sx={{ flexDirection: 'column', gap: 2 }}>
+        <Username
+          user={{
+            userName: _id,
+            isVerified: isVerified || false,
+            isSupporter: isSupporter || false,
+          }}
+          sx={{ alignSelf: 'flex-start' }}
+          isLink={false}
+        />
+        {subType && (
+          <Category
+            category={{ label: 'Wants to get started' }}
+            sx={{
+              border: '1px solid #0087B6',
+              backgroundColor: '#ECFAFF',
+              color: '#0087B6',
+            }}
+          />
+        )}
+        {type === 'member' && (
+          <Category
+            category={{ label: 'Wants to get started' }}
+            sx={{
+              border: '1px solid #A72E5A',
+              backgroundColor: '#F7C7D9',
+              color: '#A72E5A',
+            }}
+          />
+        )}
+      </Flex>
+    </Flex>
+  )
+}

packages/components/src/CardListItem/CardDetailsMemberProfile.tsx

@@ -0,0 +1,70 @@
+import { Avatar, Box, Flex } from 'theme-ui'
+
+import { Category } from '../Category/Category'
+import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { Username } from '../Username/Username'
+
+import type { IProfileCreator } from './types'
+
+interface IProps {
+  creator: IProfileCreator
+}
+
+export const CardDetailsMemberProfile = ({ creator }: IProps) => {
+  const { _id, badges, countryCode, profileType, userImage } = creator
+  return (
+    <Flex
+      sx={{
+        gap: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 2,
+        alignContent: 'stretch',
+      }}
+    >
+      {userImage && (
+        <Box sx={{ aspectRatio: 1, width: '60px', height: '60px' }}>
+          <Flex
+            sx={{
+              alignContent: 'flex-start',
+              justifyContent: 'flex-end',
+              flexWrap: 'wrap',
+            }}
+          >
+            <Avatar
+              src={userImage}
+              sx={{ width: '60px', height: '60px', objectFit: 'cover' }}
+            />
+            <MemberBadge
+              profileType={profileType}
+              size={22}
+              sx={{ transform: 'translateY(-22px)' }}
+            />
+          </Flex>
+        </Box>
+      )}
+      {!userImage && <MemberBadge profileType={profileType} size={50} />}
+
+      <Flex sx={{ flexDirection: 'column', gap: 1, flex: 1 }}>
+        <Username
+          user={{
+            userName: _id,
+            countryCode,
+            isSupporter: badges?.supporter || false,
+            isVerified: badges?.verified || false,
+          }}
+          sx={{ alignSelf: 'flex-start' }}
+          isLink={false}
+        />
+        <Category
+          category={{ label: 'Wants to get started' }}
+          sx={{
+            border: '1px solid #A72E5A',
+            backgroundColor: '#F7C7D9',
+            color: '#A72E5A',
+          }}
+        />
+      </Flex>
+    </Flex>
+  )
+}

packages/components/src/CardListItem/CardDetailsSpaceProfile.tsx

@@ -0,0 +1,86 @@
+import { Flex, Image, Text } from 'theme-ui'
+
+import { Category } from '../Category/Category'
+import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { Username } from '../Username/Username'
+
+import type { IProfileCreator } from './types'
+
+interface IProps {
+  creator: IProfileCreator
+}
+
+export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
+  const { _id, about, badges, countryCode, coverImage, profileType, subType } =
+    creator
+
+  const aboutTextStart =
+    about && about.length > 80 ? about.slice(0, 78) + '...' : false
+
+  return (
+    <Flex sx={{ flexDirection: 'column', width: '100%' }}>
+      {coverImage && (
+        <Flex sx={{ flexDirection: 'column' }}>
+          <Flex sx={{ aspectRatio: 16 / 6, overflow: 'hidden' }}>
+            <Image
+              src={coverImage}
+              sx={{
+                aspectRatio: 16 / 6,
+                alignSelf: 'stretch',
+                objectFit: 'cover',
+              }}
+            />
+          </Flex>
+          <MemberBadge
+            profileType={profileType}
+            size={40}
+            sx={{
+              alignSelf: 'flex-end',
+              transform: 'translateY(-20px)',
+              marginX: 2,
+            }}
+          />
+        </Flex>
+      )}
+      <Flex
+        sx={{
+          alignItems: 'flex-start',
+          flexDirection: 'column',
+          gap: 1,
+          transform: coverImage ? 'translateY(-20px)' : '',
+          paddingX: 2,
+          paddingY: coverImage ? 0 : 2,
+        }}
+      >
+        <Flex sx={{ gap: 2 }}>
+          {!coverImage && <MemberBadge profileType={profileType} size={30} />}
+          <Username
+            user={{
+              userName: _id,
+              countryCode,
+              isVerified: badges?.verified || false,
+              isSupporter: badges?.supporter || false,
+            }}
+            sx={{ alignSelf: 'flex-start' }}
+            isLink={false}
+          />
+        </Flex>
+        {subType && (
+          <Category
+            category={{ label: 'Wants to get started' }}
+            sx={{
+              border: '1px solid #0087B6',
+              backgroundColor: '#ECFAFF',
+              color: '#0087B6',
+            }}
+          />
+        )}
+        {about && (
+          <Text variant="quiet" sx={{ fontSize: 2 }}>
+            {aboutTextStart || about}
+          </Text>
+        )}
+      </Flex>
+    </Flex>
+  )
+}

packages/components/src/CardListItem/CardListItem.stories.tsx

@@ -1,3 +1,5 @@
+import { faker } from '@faker-js/faker'
+
 import { CardListItem } from './CardListItem'
 
 import type { Meta, StoryFn } from '@storybook/react'
@@ -12,16 +14,61 @@ export const DefaultMember: StoryFn<typeof CardListItem> = () => {
   const item = {
     _id: 'not-selected-onload',
     type: 'member' as ProfileTypeName,
+    creator: {
+      _id: 'member_no2',
+      _lastActive: 'string',
+      countryCode: 'br',
+      userImage: faker.image.avatar(),
+      displayName: 'member_no1',
+      isContactableByPublic: false,
+      profileType: 'member' as ProfileTypeName,
+    },
   }
 
-  return <CardListItem item={item} />
+  return (
+    <div style={{ width: '500px' }}>
+      <CardListItem item={item} />
+    </div>
+  )
 }
 
 export const DefaultSpace: StoryFn<typeof CardListItem> = () => {
   const item = {
     _id: 'not-selected-onload',
     type: 'workspace' as ProfileTypeName,
+    creator: {
+      _id: 'string',
+      _lastActive: 'string',
+      about:
+        'Lorem ipsum odor amet, consectetuer adipiscing elit. Lorem ipsum odor amet, consectetuer adipiscing elit.',
+      badges: {
+        supporter: true,
+        verified: false,
+      },
+      countryCode: 'uk',
+      displayName: 'user',
+      isContactableByPublic: false,
+      profileType: 'workspace' as ProfileTypeName,
+      subType: 'Sheetpress',
+    },
+  }
+
+  return (
+    <div style={{ width: '500px' }}>
+      <CardListItem item={item} />
+    </div>
+  )
+}
+
+export const DefaultFallback: StoryFn<typeof CardListItem> = () => {
+  const item = {
+    _id: 'not-selected-onload',
+    type: 'member' as ProfileTypeName,
   }
 
-  return <CardListItem item={item} />
+  return (
+    <div style={{ width: '500px' }}>
+      <CardListItem item={item} />
+    </div>
+  )
 }