Event popup

components/EventPopup.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import styled from 'styled-components'
+import image from 'next/image'
+import SignUpButton from './SignUpButton'
+
+const EventPopupContainer = styled.div`
+  position: absolute;
+  background-color: white;
+  padding: 20px;
+  margin: 100px 20% 0px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
+  @media (max-width: 500px) {
+    // left right margin smaller for phone users
+    margin: 100px 10% 0px;
+  }
+`
+
+const CloseButton = styled.button`
+  border-radius: 50%;
+  display: flex;
+  margin-left: auto;
+  background-color: #595959;
+  color: white;
+  font-weight: 600;
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+const PopupImage = styled(image)`
+  display: block;
+  border-radius: 10px;
+  height: 70%;
+  width: 70%;
+  max-height: 70%;
+  max-width: 70%;
+  margin: 0 auto;
+  padding-top: 30px 0 50px;
+`
+
+const PopupTitle = styled.h1`
+  display: flex;
+  font-size: 24px;
+  font-weight: 600;
+  color: black;
+`
+
+const PopupContent = styled.p``
+
+type Props = {
+  image: string
+  title: string
+  content: string
+  isActive: boolean
+}
+
+/**
+ *
+ * @returns A popup that displays the event details and sign up button
+ *
+ */
+
+function EventPopup(props: Props) {
+  const [isActive, setIsActive] = useState(true)
+  const closePopup = () => {
+    setIsActive(false)
+  }
+
+  return (
+    <div>
+      {isActive && (
+        <EventPopupContainer>
+          <CloseButton onClick={closePopup}>x</CloseButton>
+          <PopupImage src={props.image} alt="Event Image" />
+          <PopupTitle>{props.title}</PopupTitle>
+          <PopupContent>{props.content}</PopupContent>
+          <SignUpButton />
+        </EventPopupContainer>
+      )}
+    </div>
+  )
+}
+
+export default EventPopup

components/NavBar.tsx

@@ -4,7 +4,6 @@ import styled from 'styled-components'
 
 import { navTitles } from '@/texts/common/navTitles'
 import NavItem from './NavItem'
-
 export const NAV_BAR_HEIGHT = '4rem'
 
 const MainContainer = styled.div<{ isVisible: boolean }>`

components/SignUpButton.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+  display: flex;
+  background-color: #d9d9d9;
+  color: black;
+  font-weight: 600;
+  padding: 10px;
+  border-width: 0px;
+  margin: 50px 0px 0px auto;
+  &:hover {
+    cursor: pointer;
+    border: 1px solid black;
+    background-color: white;
+    color: black;
+  }
+`
+
+function handleSignUp() {
+  // TODO: Implement sign up functionality
+}
+
+function SignUpButton() {
+  return <StyledButton onClick={handleSignUp}>Sign Up Here</StyledButton>
+}
+
+export default SignUpButton