Merge pull request #57 from UoaWDCC/josef/sponsor-board

Josef/sponsor board

web/src/app/components/Filter/Filter.tsx

@@ -9,6 +9,7 @@ interface FilterProps {
   filterFields: string[];
   setFilterFields: (filterFields: string[]) => void;
   color?: string;
+  useRoles?: boolean;
 }
 
 const Filter: FC<FilterProps> = ({
@@ -17,6 +18,7 @@ const Filter: FC<FilterProps> = ({
   filterFields,
   setFilterFields,
   color = '#0091ff',
+  useRoles = true,
 }) => {
   const roles = [
     { value: 'internship', label: 'Internship' },
@@ -37,6 +39,7 @@ const Filter: FC<FilterProps> = ({
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
   const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth);
+  const [useRolesFilter, setUseRolesFilter] = useState(useRoles);
 
   return (
     <>
@@ -45,31 +48,33 @@ const Filter: FC<FilterProps> = ({
           <Title fs="italic" className={styles.filterHeading}>
             Filters
           </Title>
-          <Stack>
-            <Checkbox.Group
-              value={filterRoles}
-              onChange={setFilterRoles}
-              label="Role Type"
-              labelProps={{ style: { color: color } }}
-              classNames={{ label: styles.filterSubheading }}
-            >
-              {roles.map((role) => (
-                <Checkbox
-                  key={role.value}
-                  value={role.value}
-                  label={role.label}
-                  color={color}
-                  className={styles.checkbox}
-                  size="md"
-                />
-              ))}
-            </Checkbox.Group>
-          </Stack>
+          {useRolesFilter ? (
+            <Stack>
+              <Checkbox.Group
+                value={filterRoles}
+                onChange={setFilterRoles}
+                label="Role Type"
+                labelProps={{ style: { color: color } }}
+                classNames={{ label: styles.filterSubheading }}
+              >
+                {roles.map((role) => (
+                  <Checkbox
+                    key={role.value}
+                    value={role.value}
+                    label={role.label}
+                    color={color}
+                    className={styles.checkbox}
+                    size="md"
+                  />
+                ))}
+              </Checkbox.Group>
+            </Stack>
+          ) : null}
           <Stack>
             <Checkbox.Group
               value={filterFields}
               onChange={setFilterFields}
-              label="Fields"
+              label={useRoles ? 'Fields' : 'Industry'}
               labelProps={{ style: { color: color } }}
               classNames={{ label: styles.filterSubheading }}
             >

web/src/app/components/SponsorBoard/SponsorBoard.module.css

@@ -0,0 +1,11 @@
+.text {
+  position: relative;
+  color: var(--mantine-color-customWhite-1);
+}
+
+.paginationContainer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}

web/src/app/components/SponsorBoard/SponsorBoardCard.tsx

@@ -0,0 +1,82 @@
+import { Text, Button, Paper, Flex, Container, AspectRatio } from '@mantine/core';
+import styles from './SponsorBoard.module.css';
+import { Image } from '@mantine/core';
+
+// dummy data -- change later when we have real data
+export interface SponsorBoardCardProps {
+  sponsorTitle: string;
+  imageLink: string;
+  sponsorIndsutry: string;
+  sponsorLink: string;
+}
+
+export function SponsorBoardCard({
+  data,
+  isOneColumn,
+}: {
+  data: SponsorBoardCardProps;
+  isOneColumn?: boolean;
+}) {
+  const handleSponsorLink = () => {
+    console.log('Sponsor Link: ', data.sponsorLink);
+  };
+
+  return (
+    <Paper p="md" radius="md" w={'95%'} h={'100%'}>
+      <Flex
+        direction={isOneColumn ? 'row' : 'column'}
+        w={'100%'}
+        h={'100%'}
+        justify={'space-between'}
+      >
+        {/* Sponsor Title */}
+        <Container
+          w={{ base: '100%', sm: '80%', md: '80%', lg: '100%', xl: '100%' }}
+          h="auto"
+          style={{ overflow: 'hidden', flex: isOneColumn ? 1 : 'auto' }}
+          pl={isOneColumn ? '0' : 'auto'}
+        >
+          <AspectRatio ratio={4 / 3}>
+            <Image
+              src={data.imageLink}
+              alt="sponsor image"
+              fallbackSrc="/sponsor_placeholder.png"
+              radius="md"
+              width="100%"
+              height="100%"
+              fit="contain"
+            />
+          </AspectRatio>
+        </Container>
+        {/* Right Container (on one column layout) */}
+        <Flex
+          direction={'column'}
+          justify={isOneColumn ? 'space-evenly' : 'space-between'}
+          style={{ flex: isOneColumn ? 2 : 'auto' }}
+        >
+          <Flex justify={'space-between'}>
+            {/* Sponsor Title */}
+            <Text fw={500} size="xl" className={styles.text} ml={isOneColumn ? 'auto': 'xs'}>
+              {data.sponsorTitle}
+            </Text>
+          </Flex>
+
+          {/* Button */}
+          <Button
+            color="blue"
+            mt="xs"
+            mr="md"
+            radius="lg"
+            size="compact-md"
+            onClick={handleSponsorLink}
+            w="100%"
+          >
+            {data.sponsorIndsutry}
+          </Button>
+        </Flex>
+      </Flex>
+    </Paper>
+  );
+}
+
+export default SponsorBoardCard;