Merge pull request #5 from nemac/develop

Develop

src/components/DropDownSelector.jsx

@@ -15,7 +15,7 @@ const AddButton = styled(Button)(({ theme }) => ({
   borderRadius: '4px',
   textTransform: 'none',
   justifyContent: 'flex-start',
-  width: '300px', // Increased width
+  width: '400px',
   '&:hover': {
     backgroundColor: '#1976d2',
   },
@@ -26,7 +26,7 @@ const AddButton = styled(Button)(({ theme }) => ({
 
 const StyledMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
-    width: '300px', // Match button width
+    width: '400px',
     maxHeight: '240px',
     marginTop: '4px',
     borderRadius: '8px',
@@ -79,6 +79,14 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
   // Filter out already selected items
   const availableItems = availableSelections.filter((item) => !selections.includes(item));
 
+  // Trim the option name for better display
+  let trimmedOption = option;
+  if (option === 'Activities') {
+    trimmedOption = 'activity';
+  } else if (option.endsWith('s')) {
+    trimmedOption = option.slice(0, -1);
+  }
+
   return (
     <div>
       <AddButton
@@ -88,12 +96,11 @@ const DropDownSelector = ({ availableSelections, selections, setSelections, opti
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
         startIcon={<PlusIcon>+</PlusIcon>}
-        sx={{ width: "100%" }}
+        sx={{ width: '100%' }}
       >
-        <Typography sx={{ display: {xs: 'none', md: 'inherit'}, fontSize: '.875rem' }}>
-          Add another&nbsp;
+        <Typography sx={{ display: { xs: 'inherit', md: 'inherit' }, fontSize: '.875rem' }}>
+          Add another {trimmedOption.toLowerCase()}
         </Typography>
-        {option}
       </AddButton>
 
       <StyledMenu

src/components/PractitionerCard.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Card, CardContent, Typography, Box, Button, Stack, Checkbox, FormControlLabel } from '@mui/material';
+import PersonIcon from '@mui/icons-material/Person';
+import climatePracLogo from '../assets/climate_prac.png';
+import theme from '../theme';
+
+export default function PractitionerCard({ practitioner }) {
+  const description = practitioner.info || 'No description available';
+  const truncatedDescription = description.length > 200 ? description.substring(0, 200) + '...' : description;
+  const displayedActivities = practitioner.activities.slice(0, 3);
+
+  return (
+    <Card
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 4,
+        boxShadow: 3,
+      }}
+    >
+      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            width: '100%',
+            height: 140,
+            mb: 2,
+            backgroundColor: '#F5F5F5',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 2,
+          }}
+        >
+          <img
+            src={climatePracLogo}
+            alt="Company Logo"
+            style={{
+              maxHeight: '100%',
+              maxWidth: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </Box>
+
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{ mb: 2, fontWeight: 'bold' }}
+        >
+          {practitioner.org}
+        </Typography>
+
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          sx={{ mb: 2 }}
+        >
+          {truncatedDescription}
+        </Typography>
+
+        <Box sx={{ mb: 2 }}>
+          <Typography
+            variant="subtitle2"
+            sx={{ mb: 1, fontWeight: 'bold' }}
+          >
+            Adaptation Expertise
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '2px',
+              flexDirection: 'row',
+              flexWrap: 'nowrap',
+            }}
+          >
+            {displayedActivities.map((activity, index) => (
+              <Box
+                key={index}
+                sx={{
+                  border: `1px solid ${theme.palette.primary.midBlue}`,
+                  borderRadius: '20px',
+                  px: 1.5,
+                  py: 0.75,
+                  color: theme.palette.primary.main,
+                  fontSize: '0.9rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minHeight: '32px',
+                  flex: '1 1 0px',
+                  textAlign: 'center',
+                }}
+              >
+                {activity}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+
+        <Box sx={{ mt: 'auto' }}>
+          <Button
+            fullWidth
+            variant="contained"
+            href={`#/practitioner/${practitioner.airtableRecId}`}
+            startIcon={<PersonIcon />}
+            sx={{
+              backgroundColor: theme.palette.primary.midBlue,
+              borderRadius: 8,
+              textTransform: 'none',
+              mb: 2,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.main,
+              },
+            }}
+          >
+            Full Practitioner Org Profile
+          </Button>
+
+          <FormControlLabel
+            control={
+              <Checkbox
+                sx={{
+                  color: theme.palette.primary.main,
+                  '&.Mui-checked': {
+                    color: theme.palette.primary.main,
+                  },
+                }}
+              />
+            }
+            label="Compare this practitioner"
+            sx={{
+              '& .MuiFormControlLabel-label': {
+                fontSize: '0.875rem',
+                color: theme.palette.primary.main,
+              },
+            }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}