diff --git a/src/components/LaunchPage/index.tsx b/src/components/LaunchPage/index.tsx index 2d8c125..4b0de46 100644 --- a/src/components/LaunchPage/index.tsx +++ b/src/components/LaunchPage/index.tsx @@ -8,6 +8,7 @@ import { calculatePayloadPercentage } from "@app/utils/Download/payload"; import { useDialogManager } from "@app/dialogs/DialogProvider"; import TooltipWrapper from "../TooltipWrapper"; import { intlFormatDistance } from "date-fns"; +import NewsSection from "../NewsSection"; const INITIAL_RELEASE_DATE = new Date("2023-03-09T05:00:00.000Z"); @@ -67,9 +68,7 @@ const LaunchPage: React.FC = ({ version, releaseTag, playName, descriptio
-
- Don't eat the YARG gems... -
+
diff --git a/src/components/NewsSection/NewsEntry/index.tsx b/src/components/NewsSection/NewsEntry/index.tsx index e9d7a01..2be6023 100644 --- a/src/components/NewsSection/NewsEntry/index.tsx +++ b/src/components/NewsSection/NewsEntry/index.tsx @@ -12,7 +12,7 @@ interface Props { } const NewsEntry: React.FC = ({ article }: Props) => { - return + return
diff --git a/src/components/NewsSection/index.tsx b/src/components/NewsSection/index.tsx index 00dd015..421e0b2 100644 --- a/src/components/NewsSection/index.tsx +++ b/src/components/NewsSection/index.tsx @@ -4,9 +4,14 @@ import NewsEntry from "./NewsEntry"; import { useNews } from "@app/hooks/useNews"; import { useState } from "react"; -const NewsSection: React.FC = () => { +interface Props { + categoryFilter?: string + startingEntries?: number +} + +const NewsSection: React.FC = ({ categoryFilter, startingEntries }: Props) => { const { data, error, isLoading, isSuccess } = useNews(); - const [displayCount, setDisplayCount] = useState(4); + const [displayCount, setDisplayCount] = useState(startingEntries ? startingEntries : 4); if (isLoading) return "Loading.."; @@ -20,7 +25,11 @@ const NewsSection: React.FC = () => {
{ - Array.from(data.articles.slice(0, displayCount)).map(article => ) + Array.from(data.articles).filter(i => { + // Filter out everything that doesn't meet the filter + if (!categoryFilter) return true; + return i.category === categoryFilter; + }).slice(0, displayCount).map(article => ) }
setDisplayCount(displayCount + 4)}>Load More...
; diff --git a/src/hooks/useNews.ts b/src/hooks/useNews.ts index 5778a89..1defd0b 100644 --- a/src/hooks/useNews.ts +++ b/src/hooks/useNews.ts @@ -7,7 +7,8 @@ export interface ArticleData { thumb: string, author: string, avatar: string, - release: string + release: string, + category: string } export interface NewsData { diff --git a/src/routes/NewsPage/NewsPage.module.css b/src/routes/NewsPage/NewsPage.module.css index ae0e788..89d29fa 100644 --- a/src/routes/NewsPage/NewsPage.module.css +++ b/src/routes/NewsPage/NewsPage.module.css @@ -23,6 +23,8 @@ font-weight: 600; line-height: normal; text-transform: uppercase; + + cursor: pointer; } .header_info { diff --git a/src/routes/NewsPage/index.tsx b/src/routes/NewsPage/index.tsx index 7c9647e..56d08ea 100644 --- a/src/routes/NewsPage/index.tsx +++ b/src/routes/NewsPage/index.tsx @@ -1,5 +1,5 @@ import { useNewsArticle } from "@app/hooks/useNewsArticle"; -import { Link, useParams } from "react-router-dom"; +import { Link, useNavigate, useParams } from "react-router-dom"; import matter from "gray-matter"; import { marked } from "marked"; import SanitizedHTML from "@app/components/SanitizedHTML"; @@ -23,6 +23,7 @@ function NewsPage() { if (isSuccess) { const { data: articleData, content } = matter(data); + const navigate = useNavigate(); let videoElem = <>; if ("video" in articleData) { @@ -37,10 +38,10 @@ function NewsPage() { return <>
- +
navigate(-1)} className={styles.header_back}> RETURN - +
{articleData.title}
diff --git a/src/routes/Setlist/index.tsx b/src/routes/Setlist/index.tsx index 8d74249..b84c2bc 100644 --- a/src/routes/Setlist/index.tsx +++ b/src/routes/Setlist/index.tsx @@ -12,6 +12,7 @@ import TooltipWrapper from "@app/components/TooltipWrapper"; import { calculatePayloadPercentage } from "@app/utils/Download/payload"; import { useDialogManager } from "@app/dialogs/DialogProvider"; import { intlFormatDistance } from "date-fns"; +import NewsSection from "@app/components/NewsSection"; interface Props { setlistId: SetlistID @@ -54,12 +55,15 @@ const SetlistPage: React.FC = ({ setlistId }: Props) => { return <>
- - {setlistData.songs.map(i => - - )} - +
+ + {setlistData.songs.map(i => + + )} + + +
diff --git a/src/routes/Setlist/setlist.module.css b/src/routes/Setlist/setlist.module.css index 7dc2bde..ec65a19 100644 --- a/src/routes/Setlist/setlist.module.css +++ b/src/routes/Setlist/setlist.module.css @@ -22,6 +22,14 @@ background: var(--white-background); } +.content { + flex: 1 0 0; + + display: flex; + flex-direction: column; + gap: 50px; +} + .sidebar { display: flex; width: 300px;