116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
'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>
|
|
</>
|
|
);
|
|
} |