Major changes

2026-01-24 16:52:19 -06:00
parent 011e40119d
commit 7181791734
46 changed files with 8371 additions and 127 deletions
@@ -0,0 +1,131 @@
+'use client';
+
+import { use, useState } from 'react';
+import Link from 'next/link';
+import { ArrowLeft, ExternalLink, Pencil, Clock } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { PageTransition } from '@/components/page-transition';
+import { ArticleStream } from '@/components/article-stream';
+import { HistoryModal } from '@/components/history-modal';
+
+export default function ArticlePage({
+  params,
+}: {
+  params: Promise<{ title: string }>;
+}) {
+  const { title } = use(params);
+  const decodedTitle = decodeURIComponent(title).replace(/_/g, ' ');
+  const wikipediaUrl = `https://en.wikipedia.org/wiki/${title}`;
+  const slug = title.replace(/%20/g, '_').replace(/ /g, '_');
+
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+
+  return (
+    <main className="min-h-screen bg-background">
+      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border">
+        <div className="max-w-5xl mx-auto px-4 lg:px-8 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="w-5 h-5" />
+            </Link>
+            <Link href="/" className="text-xl font-bold text-foreground">
+              Wiki<span className="text-blue-500">+</span>
+            </Link>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-2"
+              onClick={() => setIsHistoryOpen(true)}
+              title="View History"
+            >
+              <Clock className="w-4 h-4" />
+              <span className="hidden sm:inline">History</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-2"
+              onClick={() => setIsEditMode(!isEditMode)}
+              title={isEditMode ? 'Cancel Edit' : 'Edit Article'}
+            >
+              <Pencil className="w-4 h-4" />
+              <span className="hidden sm:inline">{isEditMode ? 'Cancel' : 'Edit'}</span>
+            </Button>
+            <a
+              href={wikipediaUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-foreground transition-colors p-2"
+              title="View on Wikipedia"
+            >
+              <ExternalLink className="w-4 h-4" />
+            </a>
+            <PageTransition href="/random">
+              <Button variant="ghost" size="sm" className="gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="w-4 h-4"
+                >
+                  <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                  <path d="M3 3v5h5" />
+                  <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                  <path d="M16 16h5v5" />
+                </svg>
+                Random
+              </Button>
+            </PageTransition>
+          </div>
+        </div>
+      </header>
+
+      <article className="max-w-5xl mx-auto px-4 lg:px-8 py-8">
+        <h1 className="text-3xl sm:text-4xl font-bold text-foreground mb-8 leading-tight lg:pl-72">
+          {decodedTitle}
+        </h1>
+
+        <ArticleStream
+          title={title}
+          slug={slug}
+          decodedTitle={decodedTitle}
+          isEditMode={isEditMode}
+          onEditModeChange={setIsEditMode}
+        />
+      </article>
+
+      <footer className="border-t border-border mt-12">
+        <div className="max-w-5xl mx-auto px-4 lg:px-8 py-6 flex items-center justify-between lg:pl-72">
+          <p className="text-sm text-muted-foreground">
+            AI-generated from Wikipedia
+          </p>
+          <a
+            href={wikipediaUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-blue-500 hover:underline inline-flex items-center gap-1"
+          >
+            View original
+            <ExternalLink className="w-3 h-3" />
+          </a>
+        </div>
+      </footer>
+
+      <HistoryModal
+        slug={slug}
+        isOpen={isHistoryOpen}
+        onClose={() => setIsHistoryOpen(false)}
+      />
+    </main>
+  );
+}