Added thumbnails to NewsEntry

src/components/NewsSection/NewsEntry/index.tsx

@@ -1,31 +1,38 @@
-import { UnknownUserIcon } from "@app/assets/Icons";
 import styles from "./NewsEntry.module.css";
 import NewsBadge from "../NewsBadge";
+import { ArticleData } from "@app/hooks/useNews";
+import { Link } from "react-router-dom";
+import { Img } from "react-image";
+import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 
 interface Props {
- title: string;
- postBadge: string;
- author: string;
+ article: ArticleData;
 }
 
-const NewsEntry: React.FC<Props> = ({ title, postBadge, author }: Props) => {
- return <div className={styles.container}>
- <img className={styles.thumbnail} />
- <div className={styles.main}>
- <div className={styles.top_container}>
- <div className={styles.top}>
- <NewsBadge>{postBadge}</NewsBadge>
+const NewsEntry: React.FC<Props> = ({ article }: Props) => {
+ return <Link to={`news/${article.md}`} key={article.md} style={{ width: "100%" }}>
+ <div className={styles.container}>
+ <img className={styles.thumbnail} src={`https://raw.githubusercontent.com/YARC-Official/News/master/images/thumbs/${article.thumb}`} />
+ <div className={styles.main}>
+ <div className={styles.top_container}>
+ <div className={styles.top}>
+ <NewsBadge>{article.type}</NewsBadge>
+ </div>
+ {article.title}
  </div>
- {title}
- </div>
- <div className={styles.bottom_container}>
- <UnknownUserIcon />
- <div>
- By: <span className={styles.author}>{author}</span>
+ <div className={styles.bottom_container}>
+ <Img
+ height={24}
+ alt={`${article.author}'s avatar`}
+ src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${article.avatar}`, UnknownUserIcon]}
+ />
+ <div>
+ By: <span className={styles.author}>{article.author}</span>
+ </div>
  </div>
  </div>
  </div>
- </div>;
+ </Link>;
 };
 
 export default NewsEntry;

src/components/NewsSection/index.tsx

@@ -2,7 +2,6 @@ import { NewsIcon } from "@app/assets/Icons";
 import styles from "./NewsSection.module.css";
 import NewsEntry from "./NewsEntry";
 import { useNews } from "@app/hooks/useNews";
-import { Link } from "react-router-dom";
 
 const NewsSection: React.FC = () => {
  const { data, error, isLoading, isSuccess } = useNews();
@@ -11,19 +10,15 @@ const NewsSection: React.FC = () => {
 
  if (error) return `An error has occurred: ${error}`;
 
- if(isSuccess) {
+ if (isSuccess) {
  return <div className={styles.container}>
  <div className={styles.header_container}>
  <div className={styles.header_text}>
  <NewsIcon width={15} height={15} /> NEWS
  </div>
  </div>
  {
- Array.from(data.articles).map(article =>
- <Link to={`news/${article.md}`} key={article.md} style={{width: "100%"}}>
- <NewsEntry title={article.title} postBadge={article.type} author={article.author} key={article.md} />
- </Link>
- )
+ Array.from(data.articles).map(article => <NewsEntry article={article} key={article.md} />)
  }
  </div>;
  }

src/routes/NewsPage/NewsPage.module.css

@@ -17,10 +17,10 @@
 .content {
  display: flex;
  flex-direction: column;
- gap: 25px;
+ gap: 5px;
  padding: 25px 50px 50px 50px;
- color: #7A7A7A;
- --primary: #7A7A7A;
+ color: #333;
+ --primary: #333;
 }
 
 .content a {

src/routes/NewsPage/index.tsx

@@ -11,32 +11,28 @@ import { Img } from "react-image";
 import UnknownUserIcon from "@app/assets/Icons/UnknownUser.svg";
 
 function NewsPage() {
-
  const { md } = useParams();
- if(!md) return <></>;
+ if (!md) return <></>;
 
  const { data, error, isLoading, isSuccess } = useNewsArticle(md);
 
  if (isLoading) return "Loading..";
 
  if (error) return `An error has occurred: ${error}`;
 
- if(isSuccess) {
-
+ if (isSuccess) {
  const { data: articleData, content } = matter(data);
 
- return (<>
-
- <div className={styles.header} style={{"--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})`} as CSSProperties}>
+ return <>
+ <div className={styles.header} style={{ "--bannerURL": `url(https://raw.githubusercontent.com/YARC-Official/News/master/images/banners/${articleData.banner})` } as CSSProperties}>
  <NewsBadge>{articleData.type}</NewsBadge>
  <div className={styles.title}>{articleData.title}</div>
  </div>
  <div className={styles.content}>
  <div className={styles.info}>
-
  <div className={styles.author}>
  <div className={styles.avatar}>
- <Img 
+ <Img
  height={48}
  alt={`${articleData.author}'s avatar`}
  src={[`https://raw.githubusercontent.com/YARC-Official/News/master/images/avatars/${articleData.avatar}`, UnknownUserIcon]}
@@ -47,16 +43,14 @@ function NewsPage() {
  <div className={styles.authorRole}>{articleData.role}</div>
  </div>
  </div>
-
  {/* <div className={styles.releaseDate}>
  <TimeIcon />
  16 minutes ago
  </div> */}
  </div>
-
- <SanitizedHTML dirtyHTML={marked.parse(content)}/>
+ <SanitizedHTML dirtyHTML={marked.parse(content)} />
  </div>
- </>);
+ </>;
  }
 }