Designed post card

src/pages/blog/BlogPage.styled.ts

@@ -0,0 +1,6 @@
+import { Box, styled } from "@mui/material";
+
+export const BoxStyled = styled(Box)({
+  marginTop: "100px",
+  backgroundColor: "#F8EBE1",
+});

src/pages/blog/BlogPage.tsx

@@ -1,10 +1,11 @@
 import { useSearchParams } from "react-router-dom";
 
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
 import AppHelmet from "@/components/app-helmet/AppHelmet";
 import BlogTabLayout from "@/layouts/blog-tab-layout/BlogTabLayout";
+import { BoxStyled } from "@/pages/blog/BlogPage.styled";
+import PostCard from "@/pages/blog/components/post-card/PostCard";
 
 export default function BlogPage() {
   const [searchParams] = useSearchParams();
@@ -15,11 +16,12 @@ export default function BlogPage() {
       title="Blog"
       description="Blog with posts from experts in our field"
     >
-      <Box sx={{ marginTop: "100px" }}>
+      <BoxStyled>
         <BlogTabLayout>
           <Typography>Hello {searchParams.get("category")}</Typography>
         </BlogTabLayout>
-      </Box>
+        <PostCard />
+      </BoxStyled>
     </AppHelmet>
   );
 }

src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+
+import imagePlaceholder from "@/assets/icons/image-placeholder.svg?url";
+import ShareIcon from "@/assets/icons/three-dots-vertical.svg";
+
+import {
+  BoxImageStyled,
+  BoxStyled,
+  ContentBox,
+  ImgStyled,
+  PostContentBox,
+  PostInfoBox,
+  ShareButtonStyled,
+  StatsBox,
+} from "@/pages/blog/components/post-card/PostCard.styled";
+import LikeWidgetSkeleton from "@/pages/post/components/like-widget/LikeWidgetSkeleton";
+
+export default function PostCardSkeleton() {
+  return (
+    <BoxStyled>
+      <BoxImageStyled isLoading={true} shouldShowImagePlaceholder={true}>
+        <ImgStyled src={imagePlaceholder} alt="Post image placeholder" />
+      </BoxImageStyled>
+      <ContentBox>
+        <PostInfoBox>
+          <Box display="flex" gap={1}>
+            <Skeleton variant="circular" width={40} height={40} />
+            <Box>
+              <Skeleton width={100} />
+              <Skeleton width={250} />
+            </Box>
+          </Box>
+          <ShareButtonStyled disableRipple area-label="share">
+            <ShareIcon />
+          </ShareButtonStyled>
+        </PostInfoBox>
+        <PostContentBox>
+          <Skeleton width="100%" height={200} />
+        </PostContentBox>
+        <StatsBox>
+          <Box display="flex" alignItems="center" gap={2}>
+            <Skeleton width={50} />
+            <Skeleton width={50} />
+          </Box>
+          <LikeWidgetSkeleton />
+        </StatsBox>
+      </ContentBox>
+    </BoxStyled>
+  );
+}

src/pages/blog/components/post-card/PostCard.styled.ts

@@ -0,0 +1,56 @@
+import { Box, IconButton, styled } from "@mui/material";
+
+type BoxImageStyledProps = {
+  isLoading: boolean;
+  shouldShowImagePlaceholder: boolean;
+};
+
+export const BoxStyled = styled("li")({
+  backgroundColor: "#fff",
+  maxWidth: "27rem",
+  listStyleType: "none",
+  "& a:active": {
+    color: "#000",
+  },
+});
+export const ImgStyled = styled("img")({
+  width: "100%",
+});
+export const ContentBox = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem",
+  padding: "1.7rem",
+});
+export const PostInfoBox = styled(Box)({
+  display: "flex",
+  justifyContent: "space-between",
+});
+export const PostContentBox = styled(Box)({
+  paddingBottom: "1rem",
+  borderBottom: "1px solid rgba(3,3,3,0.2)",
+});
+export const StatsBox = styled(Box)({
+  display: "flex",
+  justifyContent: "space-between",
+});
+export const ShareButtonStyled = styled(IconButton)({
+  "&:hover": { backgroundColor: "transparent" },
+  "&:active": { backgroundColor: "transparent" },
+});
+export const BoxImageStyled = styled(Box, {
+  shouldForwardProp: prop =>
+    prop !== "isLoading" && prop !== "shouldShowImagePlaceholder",
+})<BoxImageStyledProps>(({ theme, isLoading, shouldShowImagePlaceholder }) => ({
+  minWidth: "170px",
+  minHeight: "170px",
+  backgroundColor: theme.palette.primary.main,
+  boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  opacity: isLoading ? 0.3 : 1,
+  "& img": {
+    width: shouldShowImagePlaceholder ? "100px" : "100%",
+  },
+}));

src/pages/blog/components/post-card/PostCard.tsx

@@ -0,0 +1,155 @@
+import { MouseEvent } from "react";
+import { Link } from "react-router-dom";
+
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { format } from "date-fns";
+
+import CommentIcon from "@/assets/icons/comment.svg";
+import EyeIcon from "@/assets/icons/eye.svg";
+import imagePlaceholder from "@/assets/icons/image-placeholder.svg?url";
+import ShareIcon from "@/assets/icons/three-dots-vertical.svg";
+
+import { routePaths } from "@/constants/routePaths";
+import useLazyImage from "@/hooks/use-lazy-mage/useLazyImage";
+import PostCardSkeleton from "@/pages/blog/components/post-card-skeleton/PostCardSkeleton";
+import {
+  BoxImageStyled,
+  BoxStyled,
+  ContentBox,
+  ImgStyled,
+  PostContentBox,
+  PostInfoBox,
+  ShareButtonStyled,
+  StatsBox,
+} from "@/pages/blog/components/post-card/PostCard.styled";
+import LikeWidget from "@/pages/post/components/like-widget/LikeWidget";
+import theme from "@/theme/theme";
+
+type Post =
+  | {
+      id: number;
+      author: {
+        id: number;
+        username: string;
+        role: string;
+      };
+      createdAt: string;
+      updatedAt: string;
+      estimatedReadTime: number;
+      image: string;
+      title: string;
+      summary: string;
+      viewsCount: number;
+      commentsCount: number;
+    }
+  | undefined;
+
+// temporary post for ui
+const post: Post = {
+  id: 1,
+  author: {
+    id: 1,
+    username: "Admin",
+    role: "ADMIN",
+  },
+  createdAt: "2024-11-14T07:35:34.842Z",
+  updatedAt: "2024-11-14T07:35:34.842Z",
+  estimatedReadTime: 1,
+  image:
+    "https://static.wixstatic.com/media/84770f_170242c7269d4ba2ba8ad50591e1a1e8~mv2_d_4500_2992_s_4_2.jpg/v1/fill/w_925,h_615,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/84770f_170242c7269d4ba2ba8ad50591e1a1e8~mv2_d_4500_2992_s_4_2.jpg",
+  title: "Why are Facials a Must for the Modern Woman",
+  summary:
+    "Create a blog post subtitle that summarizes your post in a few short, punchy sentences and entices your audience to continue reading...",
+  viewsCount: 0,
+  commentsCount: 0,
+};
+// let post: Post = undefined;
+
+export default function PostCard() {
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+  if (post === undefined) {
+    return <PostCardSkeleton />;
+  }
+
+  const [image, { hasError }] = useLazyImage({
+    src: post.image,
+    placeholderSrc: imagePlaceholder,
+  });
+
+  function handleSharePost(event: MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    // TODO: add share functionality
+  }
+
+  return (
+    <BoxStyled>
+      <Link to={`${routePaths.posts.path}/${post.id}`}>
+        <BoxImageStyled isLoading={false} shouldShowImagePlaceholder={hasError}>
+          <ImgStyled src={image} alt={`'${post?.title}' post image`} />
+        </BoxImageStyled>
+        <ContentBox>
+          <PostInfoBox>
+            <Box display="flex" gap={1}>
+              <Link to={`/members/${post.author.id}`}>
+                <Avatar />
+              </Link>
+              <Box>
+                <Link to={`/members/${post.author.id}`}>
+                  <Typography>{post.author.username}</Typography>
+                </Link>
+                <Typography>
+                  {format(post.createdAt, "MMM d, yyyy")} &middot;{" "}
+                  {post.estimatedReadTime} min read
+                </Typography>
+              </Box>
+            </Box>
+            <ShareButtonStyled
+              onClick={handleSharePost}
+              disableRipple
+              area-label="share"
+            >
+              <ShareIcon />
+            </ShareButtonStyled>
+          </PostInfoBox>
+          <PostContentBox>
+            <Typography variant="h2" fontSize={26} fontWeight={800}>
+              {post.title}
+            </Typography>
+            <Typography
+              component={"p"}
+              variant={"paragraph"}
+              marginTop={"1rem"}
+            >
+              {post.summary}
+            </Typography>
+          </PostContentBox>
+          <StatsBox>
+            <Box display="flex" alignItems="center" gap={2}>
+              {isSmallScreen ? (
+                <>
+                  <Icon component={EyeIcon} />
+                  <Typography fontSize={20}>{post.viewsCount}</Typography>
+                  <Icon component={CommentIcon} />
+                  <Typography fontSize={20}>{post.commentsCount}</Typography>
+                </>
+              ) : (
+                <>
+                  <Typography fontSize={12}>{post.viewsCount} views</Typography>
+                  <Typography fontSize={12}>
+                    {post.commentsCount} comments
+                  </Typography>
+                </>
+              )}
+            </Box>
+            <LikeWidget postId={post.id} />
+          </StatsBox>
+        </ContentBox>
+      </Link>
+    </BoxStyled>
+  );
+}

