From 7fa61e6c2e2d5444c0ce867769bf6516cbfabe5d Mon Sep 17 00:00:00 2001 From: Vishesh 'ironeagle' Bangotra Date: Wed, 12 Nov 2025 05:12:28 +0530 Subject: [PATCH] abstracted styles and Author from ArticleCardSizes --- .../ArticleCards/ArticleCardSize2.tsx | 78 +------------------ .../ArticleCards/ArticleCardSize4.tsx | 78 +------------------ .../ArticleCards/ArticleCardSize6.tsx | 78 +------------------ src/blog/components/Author.tsx | 39 ++++++++++ src/blog/types/styles.ts | 40 ++++++++++ 5 files changed, 85 insertions(+), 228 deletions(-) create mode 100644 src/blog/components/Author.tsx create mode 100644 src/blog/types/styles.ts diff --git a/src/blog/components/ArticleCards/ArticleCardSize2.tsx b/src/blog/components/ArticleCards/ArticleCardSize2.tsx index 5a5170b..c32143d 100644 --- a/src/blog/components/ArticleCards/ArticleCardSize2.tsx +++ b/src/blog/components/ArticleCards/ArticleCardSize2.tsx @@ -1,84 +1,10 @@ import React from 'react'; import { Typography } from '@mui/material'; -import Box from "@mui/material/Box"; -import AvatarGroup from "@mui/material/AvatarGroup"; -import Avatar from "@mui/material/Avatar"; -import { styled } from "@mui/material/styles"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; +import { Author } from "../Author"; import { ArticleCardProps } from "../../types/props"; +import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles"; -const StyledCard = styled(Card)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - padding: 0, - height: '100%', - backgroundColor: (theme.vars || theme).palette.background.paper, - '&:hover': { - backgroundColor: 'transparent', - cursor: 'pointer', - }, - '&:focus-visible': { - outline: '3px solid', - outlineColor: 'hsla(210, 98%, 48%, 0.5)', - outlineOffset: '2px', - }, -})); - -const StyledCardContent = styled(CardContent)({ - display: 'flex', - flexDirection: 'column', - gap: 4, - padding: 16, - flexGrow: 1, - '&:last-child': { - paddingBottom: 16, - }, -}); - -const StyledTypography = styled(Typography)({ - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - WebkitLineClamp: 2, - overflow: 'hidden', - textOverflow: 'ellipsis', -}); - -function Author({ authors }: { authors: { name: string; avatar: string }[] }) { - return ( - - - - {authors.map((author, index) => ( - - ))} - - - {authors.map((author) => author.name).join(', ')} - - - July 14, 2021 - - ); -} - export default function ArticleCardSize2({ article, index, diff --git a/src/blog/components/ArticleCards/ArticleCardSize4.tsx b/src/blog/components/ArticleCards/ArticleCardSize4.tsx index 83a8cad..2d1d967 100644 --- a/src/blog/components/ArticleCards/ArticleCardSize4.tsx +++ b/src/blog/components/ArticleCards/ArticleCardSize4.tsx @@ -1,84 +1,10 @@ import React from 'react'; import { CardMedia, Typography } from '@mui/material'; -import Box from "@mui/material/Box"; -import AvatarGroup from "@mui/material/AvatarGroup"; -import Avatar from "@mui/material/Avatar"; -import { styled } from "@mui/material/styles"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; +import { Author } from "../Author"; import { ArticleCardProps } from "../../types/props"; +import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles"; -const StyledCard = styled(Card)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - padding: 0, - height: '100%', - backgroundColor: (theme.vars || theme).palette.background.paper, - '&:hover': { - backgroundColor: 'transparent', - cursor: 'pointer', - }, - '&:focus-visible': { - outline: '3px solid', - outlineColor: 'hsla(210, 98%, 48%, 0.5)', - outlineOffset: '2px', - }, -})); - -const StyledCardContent = styled(CardContent)({ - display: 'flex', - flexDirection: 'column', - gap: 4, - padding: 16, - flexGrow: 1, - '&:last-child': { - paddingBottom: 16, - }, -}); - -const StyledTypography = styled(Typography)({ - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - WebkitLineClamp: 2, - overflow: 'hidden', - textOverflow: 'ellipsis', -}); - -function Author({ authors }: { authors: { name: string; avatar: string }[] }) { - return ( - - - - {authors.map((author, index) => ( - - ))} - - - {authors.map((author) => author.name).join(', ')} - - - July 14, 2021 - - ); -} - export default function ArticleCardSize4({ article, index, diff --git a/src/blog/components/ArticleCards/ArticleCardSize6.tsx b/src/blog/components/ArticleCards/ArticleCardSize6.tsx index 656de05..d2be45c 100644 --- a/src/blog/components/ArticleCards/ArticleCardSize6.tsx +++ b/src/blog/components/ArticleCards/ArticleCardSize6.tsx @@ -1,84 +1,10 @@ import React from 'react'; import { CardMedia, Typography } from '@mui/material'; -import Box from "@mui/material/Box"; -import AvatarGroup from "@mui/material/AvatarGroup"; -import Avatar from "@mui/material/Avatar"; -import { styled } from "@mui/material/styles"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; +import { Author } from "../Author"; import { ArticleCardProps } from "../../types/props"; +import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles"; -const StyledCard = styled(Card)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - padding: 0, - height: '100%', - backgroundColor: (theme.vars || theme).palette.background.paper, - '&:hover': { - backgroundColor: 'transparent', - cursor: 'pointer', - }, - '&:focus-visible': { - outline: '3px solid', - outlineColor: 'hsla(210, 98%, 48%, 0.5)', - outlineOffset: '2px', - }, -})); - -const StyledCardContent = styled(CardContent)({ - display: 'flex', - flexDirection: 'column', - gap: 4, - padding: 16, - flexGrow: 1, - '&:last-child': { - paddingBottom: 16, - }, -}); - -const StyledTypography = styled(Typography)({ - display: '-webkit-box', - WebkitBoxOrient: 'vertical', - WebkitLineClamp: 2, - overflow: 'hidden', - textOverflow: 'ellipsis', -}); - -function Author({ authors }: { authors: { name: string; avatar: string }[] }) { - return ( - - - - {authors.map((author, index) => ( - - ))} - - - {authors.map((author) => author.name).join(', ')} - - - July 14, 2021 - - ); -} - export default function ArticleCardSize6({ article, index, diff --git a/src/blog/components/Author.tsx b/src/blog/components/Author.tsx new file mode 100644 index 0000000..f68516f --- /dev/null +++ b/src/blog/components/Author.tsx @@ -0,0 +1,39 @@ +import Box from "@mui/material/Box"; +import AvatarGroup from "@mui/material/AvatarGroup"; +import Avatar from "@mui/material/Avatar"; +import {Typography} from "@mui/material"; +import React from "react"; + +export function Author({ authors }: { authors: { name: string; avatar: string }[] }) { + return ( + + + + {authors.map((author, index) => ( + + ))} + + + {authors.map((author) => author.name).join(', ')} + + + July 14, 2021 + + ); +} diff --git a/src/blog/types/styles.ts b/src/blog/types/styles.ts new file mode 100644 index 0000000..148d7c9 --- /dev/null +++ b/src/blog/types/styles.ts @@ -0,0 +1,40 @@ +import {styled} from "@mui/material/styles"; +import Card from "@mui/material/Card"; +import CardContent from "@mui/material/CardContent"; +import {Typography} from "@mui/material"; + +export const StyledCard = styled(Card)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + padding: 0, + height: '100%', + backgroundColor: (theme.vars || theme).palette.background.paper, + '&:hover': { + backgroundColor: 'transparent', + cursor: 'pointer', + }, + '&:focus-visible': { + outline: '3px solid', + outlineColor: 'hsla(210, 98%, 48%, 0.5)', + outlineOffset: '2px', + }, +})); + +export const StyledCardContent = styled(CardContent)({ + display: 'flex', + flexDirection: 'column', + gap: 4, + padding: 16, + flexGrow: 1, + '&:last-child': { + paddingBottom: 16, + }, +}); + +export const StyledTypography = styled(Typography)({ + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + WebkitLineClamp: 2, + overflow: 'hidden', + textOverflow: 'ellipsis', +}); \ No newline at end of file