feat: post details page base

src/features/Posts/Components/PostCard/Header/Header.tsx

@@ -1,5 +1,6 @@
 import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
 import dayjs from 'dayjs'
+import { UnionToObjectKeys } from 'src/utils/types/utils';
 
 interface Props {
     author: {
@@ -8,21 +9,37 @@ interface Props {
         image: string
     }
     date: string;
-    size?: 'sm' | 'md'
+    size?: 'sm' | 'md' | 'lg';
+    showTimeAgo?: boolean;
 }
 
-export default function Header({ size = 'md', ...props }: Props) {
+const avatarSize: UnionToObjectKeys<Props, 'size', number> = {
+    sm: 32,
+    md: 40,
+    lg: 48
+}
+
+const nameSize: UnionToObjectKeys<Props, 'size'> = {
+    sm: 'text-body5',
+    md: 'text-body4',
+    lg: 'text-body4'
+}
+
+export default function Header({
+    size = 'md',
+    showTimeAgo = true,
+    ...props }: Props) {
 
     return (
         <div className='flex gap-8'>
-            <Avatar width={size === 'md' ? 40 : 32} src={props.author.image} />
+            <Avatar width={avatarSize[size]} src={props.author.image} />
             <div>
-                <p className={`${size === 'md' ? 'text-body4' : "text-body5"} text-black font-medium`}>{props.author.name}</p>
+                <p className={`${nameSize[size]} text-black font-medium`}>{props.author.name}</p>
                 <p className={`text-body6 text-gray-600`}>{dayjs(props.date).format('MMMM DD')}</p>
             </div>
-            <p className={`${size === 'md' ? 'text-body4' : " text-body5"} text-gray-500 ml-auto `}>
+            {showTimeAgo && <p className={`${nameSize[size]} text-gray-500 ml-auto `}>
                 {dayjs().diff(props.date, 'hour') < 24 ? `${dayjs().diff(props.date, 'hour')}h ago` : undefined}
-            </p>
+            </p>}
         </div>
     )
 }

src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx

@@ -0,0 +1,15 @@
+import Header from "src/features/Posts/Components/PostCard/Header/Header"
+import { Post } from "src/features/Posts/types"
+
+
+interface Props {
+    post: Post
+}
+
+export default function PageContent({ post }: Props) {
+    return (
+        <div>
+            <Header size="lg" showTimeAgo={false} author={post.author} date={post.date} />
+        </div>
+    )
+}

src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import PostDetailsPage from './PostDetailsPage';
+
+export default {
+    title: 'Posts/Post Details Page',
+    component: PostDetailsPage,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof PostDetailsPage>;
+
+
+const Template: ComponentStory<typeof PostDetailsPage> = (args) => <PostDetailsPage {...args as any} ></PostDetailsPage>
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+

src/features/Posts/pages/PostDetailsPage/styles.module.css

@@ -0,0 +1,13 @@
+.grid{
+    grid-template-columns: auto 1fr 326px;
+}
+
+@media screen and (max-width:680px) {
+    aside{
+        display: none;
+    }
+
+    .grid{
+        grid-template-columns: 1fr;
+    }
+}

src/redux/features/ui.slice.ts

@@ -7,7 +7,7 @@ interface StoreState {
 }
 
 const initialState = {
-  navHeight: 88,
+  navHeight: 0,
   isMobileScreen: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || window.innerWidth < 480,
   isSearchOpen: false,
 } as StoreState;