cleanup

src/blog/components/Latest.tsx

@@ -1,99 +1,19 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import { LatestProps } from "../types/props";
+import { StyledTypography, TitleTypography } from "../types/styles";
+import { ArticleMeta } from "./ArticleMeta";
 import Fade from '@mui/material/Fade';
 
-
-const StyledTypography = styled(Typography)({
-  display: '-webkit-box',
-  WebkitBoxOrient: 'vertical',
-  WebkitLineClamp: 2,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-const TitleTypography = styled(Typography)(({ theme }) => ({
-  position: 'relative',
-  textDecoration: 'none',
-  '&:hover': { cursor: 'pointer' },
-  '& .arrow': {
-    visibility: 'hidden',
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  '&:hover .arrow': {
-    visibility: 'visible',
-    opacity: 0.7,
-  },
-  '&:focus-visible': {
-    outline: '3px solid',
-    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
-    outlineOffset: '3px',
-    borderRadius: '8px',
-  },
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    width: 0,
-    height: '1px',
-    bottom: 0,
-    left: 0,
-    backgroundColor: (theme.vars || theme).palette.text.primary,
-    opacity: 0.3,
-    transition: 'width 0.3s ease, opacity 0.3s ease',
-  },
-  '&:hover::before': {
-    width: '100%',
-  },
-}));
-
-function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
-      >
-        <AvatarGroup max={3}>
-          {authors.map((author, index) => (
-            <Avatar
-              key={index}
-              alt={author.name}
-              src={(
-                import.meta.env.VITE_API_BASE_URL.replace(/\/+$/, "") +
-                "/" +
-                (author.avatar?.replace(/^\/+/, "") || "")
-              )}
-              sx={{ width: 24, height: 24 }}
-            />
-          ))}
-        </AvatarGroup>
-        <Typography variant="caption">
-          {authors.map((a) => a.name).join(', ')}
-        </Typography>
-      </Box>
-      <Typography variant="caption">Recently Updated</Typography>
-    </Box>
-  );
-}
-
-export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
+export default function Latest({
+  articles,
+  onSelectArticle,
+  onLoadMore
+}: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
   const [animating, setAnimating] = React.useState(false);
@@ -182,7 +102,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   {article.description}
                 </StyledTypography>
 
-                <Author authors={article.authors} />
+                <ArticleMeta article={article} />
               </Box>
             </Fade>
           </Grid>

src/blog/components/Login.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { LoginProps } from '../types/props';
 
-interface LoginProps {
-  onBack: () => void;
-  onRegister: () => void;
-}
-
-export default function Login({ onBack, onRegister }: LoginProps) {
+export default function Login({
+  onBack,
+  onRegister
+}: LoginProps) {
   const { login, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password, setPassword] = React.useState('');

src/blog/components/MainContent.tsx

@@ -10,6 +10,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
 import { ArticleModel } from "../types/models";
+import { MainContentProps } from "../types/props";
 import ArticleCardsGrid from "./ArticleCards/ArticleCardsGrid";
 
 export function Search() {
@@ -36,10 +37,7 @@ export function Search() {
 export default function MainContent({
   articles,
   onSelectArticle,
-}: {
-  articles: ArticleModel[];
-  onSelectArticle: (index: number) => void;
-}) {
+}: MainContentProps) {
 
   const [visibleArticles, setVisibleArticles] = React.useState<ArticleModel[]>(articles);
   const [activeTag, setActiveTag] = React.useState<string>('all');

src/blog/components/Profile.tsx

@@ -12,12 +12,11 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
 import { useUpload } from "../providers/Upload";
 import ImageUploadField from './ImageUploadField';
+import { ProfileProps } from '../types/props';
 
-interface ProfileProps {
-  onBack: () => void;
-}
-
-export default function Profile({ onBack }: ProfileProps) {
+export default function Profile({
+  onBack
+}: ProfileProps) {
   const { currentUser, loading, error, logout, updateProfile } = useAuth();
   const { uploadFile } = useUpload();
   const [formData, setFormData] = React.useState({

src/blog/components/Register.tsx

@@ -2,12 +2,11 @@ import * as React from 'react';
 import { Box, TextField, Button, Typography, IconButton, CircularProgress, Alert, } from '@mui/material';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useAuth } from '../providers/Author';
+import { RegisterProps } from '../types/props';
 
-interface RegisterProps {
-  onBack: () => void;
-}
-
-export default function Register({ onBack }: RegisterProps) {
+export default function Register({
+  onBack
+}: RegisterProps) {
   const { register, loading, error, currentUser } = useAuth();
   const [username, setUsername] = React.useState('');
   const [password1, setPassword1] = React.useState('');

src/blog/types/props.ts

@@ -6,13 +6,30 @@ export interface LatestProps {
   onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
 }
 
+export interface LoginProps {
+  onBack: () => void;
+  onRegister: () => void;
+}
+
+export interface MainContentProps {
+  articles: ArticleModel[];
+  onSelectArticle: (index: number) => void;
+}
+
+export interface ProfileProps {
+  onBack: () => void;
+}
+
+export interface RegisterProps {
+  onBack: () => void;
+}
+
 export interface ArticleViewProps {
   article: ArticleModel;
   onBack: () => void;
   open_editor: () => void;
 }
 
-
 export interface ArticleEditorProps {
   article?: ArticleModel | null;
   onBack: () => void;

src/blog/types/styles.ts

@@ -38,3 +38,40 @@ export const StyledTypography = styled(Typography)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
 });
+
+export const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));