From 28fc7a075cb5da7aa066a2aad5559c5426248dfc Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Mon, 14 Apr 2025 00:25:32 -0700
Subject: initial frontend site

---
 site/src/components/NewsFeed.tsx | 136 +++++++++++++++++++++++++++++++++++++++
 site/src/components/TitleBar.tsx | 119 ++++++++++++++++++++++++++++++++++
 2 files changed, 255 insertions(+)
 create mode 100644 site/src/components/NewsFeed.tsx
 create mode 100644 site/src/components/TitleBar.tsx

(limited to 'site/src/components')

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
-- 
cgit v1.2.3