revert a5628019f8

revert revert b1dbd85346 revert richtext replacement
2025-09-21 14:54:39 +02:00
parent a5628019f8
commit 58bb7f8229
28 changed files with 3337 additions and 10558 deletions
--- a/frontend/src/components/layout/ImportLayoutContent.tsx
+++ b/frontend/src/components/layout/ImportLayoutContent.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import { ReactNode } from 'react';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+
+interface ImportTab {
+  id: string;
+  label: string;
+  href: string;
+  description: string;
+}
+
+interface ImportLayoutContentProps {
+  children: ReactNode;
+  title: string;
+  description?: string;
+}
+
+const importTabs: ImportTab[] = [
+  {
+    id: 'manual',
+    label: 'Manual Entry',
+    href: '/add-story',
+    description: 'Add a story by manually entering details'
+  },
+  {
+    id: 'url',
+    label: 'Import from URL',
+    href: '/import',
+    description: 'Import a single story from a website'
+  },
+  {
+    id: 'epub',
+    label: 'Import EPUB',
+    href: '/import/epub',
+    description: 'Import a story from an EPUB file'
+  },
+  {
+    id: 'bulk',
+    label: 'Bulk Import',
+    href: '/import/bulk',
+    description: 'Import multiple stories from URLs'
+  }
+];
+
+export default function ImportLayoutContent({
+  children,
+  title,
+  description
+}: ImportLayoutContentProps) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Determine active tab based on current path
+  const activeTab = importTabs.find(tab => {
+    if (tab.href === pathname) return true;
+    if (tab.href === '/import' && pathname === '/import') return true;
+    return false;
+  });
+
+  return (
+    <>
+      <div className="mb-8">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+          <div>
+            <h1 className="text-3xl font-bold theme-header">{title}</h1>
+            {description && (
+              <p className="theme-text mt-2">{description}</p>
+            )}
+          </div>
+          <Link
+            href="/library"
+            className="inline-flex items-center px-4 py-2 text-sm font-medium theme-button theme-border border rounded-lg hover:theme-button-hover transition-colors"
+          >
+            ← Back to Library
+          </Link>
+        </div>
+
+        {/* Import Method Tabs */}
+        <div className="border-b theme-border">
+          <nav className="-mb-px flex space-x-8 overflow-x-auto">
+            {importTabs.map((tab) => {
+              const isActive = activeTab?.id === tab.id;
+              return (
+                <Link
+                  key={tab.id}
+                  href={tab.href}
+                  className={`
+                    group inline-flex items-center px-1 py-4 border-b-2 font-medium text-sm whitespace-nowrap
+                    ${isActive
+                      ? 'border-theme-accent text-theme-accent'
+                      : 'border-transparent theme-text hover:text-theme-header hover:border-gray-300'
+                    }
+                  `}
+                >
+                  <span className="flex flex-col">
+                    <span>{tab.label}</span>
+                    <span className="text-xs theme-text mt-1 group-hover:text-theme-header">
+                      {tab.description}
+                    </span>
+                  </span>
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1">
+        {children}
+      </div>
+    </>
+  );
+}