src/pages/post/components/like-button/LikeButton.styled.ts

@@ -50,10 +50,12 @@ export const likeCircleAnimation = keyframes`
 type LikeIconProps = {
   isLiked?: boolean;
   isDisabled?: boolean;
+  isSmallScreen?: boolean;
 };
 
 export const LikeIcon = styled(HeartIcon, {
-  shouldForwardProp: prop => prop !== "isLiked" && prop !== "isDisabled",
+  shouldForwardProp: prop =>
+    prop !== "isLiked" && prop !== "isDisabled" && prop !== "isSmallScreen",
 })<LikeIconProps>(props => {
   let fillColor = "none";
   let strokeColor = theme.palette.error.light;
@@ -72,6 +74,10 @@ export const LikeIcon = styled(HeartIcon, {
     ...(props.isLiked && {
       animation: `${likeAnimation} .5s;`,
     }),
+    ...(props.isSmallScreen && {
+      width: "26px",
+      height: "26px",
+    }),
   };
 });
 

src/pages/post/components/like-button/LikeButton.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { MouseEvent, useRef, useState } from "react";
 
 import IconButton from "@mui/material/IconButton";
 
@@ -12,6 +12,8 @@ import {
 } from "@/pages/post/components/like-button/LikeButton.styled";
 import { useUserStore } from "@/store/user/userStore";
 import showSnackbar from "@/utils/show-snackbar/showSnackbar";
+import { useMediaQuery } from "@mui/material";
+import theme from "@/theme/theme";
 
 type LikeButtonProps = {
   postId: number;
@@ -50,7 +52,8 @@ export default function LikeButton({
     },
   });
 
-  const handlePostLike = () => {
+  const handlePostLike = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
     if (!isAuthenticated) {
       showSnackbar({
         message: "Please sign in to like the post",
@@ -97,6 +100,8 @@ export default function LikeButton({
     return handleRequestAbort;
   }, [debouncedIsLiked]);
 
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
     <LikeButtonContainer>
       {likesCount > 0 && (
@@ -107,7 +112,7 @@ export default function LikeButton({
         onClick={handlePostLike}
         data-testid="heart-button"
       >
-        <LikeIcon isLiked={isLiked} />
+        <LikeIcon isSmallScreen={isSmallScreen} isLiked={isLiked} />
       </IconButton>
     </LikeButtonContainer>
   );