From 2e53beea71d23aa2d004167978910f9d83339df9 Mon Sep 17 00:00:00 2001
From: Adnan <adnan.avni@hotmail.com>
Date: Sun, 15 Oct 2023 20:12:32 +0300
Subject: [PATCH] posts images will now open bigger after clickin them

---
 .../app/src/components/EditProfile/index.tsx  |  1 +
 packages/app/src/components/Image/index.tsx   | 48 +++++++++++++++++--
 packages/app/src/components/Posts/index.tsx   |  4 +-
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/EditProfile/index.tsx b/packages/app/src/components/EditProfile/index.tsx
index e9fa123..d7c7c66 100644
--- a/packages/app/src/components/EditProfile/index.tsx
+++ b/packages/app/src/components/EditProfile/index.tsx
@@ -149,6 +149,7 @@ function EditProfile() {
 					type="date"
 					value={birthdate}
 					onChange={(e) => setBirthdate(e.target.value)}
+					max={new Date().toISOString().split("T")[0]}
 				></StyledInput>
 				<label>Favourite fishing style</label>
 				<StyledSelect
diff --git a/packages/app/src/components/Image/index.tsx b/packages/app/src/components/Image/index.tsx
index 01c1475..f10ba95 100644
--- a/packages/app/src/components/Image/index.tsx
+++ b/packages/app/src/components/Image/index.tsx
@@ -1,11 +1,13 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import styled from "styled-components";
 
 const StyledImage = styled.img`
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
+	cursor: pointer; /* Add cursor style to indicate it's clickable */
 `;
+
 const StyledImageContainer = styled.div`
 	max-width: 100%;
 	width: 500px;
@@ -14,15 +16,53 @@ const StyledImageContainer = styled.div`
 	border-radius: 0.5rem;
 `;
 
+const ImagePopup = styled.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgba(0, 0, 0, 0.8);
+	z-index: 999;
+`;
+
+const ImagePopupContent = styled.div`
+	max-width: 80%;
+	max-height: 80%;
+`;
+
 interface ImageProps {
 	src: string;
 }
 
 const Image: FC<ImageProps> = ({ src }) => {
+	const [isImagePopupOpen, setImagePopupOpen] = useState(false);
+
+	const openImagePopup = () => {
+		setImagePopupOpen(true);
+	};
+
+	const closeImagePopup = () => {
+		setImagePopupOpen(false);
+	};
+
 	return (
-		<StyledImageContainer>
-			<StyledImage src={src} />
-		</StyledImageContainer>
+		<>
+			<StyledImageContainer onClick={openImagePopup}>
+				<StyledImage src={src} />
+			</StyledImageContainer>
+
+			{isImagePopupOpen && (
+				<ImagePopup onClick={closeImagePopup}>
+					<ImagePopupContent>
+						<StyledImage src={src} />
+					</ImagePopupContent>
+				</ImagePopup>
+			)}
+		</>
 	);
 };
 
diff --git a/packages/app/src/components/Posts/index.tsx b/packages/app/src/components/Posts/index.tsx
index b326f7d..f3da530 100644
--- a/packages/app/src/components/Posts/index.tsx
+++ b/packages/app/src/components/Posts/index.tsx
@@ -82,7 +82,9 @@ const Post: FC<PostProps> = ({ post }) => {
 		<StyledPost>
 			<StyledDiv>
 				<h3>{post.user.username}</h3>
-				<p>Favourite: {post.user.favouriteFishingStyle}</p>
+				{post.user.favouriteFishingStyle && (
+					<p>Favourite: {post.user.favouriteFishingStyle}</p>
+				)}
 			</StyledDiv>
 			<StyledDiv>
 				<div>