Add new pages and improve blog content display functionality

Implement new routes for articles, categories, and individual articles. Update the UI to display articles with improved content rendering, including safe HTML and media embeds. Refactor storage to use a database and add image upload capabilities. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: b96b221e-0ed6-418f-80df-e4670bf5ba4b Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/cftwqyT Replit-Helium-Checkpoint-Created: true
2026-02-28 16:38:38 +00:00
parent bf2021ba3d
commit 4a7639b15d
30 changed files with 1231 additions and 69 deletions
@@ -0,0 +1,77 @@
+import { Link, useLocation } from "wouter";
+import { Menu, X, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import folxLogo from "@assets/webf_1772296176957.jpg";
+
+const navItems = [
+  { label: "Start", href: "/" },
+  { label: "News", href: "/category/News" },
+  { label: "Star-News", href: "/category/Star-News" },
+];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [location] = useLocation();
+
+  return (
+    <header className="sticky top-0 z-50 bg-card/95 backdrop-blur-md border-b border-card-border" data-testid="header">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between gap-4 h-16">
+          <Link href="/">
+            <div className="flex items-center gap-2 cursor-pointer" data-testid="link-logo">
+              <div className="h-10 w-auto flex items-center">
+                <img src={folxLogo} alt="Folx TV" className="h-10 w-auto object-contain rounded-sm" />
+              </div>
+            </div>
+          </Link>
+
+          <nav className="hidden md:flex items-center gap-1" data-testid="nav-desktop">
+            {navItems.map((item) => (
+              <Link key={item.href} href={item.href}>
+                <Button
+                  variant={location === item.href ? "default" : "ghost"}
+                  size="sm"
+                  data-testid={`link-nav-${item.label.toLowerCase().replace(/\s/g, "-")}`}
+                >
+                  {item.label}
+                </Button>
+              </Link>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              onClick={() => setMobileOpen(!mobileOpen)}
+              data-testid="button-mobile-menu"
+            >
+              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {mobileOpen && (
+        <div className="md:hidden border-t border-card-border bg-card" data-testid="nav-mobile">
+          <nav className="flex flex-col p-4 gap-1">
+            {navItems.map((item) => (
+              <Link key={item.href} href={item.href}>
+                <Button
+                  variant={location === item.href ? "default" : "ghost"}
+                  className="w-full justify-start"
+                  onClick={() => setMobileOpen(false)}
+                  data-testid={`link-mobile-${item.label.toLowerCase().replace(/\s/g, "-")}`}
+                >
+                  {item.label}
+                </Button>
+              </Link>
+            ))}
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}