diff options
Diffstat (limited to 'site/src/pages/Homepage.tsx')
| -rw-r--r-- | site/src/pages/Homepage.tsx | 40 |
1 files changed, 30 insertions, 10 deletions
diff --git a/site/src/pages/Homepage.tsx b/site/src/pages/Homepage.tsx index 7183ebc..6cee80a 100644 --- a/site/src/pages/Homepage.tsx +++ b/site/src/pages/Homepage.tsx @@ -1,8 +1,10 @@ import { useEffect, useState } from "react"; import { NewsData, NewsFeed } from "../components/NewsFeed"; -import { useParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { getGameTitle } from "../utils.ts"; import TitleBar from "../components/TitleBar"; +import { GameNotes } from "../components/GameNotes"; + interface ArcadeNewsAPIData { fetch_time: number; @@ -11,6 +13,9 @@ interface ArcadeNewsAPIData { export default function Home() { const { gameId } = useParams<{ gameId?: string }>(); + const [searchParams] = useSearchParams(); + const isMoe = searchParams.has("moe"); + const [newsFeedData, setNewsFeedData] = useState<ArcadeNewsAPIData | null>(null); const [loading, setLoading] = useState<boolean>(true); @@ -48,19 +53,34 @@ export default function Home() { return ( <> <TitleBar /> - <div className="bg-gray-950 min-h-screen py-6"> + <div className={`${isMoe ? "bg-pink-100 text-pink-900 font-[Zen_Maru_Gothic]" : "bg-gray-950"} min-h-screen py-6`}> <div className="max-w-[600px] mx-auto px-4"> - {gameId && ( - <h1 className="text-2xl font-bold text-center text-white mb-6"> - {getGameTitle(gameId)} News - </h1> + {gameId ? ( + <div className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}> + <h1 className="text-2xl font-bold mb-2"> + {getGameTitle(gameId)} News + </h1> + {GameNotes(isMoe)[gameId] && <div className="text-left">{GameNotes(isMoe)[gameId]}</div>} + </div> + ) : ( + <div className={`${isMoe ? "bg-pink-200 text-pink-900" : "bg-gray-800 text-white"} rounded-lg p-6 text-center shadow-lg`}> + <h1 className="text-2xl font-bold">Welcome to 573-UPDATES</h1> + <img src="/xiatian.webp" className="w-48 mx-auto mb-2 object-contain rounded-2xl" /> + <p>News and Information for various arcade games is aggregated here!</p> + <p className="mt-2"> + Please see the{" "} + <a href="https://github.com/pinapelz/573-updates" className="text-blue-500 hover:underline"> + GitHub + </a>{" "} + for API information + </p> + </div> )} <NewsFeed newsItems={newsFeedData.news_posts} /> </div> - <footer className="mt-8 text-center text-gray-500 text-sm"> - <p> - Last updated: {new Date(newsFeedData.fetch_time * 1000).toLocaleString()} - </p> + <footer className={`mt-8 text-center text-sm ${isMoe ? "text-pink-800" : "text-gray-400"}`}> + <p>Last updated: {new Date(newsFeedData.fetch_time * 1000).toLocaleString()}</p> + <p><a href="https://moekyun.me/" className={`${isMoe ? "text-pink-600 hover:text-pink-400" : "hover:underline"}`}>a moekyun service</a></p> </footer> </div> </> |