Skip to content

Commit 133fced

Browse files
HugeFrog24HugeFrog24
committed
Card
1 parent 4456edc commit 133fced

File tree

1 file changed

+95
-75
lines changed

1 file changed

+95
-75
lines changed

‎frontend/app/components/BlogPostCard.tsx

Lines changed: 95 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -40,39 +40,13 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
4040
return "#e0e0e0";
4141
};
4242

43-
if (!post) {
44-
return (
45-
<Card className={"my-4"}>
46-
<Skeleton variant="rectangular" height={200} />
47-
<CardContent>
48-
<Grid2 container spacing={2} alignItems="center" justifyContent="space-between">
49-
<Grid2 flex={1}>
50-
<Skeleton width="200px" height="32px" />
51-
<Grid2 container spacing={2} alignItems="center" className="mt-3">
52-
<Grid2 flex={0}>
53-
<Skeleton variant="circular" width={32} height={32} />
54-
</Grid2>
55-
<Grid2 flex={0}>
56-
<Skeleton width="100px" />
57-
</Grid2>
58-
</Grid2>
59-
</Grid2>
60-
<Grid2 flex={0}>
61-
<Skeleton variant="rectangular" width={50} height={40} />
62-
</Grid2>
63-
</Grid2>
64-
</CardContent>
65-
</Card>
66-
);
67-
}
43+
const renderMedia = () => {
44+
if (!post) {
45+
return <Skeleton variant="rectangular" height={200} />;
46+
}
6847

69-
return (
70-
<Card
71-
className={"my-4"}
72-
id={`post-${post.id}`}
73-
sx={{ '& .MuiButton-root': { textTransform: 'none' } }}
74-
>
75-
{post.image ? (
48+
if (post.image) {
49+
return (
7650
<CardMedia
7751
component="img"
7852
height="200"
@@ -81,56 +55,102 @@ const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
8155
onClick={() => navigate(`/blog/posts/${post.id}`)}
8256
style={{ cursor: 'pointer' }}
8357
/>
84-
) : (
85-
<Grid2 container justifyContent="center" alignItems="center"
86-
onClick={() => navigate(`/blog/posts/${post.id}`)}
87-
style={{ cursor: 'pointer', height: 200, backgroundColor: getBackgroundColor() }}>
88-
<ImageIcon fontSize="large" />
89-
</Grid2>
90-
)}
58+
);
59+
}
60+
61+
return (
62+
<Grid2 container justifyContent="center" alignItems="center"
63+
onClick={() => navigate(`/blog/posts/${post.id}`)}
64+
style={{ cursor: 'pointer', height: 200, backgroundColor: getBackgroundColor() }}>
65+
<ImageIcon fontSize="large" />
66+
</Grid2>
67+
);
68+
};
69+
70+
const renderAvatar = () => {
71+
if (!post) {
72+
return <Skeleton variant="circular" width={40} height={40} />;
73+
}
74+
return <Avatar src={post.author.image} alt={post.author.username} />;
75+
};
76+
77+
const renderContent = () => {
78+
if (!post) {
79+
return (
80+
<>
81+
<Skeleton variant="text" width="80%" height={32} />
82+
<Skeleton variant="text" width="40%" height={24} />
83+
</>
84+
);
85+
}
86+
87+
return (
88+
<>
89+
<Button
90+
onClick={() => navigate(`/blog/posts/${post.id}`)}
91+
className="text-decoration-none"
92+
sx={{
93+
textAlign: 'left',
94+
display: 'block',
95+
p: 0,
96+
'&:hover': { backgroundColor: 'transparent' }
97+
}}
98+
>
99+
<Typography variant="h5" component="div">
100+
{post.title}
101+
</Typography>
102+
</Button>
103+
<Button
104+
onClick={() => navigate(`/users/${post.author.username}`)}
105+
className="text-decoration-none"
106+
sx={{
107+
justifyContent: 'flex-start',
108+
p: 0,
109+
minHeight: 0,
110+
'&:hover': { backgroundColor: 'transparent' }
111+
}}
112+
>
113+
<Typography variant="subtitle1" sx={{ lineHeight: 1 }}>
114+
{post.author.username}
115+
</Typography>
116+
</Button>
117+
</>
118+
);
119+
};
120+
121+
const renderAction = () => {
122+
if (!post) {
123+
return <Skeleton variant="rectangular" width={80} height={36} />;
124+
}
125+
126+
return (
127+
<Button
128+
variant="contained"
129+
onClick={() => navigate(`/blog/posts/${post.id}`)}
130+
sx={{ minWidth: '80px' }}
131+
>
132+
Go!
133+
</Button>
134+
);
135+
};
136+
137+
return (
138+
<Card
139+
className={"my-4"}
140+
id={post ? `post-${post.id}` : undefined}
141+
sx={{ '& .MuiButton-root': { textTransform: 'none' } }}
142+
>
143+
{renderMedia()}
91144
<CardContent sx={{ py: 2 }}>
92145
<Grid2 container spacing={2} alignItems="center">
93146
<Grid2>
94-
<Avatar src={post.author.image} alt={post.author.username} />
147+
{renderAvatar()}
95148
</Grid2>
96149
<Grid2 flex={1} sx={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
97-
<Button
98-
onClick={() => navigate(`/blog/posts/${post.id}`)}
99-
className="text-decoration-none"
100-
sx={{
101-
textAlign: 'left',
102-
display: 'block',
103-
p: 0,
104-
'&:hover': { backgroundColor: 'transparent' }
105-
}}
106-
>
107-
<Typography variant="h5" component="div">
108-
{post.title}
109-
</Typography>
110-
</Button>
111-
<Button
112-
onClick={() => navigate(`/users/${post.author.username}`)}
113-
className="text-decoration-none"
114-
sx={{
115-
justifyContent: 'flex-start',
116-
p: 0,
117-
minHeight: 0,
118-
'&:hover': { backgroundColor: 'transparent' }
119-
}}
120-
>
121-
<Typography variant="subtitle1" sx={{ lineHeight: 1 }}>
122-
{post.author.username}
123-
</Typography>
124-
</Button>
150+
{renderContent()}
125151
</Grid2>
126152
<Grid2 sx={{ display: 'flex', alignItems: 'center' }}>
127-
<Button
128-
variant="contained"
129-
onClick={() => navigate(`/blog/posts/${post.id}`)}
130-
sx={{ minWidth: '80px' }}
131-
>
132-
Go!
133-
</Button>
153+
{renderAction()}
134154
</Grid2>
135155
</Grid2>
136156
</CardContent>

0 commit comments

Comments
 (0)