From 82657ed66785992f2e779df048380ce55143234c Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Sun, 17 Nov 2024 17:36:07 +0200 Subject: [PATCH 1/7] Designed post card ui --- src/pages/blog/BlogPage.tsx | 4 +- .../components/post-card/PostCard.styled.ts | 28 ++++++ .../blog/components/post-card/PostCard.tsx | 88 +++++++++++++++++++ .../components/like-button/LikeButton.tsx | 5 +- 4 files changed, 122 insertions(+), 3 deletions(-) create mode 100644 src/pages/blog/components/post-card/PostCard.styled.ts create mode 100644 src/pages/blog/components/post-card/PostCard.tsx diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx index 0d9f569..71fd29e 100644 --- a/src/pages/blog/BlogPage.tsx +++ b/src/pages/blog/BlogPage.tsx @@ -5,6 +5,7 @@ import Typography from "@mui/material/Typography"; import AppHelmet from "@/components/app-helmet/AppHelmet"; import BlogTabLayout from "@/layouts/blog-tab-layout/BlogTabLayout"; +import PostCard from "@/pages/blog/components/post-card/PostCard"; export default function BlogPage() { const [searchParams] = useSearchParams(); @@ -15,10 +16,11 @@ export default function BlogPage() { title="Blog" description="Blog with posts from experts in our field" > - + Hello {searchParams.get("category")} + ); diff --git a/src/pages/blog/components/post-card/PostCard.styled.ts b/src/pages/blog/components/post-card/PostCard.styled.ts new file mode 100644 index 0000000..e646195 --- /dev/null +++ b/src/pages/blog/components/post-card/PostCard.styled.ts @@ -0,0 +1,28 @@ +import { Box, styled } from "@mui/material"; + +export const BoxStyled = styled("li")({ + backgroundColor: "#fff", + maxWidth: "27rem", + listStyleType: "none", +}); +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", +}); diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx new file mode 100644 index 0000000..c27494a --- /dev/null +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -0,0 +1,88 @@ +import { Link } from "react-router-dom"; + +import { Avatar, Box, IconButton, Typography } from "@mui/material"; +import { format } from "date-fns"; + +import ShareIcon from "@/assets/icons/three-dots-vertical.svg"; + +import { routePaths } from "@/constants/routePaths"; +import { + BoxStyled, + ContentBox, + ImgStyled, + PostContentBox, + PostInfoBox, + StatsBox, +} from "@/pages/blog/components/post-card/PostCard.styled"; +import LikeWidget from "@/pages/post/components/like-widget/LikeWidget"; + +// temporary post for ui +const 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, +}; + +export default function PostCard() { + return ( + + + + + + + + + {post.author.username} + + {format(post.createdAt, "MMM d, yyyy")} ·{" "} + {post.estimatedReadTime} min read + + + + + + + + + + {post.title} + + + {post.summary} + + + + + {post.viewsCount} views + + {post.commentsCount} comments + + + + + + + + ); +} diff --git a/src/pages/post/components/like-button/LikeButton.tsx b/src/pages/post/components/like-button/LikeButton.tsx index 6e86832..37c1644 100644 --- a/src/pages/post/components/like-button/LikeButton.tsx +++ b/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"; @@ -50,7 +50,8 @@ export default function LikeButton({ }, }); - const handlePostLike = () => { + const handlePostLike = (event: MouseEvent) => { + event.preventDefault(); if (!isAuthenticated) { showSnackbar({ message: "Please sign in to like the post", From ab4809d97f9fd2323dbbd77859f5b81330c50ad0 Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Sun, 17 Nov 2024 22:36:11 +0200 Subject: [PATCH 2/7] Added placeholder ui for post --- .../post-card-skeleton/PostCardSkeleton.tsx | 58 +++++++++++++++++++ .../components/post-card/PostCard.styled.ts | 23 +++++++- .../blog/components/post-card/PostCard.tsx | 54 ++++++++++++++--- 3 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx diff --git a/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx b/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx new file mode 100644 index 0000000..7983e54 --- /dev/null +++ b/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx @@ -0,0 +1,58 @@ +import { Skeleton } from "@mui/material"; +import { Box, IconButton } from "@mui/material"; + +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, + StatsBox, +} from "@/pages/blog/components/post-card/PostCard.styled"; +import LikeWidgetSkeleton from "@/pages/post/components/like-widget/LikeWidgetSkeleton"; + +export default function PostCardSkeleton() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/pages/blog/components/post-card/PostCard.styled.ts b/src/pages/blog/components/post-card/PostCard.styled.ts index e646195..5b6b36d 100644 --- a/src/pages/blog/components/post-card/PostCard.styled.ts +++ b/src/pages/blog/components/post-card/PostCard.styled.ts @@ -1,8 +1,13 @@ import { Box, styled } from "@mui/material"; +type BoxImageStyledProps = { + isLoading: boolean; + shouldShowImagePlaceholder: boolean; +}; + export const BoxStyled = styled("li")({ backgroundColor: "#fff", - maxWidth: "27rem", + width: "27rem", listStyleType: "none", }); export const ImgStyled = styled("img")({ @@ -26,3 +31,19 @@ export const StatsBox = styled(Box)({ display: "flex", justifyContent: "space-between", }); +export const BoxImageStyled = styled(Box, { + shouldForwardProp: prop => + prop !== "isLoading" && prop !== "shouldShowImagePlaceholder", +})(({ 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, + ...(shouldShowImagePlaceholder + ? { "& img": { width: "100px" } } + : { "& img": { width: "100%" } }), +})); diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx index c27494a..b20f14d 100644 --- a/src/pages/blog/components/post-card/PostCard.tsx +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -3,10 +3,14 @@ import { Link } from "react-router-dom"; import { Avatar, Box, IconButton, Typography } from "@mui/material"; import { format } from "date-fns"; +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, @@ -16,8 +20,27 @@ import { } from "@/pages/blog/components/post-card/PostCard.styled"; import LikeWidget from "@/pages/post/components/like-widget/LikeWidget"; +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 = { +const post: Post = { id: 1, author: { id: 1, @@ -35,12 +58,25 @@ const post = { viewsCount: 0, commentsCount: 0, }; +// let post: Post = undefined; export default function PostCard() { + if (post === undefined) return ; + + const [image, { hasError }] = useLazyImage({ + src: post.image, + placeholderSrc: imagePlaceholder, + }); + return ( - - - + + + + + @@ -68,7 +104,11 @@ export default function PostCard() { {post.title} - + {post.summary} @@ -82,7 +122,7 @@ export default function PostCard() { - - + + ); } From f9cd2b2e562c08f45949275392597a26f7511581 Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Sun, 17 Nov 2024 23:41:41 +0200 Subject: [PATCH 3/7] Added responsive design --- src/assets/icons/comment.svg | 1 + src/assets/icons/eye.svg | 1 + .../blog/components/post-card/PostCard.tsx | 31 ++++++++++++++----- .../like-button/LikeButton.styled.ts | 8 ++++- .../components/like-button/LikeButton.tsx | 6 +++- 5 files changed, 37 insertions(+), 10 deletions(-) create mode 100644 src/assets/icons/comment.svg create mode 100644 src/assets/icons/eye.svg diff --git a/src/assets/icons/comment.svg b/src/assets/icons/comment.svg new file mode 100644 index 0000000..6c0f002 --- /dev/null +++ b/src/assets/icons/comment.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg new file mode 100644 index 0000000..ef3c4a3 --- /dev/null +++ b/src/assets/icons/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx index b20f14d..91624a1 100644 --- a/src/pages/blog/components/post-card/PostCard.tsx +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -1,8 +1,12 @@ import { Link } from "react-router-dom"; import { Avatar, Box, IconButton, Typography } from "@mui/material"; +import { useMediaQuery } from "@mui/material"; +import { Icon } from "@mui/material"; 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"; @@ -19,6 +23,7 @@ import { 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 = | { @@ -61,6 +66,8 @@ const post: Post = { // let post: Post = undefined; export default function PostCard() { + const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); + if (post === undefined) return ; const [image, { hasError }] = useLazyImage({ @@ -71,10 +78,7 @@ export default function PostCard() { return ( - + @@ -114,10 +118,21 @@ export default function PostCard() { - {post.viewsCount} views - - {post.commentsCount} comments - + {isSmallScreen ? ( + <> + + {post.viewsCount} + + {post.commentsCount} + + ) : ( + <> + {post.viewsCount} views + + {post.commentsCount} comments + + + )} diff --git a/src/pages/post/components/like-button/LikeButton.styled.ts b/src/pages/post/components/like-button/LikeButton.styled.ts index 5ec6db1..0f599ae 100644 --- a/src/pages/post/components/like-button/LikeButton.styled.ts +++ b/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", })(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", + }), }; }); diff --git a/src/pages/post/components/like-button/LikeButton.tsx b/src/pages/post/components/like-button/LikeButton.tsx index 37c1644..2ef25d3 100644 --- a/src/pages/post/components/like-button/LikeButton.tsx +++ b/src/pages/post/components/like-button/LikeButton.tsx @@ -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; @@ -98,6 +100,8 @@ export default function LikeButton({ return handleRequestAbort; }, [debouncedIsLiked]); + const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); + return ( {likesCount > 0 && ( @@ -108,7 +112,7 @@ export default function LikeButton({ onClick={handlePostLike} data-testid="heart-button" > - + ); From e76fe45cc3c81488efc8107068f8ea3ead19d686 Mon Sep 17 00:00:00 2001 From: RossWebFS <161938898+RossWebFS@users.noreply.github.com> Date: Mon, 18 Nov 2024 21:25:02 +0200 Subject: [PATCH 4/7] Impoved styles for post card image Co-authored-by: Maksym Hevyk <109922101+mhevyk@users.noreply.github.com> --- src/pages/blog/components/post-card/PostCard.styled.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/blog/components/post-card/PostCard.styled.ts b/src/pages/blog/components/post-card/PostCard.styled.ts index 5b6b36d..d2acb7f 100644 --- a/src/pages/blog/components/post-card/PostCard.styled.ts +++ b/src/pages/blog/components/post-card/PostCard.styled.ts @@ -43,7 +43,7 @@ export const BoxImageStyled = styled(Box, { justifyContent: "center", alignItems: "center", opacity: isLoading ? 0.3 : 1, - ...(shouldShowImagePlaceholder - ? { "& img": { width: "100px" } } - : { "& img": { width: "100%" } }), +"& img": { + width: shouldShowImagePlaceholder ? "100px" : "100%" +} })); From 545515512cfabbcdfd8b205d3555ec577d9b092a Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Mon, 18 Nov 2024 22:18:40 +0200 Subject: [PATCH 5/7] Impoved post card and fixed problems --- src/pages/blog/BlogPage.styled.ts | 7 +++++ src/pages/blog/BlogPage.tsx | 6 ++-- .../post-card-skeleton/PostCardSkeleton.tsx | 19 ++++--------- .../components/post-card/PostCard.styled.ts | 11 +++++++- .../blog/components/post-card/PostCard.tsx | 28 +++++++++---------- 5 files changed, 40 insertions(+), 31 deletions(-) create mode 100644 src/pages/blog/BlogPage.styled.ts diff --git a/src/pages/blog/BlogPage.styled.ts b/src/pages/blog/BlogPage.styled.ts new file mode 100644 index 0000000..f9f6fb2 --- /dev/null +++ b/src/pages/blog/BlogPage.styled.ts @@ -0,0 +1,7 @@ +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; + +export const BoxStyled = styled(Box)({ + marginTop: "100px", + backgroundColor: "#F8EBE1", +}); diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx index 71fd29e..7cf943f 100644 --- a/src/pages/blog/BlogPage.tsx +++ b/src/pages/blog/BlogPage.tsx @@ -1,10 +1,10 @@ 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() { @@ -16,12 +16,12 @@ export default function BlogPage() { title="Blog" description="Blog with posts from experts in our field" > - + Hello {searchParams.get("category")} - + ); } diff --git a/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx b/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx index 7983e54..35d4238 100644 --- a/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx +++ b/src/pages/blog/components/post-card-skeleton/PostCardSkeleton.tsx @@ -1,5 +1,5 @@ -import { Skeleton } from "@mui/material"; -import { Box, IconButton } from "@mui/material"; +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"; @@ -11,6 +11,7 @@ import { ImgStyled, PostContentBox, PostInfoBox, + ShareButtonStyled, StatsBox, } from "@/pages/blog/components/post-card/PostCard.styled"; import LikeWidgetSkeleton from "@/pages/post/components/like-widget/LikeWidgetSkeleton"; @@ -30,20 +31,12 @@ export default function PostCardSkeleton() { - + - + - - + diff --git a/src/pages/blog/components/post-card/PostCard.styled.ts b/src/pages/blog/components/post-card/PostCard.styled.ts index 5b6b36d..9f42c63 100644 --- a/src/pages/blog/components/post-card/PostCard.styled.ts +++ b/src/pages/blog/components/post-card/PostCard.styled.ts @@ -1,4 +1,6 @@ -import { Box, styled } from "@mui/material"; +import Box from "@mui/material/Box"; +import IconButton from "@mui/material/IconButton"; +import { styled } from "@mui/material/styles"; type BoxImageStyledProps = { isLoading: boolean; @@ -9,6 +11,9 @@ export const BoxStyled = styled("li")({ backgroundColor: "#fff", width: "27rem", listStyleType: "none", + "& a:active": { + color: '#000' + }, }); export const ImgStyled = styled("img")({ width: "100%", @@ -31,6 +36,10 @@ 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", diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx index 91624a1..f5f7a8c 100644 --- a/src/pages/blog/components/post-card/PostCard.tsx +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -1,8 +1,10 @@ import { Link } from "react-router-dom"; -import { Avatar, Box, IconButton, Typography } from "@mui/material"; -import { useMediaQuery } from "@mui/material"; -import { Icon } from "@mui/material"; +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"; @@ -20,6 +22,7 @@ import { ImgStyled, PostContentBox, PostInfoBox, + ShareButtonStyled, StatsBox, } from "@/pages/blog/components/post-card/PostCard.styled"; import LikeWidget from "@/pages/post/components/like-widget/LikeWidget"; @@ -84,25 +87,22 @@ export default function PostCard() { - + + + - {post.author.username} + + {post.author.username} + {format(post.createdAt, "MMM d, yyyy")} ·{" "} {post.estimatedReadTime} min read - + - + From 12987aa92c96773a6ae8ba8089b7eadaae90c430 Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Mon, 18 Nov 2024 22:43:51 +0200 Subject: [PATCH 6/7] Fixed error with eslint --- src/pages/blog/components/post-card/PostCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx index f5f7a8c..2a904eb 100644 --- a/src/pages/blog/components/post-card/PostCard.tsx +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -71,7 +71,9 @@ const post: Post = { export default function PostCard() { const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm")); - if (post === undefined) return ; + if (post === undefined) { + return ; + } const [image, { hasError }] = useLazyImage({ src: post.image, From 1861a0d22566d562bd787b215fbe42e925eef6c7 Mon Sep 17 00:00:00 2001 From: RossWebFS Date: Mon, 18 Nov 2024 23:21:14 +0200 Subject: [PATCH 7/7] Fixed mui imports, share button click event and updated lock file --- package-lock.json | 6 +++--- src/pages/blog/BlogPage.styled.ts | 3 +-- .../blog/components/post-card/PostCard.styled.ts | 14 ++++++-------- src/pages/blog/components/post-card/PostCard.tsx | 12 +++++++++++- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 60ad011..a35792f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12467,9 +12467,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.62", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.62.tgz", - "integrity": "sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg==", + "version": "1.5.63", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz", + "integrity": "sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==", "dev": true, "license": "ISC" }, diff --git a/src/pages/blog/BlogPage.styled.ts b/src/pages/blog/BlogPage.styled.ts index f9f6fb2..57094da 100644 --- a/src/pages/blog/BlogPage.styled.ts +++ b/src/pages/blog/BlogPage.styled.ts @@ -1,5 +1,4 @@ -import Box from "@mui/material/Box"; -import { styled } from "@mui/material/styles"; +import { Box, styled } from "@mui/material"; export const BoxStyled = styled(Box)({ marginTop: "100px", diff --git a/src/pages/blog/components/post-card/PostCard.styled.ts b/src/pages/blog/components/post-card/PostCard.styled.ts index ef95bf9..bc180f8 100644 --- a/src/pages/blog/components/post-card/PostCard.styled.ts +++ b/src/pages/blog/components/post-card/PostCard.styled.ts @@ -1,6 +1,4 @@ -import Box from "@mui/material/Box"; -import IconButton from "@mui/material/IconButton"; -import { styled } from "@mui/material/styles"; +import { Box, IconButton, styled } from "@mui/material"; type BoxImageStyledProps = { isLoading: boolean; @@ -9,10 +7,10 @@ type BoxImageStyledProps = { export const BoxStyled = styled("li")({ backgroundColor: "#fff", - width: "27rem", + maxWidth: "27rem", listStyleType: "none", "& a:active": { - color: '#000' + color: "#000", }, }); export const ImgStyled = styled("img")({ @@ -52,7 +50,7 @@ export const BoxImageStyled = styled(Box, { justifyContent: "center", alignItems: "center", opacity: isLoading ? 0.3 : 1, -"& img": { - width: shouldShowImagePlaceholder ? "100px" : "100%" -} + "& img": { + width: shouldShowImagePlaceholder ? "100px" : "100%", + }, })); diff --git a/src/pages/blog/components/post-card/PostCard.tsx b/src/pages/blog/components/post-card/PostCard.tsx index 2a904eb..ede4140 100644 --- a/src/pages/blog/components/post-card/PostCard.tsx +++ b/src/pages/blog/components/post-card/PostCard.tsx @@ -1,3 +1,4 @@ +import { MouseEvent } from "react"; import { Link } from "react-router-dom"; import Avatar from "@mui/material/Avatar"; @@ -80,6 +81,11 @@ export default function PostCard() { placeholderSrc: imagePlaceholder, }); + function handleSharePost(event: MouseEvent) { + event.preventDefault(); + // TODO: add share functionality + } + return ( @@ -102,7 +108,11 @@ export default function PostCard() { - +