aboutsummaryrefslogtreecommitdiffstats
path: root/site/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'site/src/components')
-rw-r--r--site/src/components/NewsFeed.tsx136
-rw-r--r--site/src/components/TitleBar.tsx119
2 files changed, 255 insertions, 0 deletions
diff --git a/site/src/components/NewsFeed.tsx b/site/src/components/NewsFeed.tsx
new file mode 100644
index 0000000..f030200
--- /dev/null
+++ b/site/src/components/NewsFeed.tsx
@@ -0,0 +1,136 @@
+
+export interface NewsData {
+ date: string;
+ identifier: string;
+ type: string | null;
+ timestamp: number;
+ headline: string | null;
+ content: string;
+ url: string | null;
+ images: Array<{
+ image: string;
+ link: string | null;
+ }>;
+}
+
+interface NewsFeedProps {
+ newsItems: NewsData[];
+}
+
+export const NewsFeed: React.FC<NewsFeedProps> = ({ newsItems }) => {
+ return (
+ <div className="max-w-[600px] w-full mx-auto py-8 space-y-4">
+ {newsItems.map((news) => {
+ const formattedDate = new Date(news.timestamp * 1000).toLocaleDateString("ja-JP", {
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ });
+
+ const gameId = news.identifier;
+
+ return (
+ <div
+ key={news.identifier + "-" + news.timestamp}
+ className="bg-gray-900 border border-gray-800 rounded-lg shadow-lg overflow-hidden"
+ >
+ {/* Header (Game Icon + Info) */}
+ <div className="flex items-center p-3">
+ <div className="flex items-center space-x-3">
+ {/* Game Icon */}
+ <div className="bg-purple-700 rounded-full h-8 w-8 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+ {gameId.substring(0, 1)}
+ </div>
+
+ <div className="flex flex-col leading-tight">
+ <span className="text-sm font-semibold text-gray-200">
+ {getGameName(news.identifier)}
+ </span>
+ <span className="text-xs text-gray-400">
+ {formattedDate}
+ </span>
+ {/* Display News Type */}
+ {news.type && (
+ <span className="text-xs text-gray-500 italic bold">
+ {news.type}
+ </span>
+ )}
+ </div>
+ </div>
+ </div>
+
+ {/* Content Area */}
+ <div className="px-3 pt-1 pb-3">
+ {/* Headline */}
+ {news.headline && (
+ <p className="font-semibold text-white text-sm mb-2">
+ {news.headline}
+ </p>
+ )}
+
+ {/* Content */}
+ <p className="text-sm text-gray-200 whitespace-pre-line mb-2">
+ {news.content}
+ </p>
+ </div>
+
+ {/* Post Image(s) */}
+ <div className="w-full">
+ {news.images.map((img, i) => (
+ img.link ? (
+ <a
+ key={i}
+ href={img.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="block hover:opacity-75"
+ >
+ <img
+ src={img.image}
+ alt="news visual"
+ className="w-full object-cover py-2"
+ />
+ </a>
+ ) : (
+ <div key={i} className="block">
+ <img
+ src={img.image}
+ alt="news visual"
+ className="w-full object-cover py-2"
+ />
+ </div>
+ )
+ ))}
+ </div>
+
+ {/* Footer with Read More Link */}
+ {news.url && (
+ <div className="px-3 py-2 bg-gray-800 text-center">
+ <a
+ href={news.url}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="text-gray-300 text-sm hover:text-white inline-flex items-center font-bold underline"
+ >
+ READ MORE
+ </a>
+ </div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ );
+};
+function getGameName(identifier: string): string | null {
+ if(identifier.startsWith("SOUND_VOLTEX")){
+ return "SOUND VOLTEX";
+ }
+ else if(identifier.startsWith("IIDX")){
+ return "beatmania IIDX";
+ }
+ else if(identifier.startsWith("CHUNITHM_JP")){
+ return "CHUNITHM (JAPAN)";
+ }
+ return null;
+}
diff --git a/site/src/components/TitleBar.tsx b/site/src/components/TitleBar.tsx
new file mode 100644
index 0000000..bf79191
--- /dev/null
+++ b/site/src/components/TitleBar.tsx
@@ -0,0 +1,119 @@
+import { Link } from 'react-router-dom';
+import { useState, useEffect, useRef } from 'react';
+
+interface GameCategory {
+ name: string;
+ games: { id: string; title: string }[];
+}
+
+const TitleBar: React.FC = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const dropdownRef = useRef<HTMLDivElement>(null);
+
+ const gameCategories: GameCategory[] = [
+ {
+ name: "KONAMI",
+ games: [
+ { id: "sdvx", title: "SOUND VOLTEX" },
+ { id: "iidx", title: "beatmania IIDX" },
+ ]
+ },
+ {
+ name: "SEGA",
+ games: [
+ { id: "chunithm_jp", title: "CHUNITHM JPN" },
+ ]
+ }
+ ];
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setDropdownOpen(false);
+ }
+ };
+
+ if (dropdownOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [dropdownOpen]);
+
+ return (
+ <div className="bg-gray-900 border-b border-gray-800 py-4 px-6">
+ <div className="max-w-[800px] mx-auto">
+ <div className="flex flex-col sm:flex-row justify-between items-center">
+ <div className="flex items-center space-x-3 mb-3 sm:mb-0">
+ <img
+ src="/rasis.webp"
+ alt="573 Updates Logo"
+ className="w-8 h-8"
+ />
+ <div className="w-8 h-8 bg-red-700 rounded-md flex items-center justify-center">
+ <span className="text-white font-bold">573</span>
+ </div>
+
+ {/* Site Title */}
+ <Link to="/" className="text-xl font-bold text-white">
+ UPDATES
+ </Link>
+ </div>
+
+ {/* Navigation Section */}
+ <div className="flex items-center space-x-4">
+ <Link
+ to="/"
+ className="text-gray-300 hover:text-white font-medium"
+ >
+ All Games
+ </Link>
+
+ {/* Dropdown Menu */}
+ <div className="relative" ref={dropdownRef}>
+ <button
+ className="text-gray-300 hover:text-white font-medium flex items-center"
+ onClick={() => setDropdownOpen(!dropdownOpen)}
+ >
+ Game Select
+ <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+ </svg>
+ </button>
+
+ {dropdownOpen && (
+ <div className="absolute right-0 mt-2 w-64 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10">
+ <div className="py-1 max-h-[70vh] overflow-y-auto">
+ {gameCategories.map((category, index) => (
+ <div key={index} className="px-3 py-2">
+ <div className="text-sm font-semibold text-gray-400 mb-1 border-b border-gray-700 pb-1">
+ {category.name}
+ </div>
+ <div className="space-y-1">
+ {category.games.map((game) => (
+ <Link
+ key={game.id}
+ to={`/game/${game.id}`}
+ className="block text-gray-300 hover:bg-gray-700 hover:text-white px-2 py-1 text-sm rounded"
+ onClick={() => setDropdownOpen(false)}
+ >
+ {game.title}
+ </Link>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default TitleBar; \ No newline at end of file
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage