Add Post detail

ZdruzenieSTROM · Dec 10, 2023 · 79d33ec · 79d33ec
1 parent 6ce4395
commit 79d33ec
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
@@ -4,6 +4,7 @@ import {FC} from 'react'
 import {formatDate} from '@/utils/formatDate'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
+import {Button} from '../Clickable/Button'
 import {Link} from '../Clickable/Link'
 
 export interface IPost {
@@ -16,33 +17,60 @@ export interface IPost {
   visible_after: string
   visible_until: string
   sites: number[]
+  isDialogOpen: boolean
+  openDialog: () => void
 }
 
-export const Post: FC<IPost> = ({caption, short_text, links, sites, added_at}) => {
+export const Post: FC<IPost> = ({caption, short_text, links, details, sites, added_at, isDialogOpen, openDialog}) => {
   const {seminarId} = useSeminarInfo()
 
   if (!sites.includes(seminarId)) return null
 
   return (
-    <Stack>
+    <Stack sx={{position: 'relative'}}>
       <Typography variant="postTitle">{caption}</Typography>
-      <Typography variant="postBody" component="p">
-        {short_text}
-      </Typography>
+
+      <Typography variant="postBody">{short_text}</Typography>
+
       <Stack direction="row" justifyContent="space-between" alignItems="end">
         {/* alignItems so the links don't stretch */}
         <Stack gap={0.5} alignItems="start">
+          {details.length > 0 && (
+            <Button onClick={openDialog} variant="button2">
+              Podrobnosti
+            </Button>
+          )}
           {links.map(({id, url, caption}) => (
             <Link key={id} href={url} variant="button2">
               {caption}
             </Link>
           ))}
         </Stack>
-
         <Typography variant="body1" fontWeight={275} textTransform="uppercase">
           {formatDate(added_at)}
         </Typography>
       </Stack>
+
+      {isDialogOpen && (
+        <Stack
+          gap={4}
+          p={2}
+          sx={{
+            position: 'absolute',
+            left: '25vw',
+            width: '30vw',
+            border: '1rem solid black',
+            backgroundColor: 'white',
+          }}
+        >
+          <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic">
+            {caption}
+          </Typography>
+          <Typography variant="postBody" fontWeight={300} sx={{whiteSpace: 'pre-line'}}>
+            {details}
+          </Typography>
+        </Stack>
+      )}
     </Stack>
   )
 }
diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
@@ -1,7 +1,7 @@
 import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
-import {FC} from 'react'
+import {FC, useState} from 'react'
 
 import {Loading} from '../Loading/Loading'
 import {IPost, Post} from './Post'
@@ -17,14 +17,21 @@ export const Posts: FC = () => {
   })
   const posts = postsData?.data ?? []
 
+  const [activePostDetailId, setActivePostDetailId] = useState<number | null>(null)
+
   if (postsIsLoading) return <Loading />
 
   if (postsError) return <Typography>{postsError.message}</Typography>
 
   return (
-    <Stack gap={5}>
+    <Stack gap={5} mb={10}>
       {posts.map((post) => (
-        <Post key={post.id} {...post} />
+        <Post
+          key={post.id}
+          {...post}
+          isDialogOpen={post.id === activePostDetailId}
+          openDialog={() => setActivePostDetailId(post.id)}
+        />
       ))}
     </Stack>
   )

diff --git a/src/theme.ts b/src/theme.ts
@@ -66,7 +66,7 @@ const _theme = createTheme({
           button1: 'span',
           button2: 'span',
           button3: 'span',
-          postTitle: 'span',
+          postTitle: 'h1',
           postBody: 'span',
         },
       },