Added close button to PostDetail

src/components/Admin/custom/PostPreview.tsx

@@ -32,7 +32,13 @@ export const PostPreview: FC = () => {
               </Stack>
             </Grid>
             <Grid xs={5}>
-              {isDetailOpen && <PostDetail caption={formData?.caption ?? ''} details={formData?.details ?? ''} />}
+              {isDetailOpen && (
+                <PostDetail
+                  closeDetail={() => openDetail(false)}
+                  caption={formData?.caption ?? ''}
+                  details={formData?.details ?? ''}
+                />
+              )}
             </Grid>
           </Grid>
         )}

src/components/Posts/PostDetail.tsx

@@ -1,14 +1,16 @@
-import {Stack, Typography} from '@mui/material'
+import {Box, Stack, Typography} from '@mui/material'
 import {FC} from 'react'
 
+import {CloseButton} from '../CloseButton/CloseButton'
 import {PostMarkdown} from './PostMarkdown'
 
 type PostDetailProps = {
   caption: string
   details: string
+  closeDetail: () => void
 }
 
-export const PostDetail: FC<PostDetailProps> = ({caption, details}) => {
+export const PostDetail: FC<PostDetailProps> = ({caption, details, closeDetail}) => {
   return (
     <Stack
       p={2}
@@ -17,8 +19,12 @@ export const PostDetail: FC<PostDetailProps> = ({caption, details}) => {
         backgroundColor: 'white',
         maxHeight: '60vh',
         overflow: 'auto',
+        position: 'relative',
       }}
     >
+      <Box position="absolute" top={16} right={16}>
+        <CloseButton size={30} onClick={closeDetail} invertColors />
+      </Box>
       <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic" mb={4}>
         {caption}
       </Typography>

src/components/Posts/Posts.tsx

@@ -64,7 +64,11 @@ export const Posts: FC = () => {
             </Stack>
           </Grid>
           <Grid xs={12} sm={6} mt={{xs: 2, sm: 0}}>
-            <PostDetail caption={posts[activePostDetailIndex].caption} details={posts[activePostDetailIndex].details} />
+            <PostDetail
+              closeDetail={() => setActivePostDetailIndex(undefined)}
+              caption={posts[activePostDetailIndex].caption}
+              details={posts[activePostDetailIndex].details}
+            />
           </Grid>
         </Grid>
       )}