128 lines
3.4 KiB
TypeScript
128 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname, useSearchParams } from 'next/navigation';
|
|
import AppLayout from './AppLayout';
|
|
|
|
interface ImportTab {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
description: string;
|
|
}
|
|
|
|
interface ImportLayoutProps {
|
|
children: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
const importTabs: ImportTab[] = [
|
|
{
|
|
id: 'manual',
|
|
label: 'Manual Entry',
|
|
href: '/import',
|
|
description: 'Add a story by manually entering details'
|
|
},
|
|
{
|
|
id: 'url',
|
|
label: 'Import from URL',
|
|
href: '/import?mode=url',
|
|
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 a list of URLs'
|
|
}
|
|
];
|
|
|
|
export default function ImportLayout({ children, title, description }: ImportLayoutProps) {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const mode = searchParams.get('mode');
|
|
|
|
// Determine which tab is active
|
|
const getActiveTab = () => {
|
|
if (pathname === '/import') {
|
|
return mode === 'url' ? 'url' : 'manual';
|
|
} else if (pathname === '/import/epub') {
|
|
return 'epub';
|
|
} else if (pathname === '/import/bulk') {
|
|
return 'bulk';
|
|
}
|
|
return 'manual';
|
|
};
|
|
|
|
const activeTab = getActiveTab();
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
{/* Header */}
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold theme-header">{title}</h1>
|
|
{description && (
|
|
<p className="theme-text mt-2 text-lg">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="theme-card theme-shadow rounded-lg overflow-hidden">
|
|
{/* Tab Headers */}
|
|
<div className="flex border-b theme-border overflow-x-auto">
|
|
{importTabs.map((tab) => (
|
|
<Link
|
|
key={tab.id}
|
|
href={tab.href}
|
|
className={`flex-1 min-w-0 px-4 py-3 text-sm font-medium text-center transition-colors whitespace-nowrap ${
|
|
activeTab === tab.id
|
|
? 'theme-accent-bg text-white border-b-2 border-transparent'
|
|
: 'theme-text hover:theme-accent-light hover:theme-accent-text'
|
|
}`}
|
|
>
|
|
<div className="truncate">
|
|
{tab.label}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Descriptions */}
|
|
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-800/50">
|
|
<div className="flex items-center justify-center">
|
|
<p className="text-sm theme-text text-center">
|
|
{importTabs.find(tab => tab.id === activeTab)?.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
<div className="p-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="flex justify-center">
|
|
<Link
|
|
href="/library"
|
|
className="theme-text hover:theme-accent transition-colors text-sm"
|
|
>
|
|
← Back to Library
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |