feat: update ui of map badges on list view

ONEARMY · Dec 16, 2024 · 62ca78c · 62ca78c
1 parent 25ad531
commit 62ca78c
Show file tree

Hide file tree

Showing 16 changed files with 341 additions and 226 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -33,6 +33,7 @@
     "oa-themes": "workspace:^",
     "photoswipe": "^5.4.1",
     "react-country-flag": "^3.1.0",
+    "react-horizontal-scrolling-menu": "^8.2.0",
     "react-icons": "^5.3.0",
     "react-image-crop": "^11.0.5",
     "react-player": "^2.16.0",

diff --git a/packages/components/src/CardButton/CardButton.tsx b/packages/components/src/CardButton/CardButton.tsx
@@ -16,27 +16,31 @@ export const CardButton = (props: IProps) => {
       sx={{
         alignItems: 'center',
         alignContent: 'center',
-        marginTop: '2px',
+        marginTop: '4px',
         borderRadius: 2,
         padding: 0,
         transition: 'borderBottom 0.2s, transform 0.2s',
         '&:hover': !isSelected && {
           animationSpeed: '0.3s',
           cursor: 'pointer',
-          marginTop: '0',
-          borderBottom: '4px solid',
+          marginTop: '2px',
+          marginBottom: '2px',
+          borderBottom: '2px solid',
           transform: 'translateY(-2px)',
           borderColor: 'black',
         },
         '&:active': {
           transform: 'translateY(1px)',
+          marginTop: '2px',
+          marginBottom: '2px',
           borderBottom: '3px solid',
           borderColor: 'grey',
           transition: 'borderBottom 0.2s, transform 0.2s, borderColor 0.2s',
         },
         ...(isSelected
           ? {
-              marginTop: '0',
+              marginTop: '1px',
+              marginBottom: '2px',
               borderBottom: '4px solid',
               borderColor: 'grey',
               transform: 'translateY(-2px)',

diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
@@ -45,7 +45,7 @@ interface IGlyphProps {
   glyph: keyof IGlyphs
 }
 
-export interface IProps {
+export interface IProps extends React.ButtonHTMLAttributes<HTMLElement> {
   glyph: keyof IGlyphs
   color?: string
   size?: number | string

diff --git a/packages/components/src/MapFilterList/MapFilterList.stories.tsx b/packages/components/src/MapFilterList/MapFilterList.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { MapFilterOptionsList } from 'oa-shared'
 
 export default {
-  title: 'Components/MapFilterList',
+  title: 'Map/MapFilterList',
   component: MapFilterList,
 } as Meta<typeof MapFilterList>
 

diff --git a/packages/components/src/MapFilterProfileTypeCardList/MapFilterProfileTypeCardList.tsx b/packages/components/src/MapFilterProfileTypeCardList/MapFilterProfileTypeCardList.tsx
diff --git a/packages/components/src/MemberTypeVerticalList/MemberTypeVerticalList.client.tsx b/packages/components/src/MemberTypeVerticalList/MemberTypeVerticalList.client.tsx
@@ -0,0 +1,72 @@
+import { Text } from 'theme-ui'
+
+import { CardButton } from '../CardButton/CardButton'
+import { MemberBadge } from '../MemberBadge/MemberBadge'
+import { VerticalList } from '../VerticalList/VerticalList'
+
+import type {
+  MapFilterOption,
+  MapFilterOptionsList,
+  ProfileTypeName,
+} from 'oa-shared'
+
+export interface IProps {
+  activeFilters: MapFilterOptionsList
+  availableFilters: MapFilterOptionsList
+  onFilterChange: (filter: MapFilterOption) => void
+}
+
+export const MemberTypeVerticalList = (props: IProps) => {
+  const { activeFilters, availableFilters, onFilterChange } = props
+
+  const items = availableFilters?.filter(
+    ({ filterType }) => filterType === 'profileType',
+  )
+
+  if (!items || !items.length || items.length < 2) {
+    return null
+  }
+
+  return (
+    <VerticalList dataCy="MemberTypeVerticalList">
+      {items.map((item, index) => {
+        const active = activeFilters.find(
+          (filter) => item.label === filter.label,
+        )
+        return (
+          <CardButton
+            data-cy={`MemberTypeVerticalList-Item${active ? '-active' : ''}`}
+            data-testid="MemberTypeVerticalList-Item"
+            title={item._id}
+            key={index}
+            onClick={() => onFilterChange(item)}
+            extrastyles={{
+              background: 'none',
+              textAlign: 'center',
+              width: '130px',
+              minWidth: '130px',
+              marginX: 1,
+              height: '75px',
+              flexDirection: 'column',
+              ...(active
+                ? {
+                    borderColor: 'green',
+                    ':hover': { borderColor: 'green' },
+                  }
+                : {
+                    borderColor: 'background',
+                    ':hover': { borderColor: 'background' },
+                  }),
+            }}
+          >
+            <MemberBadge size={40} profileType={item._id as ProfileTypeName} />
+            <br />
+            <Text variant="quiet" sx={{ fontSize: 1 }}>
+              {item.label}
+            </Text>
+          </CardButton>
+        )
+      })}
+    </VerticalList>
+  )
+}