Add building selector

frontend/app/allRooms/page.tsx

@@ -9,6 +9,7 @@ import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import { selectFilters } from "redux/filtersSlice";
 
+import AllRoomsBuildingSelector from "../../components/AllRoomsBuildingSelector";
 import AllRoomsFilter from "../../components/AllRoomsFilter";
 import Room from "../../components/AllRoomsRoom";
 import RoomList from "../../components/AllRoomsRoomList";
@@ -63,6 +64,7 @@ export default function Page() {
           Not looking for a specific building? See all free rooms in this easy
           to search list!
         </Typography>
+        <AllRoomsBuildingSelector />
         <StyledBody>
           <AllRoomsFilter filters={filters} />
           <RoomList isValidating={isValidating}>

frontend/components/AllRoomsBuildingModal.tsx

@@ -0,0 +1,129 @@
+import { Box, Fade, Modal, Stack, Typography } from "@mui/material";
+import { BoxProps, styled } from "@mui/system";
+import useBuildings from "hooks/useBuildings";
+import Image, { ImageProps } from "next/image";
+import FlipMove from "react-flip-move";
+import { useDispatch } from "react-redux";
+import { setCurrentBuilding } from "redux/currentBuildingSlice";
+
+interface AllRoomsBuildingModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const AllRoomsBuildingModal = ({
+  open,
+  onClose,
+}: AllRoomsBuildingModalProps) => {
+  const { buildings } = useBuildings();
+
+  const dispatch = useDispatch();
+
+  return (
+    <StyledModal disableAutoFocus={true} open={open} onClose={onClose}>
+      <Fade in={open}>
+        <StyledBox>
+          <Typography variant="h6">Search by building name</Typography>
+          <StyledGridBox>
+            <FlipMoveGrid>
+              {buildings?.map((building) => (
+                <MainBox
+                  key={building.id}
+                  onClick={() => {
+                    dispatch(setCurrentBuilding(building));
+                    onClose();
+                  }}
+                >
+                  <StyledImage
+                    alt={`Image of ${building.id}`}
+                    src={`/assets/building_photos/${building.id}.webp`}
+                    fill={true}
+                    style={{ objectFit: "cover" }}
+                    priority={true}
+                  />
+                  <TitleBox>
+                    <Typography sx={{ fontSize: 16, fontWeight: 500 }}>
+                      {building.name}
+                    </Typography>
+                  </TitleBox>
+                </MainBox>
+              ))}
+            </FlipMoveGrid>
+          </StyledGridBox>
+        </StyledBox>
+      </Fade>
+    </StyledModal>
+  );
+};
+
+const FlipMoveGrid = styled(FlipMove)(() => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  gridGap: "20px",
+}));
+
+const MainBox = styled(Box)<BoxProps>(({ theme }) => ({
+  position: "relative",
+  flex: 1,
+  height: 200,
+  backgroundColor: theme.palette.primary.main,
+  borderRadius: 10,
+  "&:hover": {
+    cursor: "pointer",
+  },
+  [theme.breakpoints.down("lg")]: {
+    height: 100,
+  },
+  [theme.breakpoints.down("md")]: {
+    height: 50,
+  },
+}));
+
+const StyledImage = styled(Image)<ImageProps>(() => ({
+  borderRadius: 10,
+  transition: "all 0.1s ease-in-out",
+  "&:hover": {
+    opacity: 0.7,
+  },
+}));
+
+const TitleBox = styled(Box)<BoxProps>(({ theme }) => ({
+  display: "flex",
+  borderRadius: 10,
+  position: "absolute",
+  justifyContent: "space-between",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: theme.palette.primary.main,
+  color: "white",
+  padding: 15,
+  paddingLeft: 20,
+  paddingRight: 20,
+  margin: 10,
+  pointerEvents: "none",
+}));
+
+const StyledModal = styled(Modal)(({ theme }) => ({
+  maxWidth: "70svw",
+  maxHeight: "70svh",
+  overflow: "auto",
+  margin: "auto",
+}));
+
+const StyledBox = styled(Box)({
+  padding: "20px",
+  backgroundColor: "white",
+  borderRadius: "10px",
+});
+
+const StyledGridBox = styled(Box)({
+  marginTop: "15px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export default AllRoomsBuildingModal;

frontend/components/AllRoomsBuildingSelector.tsx

@@ -0,0 +1,62 @@
+import { styled } from "@mui/system";
+import Image, { ImageProps } from "next/image";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectCurrentBuilding } from "redux/currentBuildingSlice";
+
+import AllRoomsBuildingModal from "./AllRoomsBuildingModal";
+
+const AllRoomsBuildingSelector = () => {
+  const [open, setOpen] = useState(false);
+  const currentBuilding = useSelector(selectCurrentBuilding);
+
+  return (
+    <>
+      <StyledSelector
+        onClick={() => setOpen(true)}
+        buildingId={currentBuilding?.id}
+      >
+        {currentBuilding ? currentBuilding.name : "Select Building"}
+      </StyledSelector>
+      <AllRoomsBuildingModal open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+};
+
+const StyledSelector = styled("div")<{ buildingId?: string }>(
+  ({ theme, buildingId }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: theme.palette.primary.default,
+    fontSize: "18px",
+    fontWeight: buildingId ? "bold" : "normal",
+    borderColor: theme.palette.primary.main,
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderRadius: "10px",
+    marginTop: "20px",
+    padding: "20px 0",
+    cursor: "pointer",
+    position: "relative",
+    overflow: "hidden",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundImage: buildingId
+        ? `url(/assets/building_photos/${buildingId}.webp)`
+        : "none",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      opacity: 0.4,
+      zIndex: -1,
+    },
+  })
+);
+
+export default AllRoomsBuildingSelector;