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,19 @@
-import {Stack, Typography} from '@mui/material'
+import {Box, Stack, Theme, Typography, useMediaQuery} 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}) => {
+  const lg = useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
+  const iconSize = lg ? 34 : 24
+
   return (
     <Stack
       p={2}
@@ -17,11 +22,15 @@
         backgroundColor: 'white',
         maxHeight: '60vh',
         overflow: 'auto',
+        position: 'relative',
       }}
     >
-      <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic" mb={4}>
-        {caption}
-      </Typography>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" mb={4}>
+        <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic">
+          {caption}
+        </Typography>
+        <CloseButton size={iconSize} onClick={closeDetail} invertColors />
+      </Stack>
       <PostMarkdown content={details} />
     </Stack>
   )

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>
       )}