Nils-Johan Gynther
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import MergePreviewForm from '../../admin/products/MergePreviewForm';
|
||
import AdminProductList from '../../admin/products/AdminProductList';
|
||
import ExpandableCreateProductSection from '../../admin/products/ExpandableCreateProductSection';
|
||
import ResetProductsButton from '../../admin/products/ResetProductsButton';
|
||
import DeletedProductsView from '../../admin/products/DeletedProductsView';
|
||
|
||
const subTabs = [
|
||
{ id: 'varor', label: '📦 Varor' },
|
||
{ id: 'skapa-merge', label: '➕ Skapa / Slå ihop' },
|
||
{ id: 'papperskorg', label: '🗑️ Papperskorg' },
|
||
] as const;
|
||
|
||
type SubTabId = typeof subTabs[number]['id'];
|
||
|
||
const tabStyle = (active: boolean): React.CSSProperties => ({
|
||
padding: '0.4rem 1rem',
|
||
border: 'none',
|
||
borderBottom: active ? '2.5px solid #333' : '2.5px solid transparent',
|
||
background: 'none',
|
||
cursor: 'pointer',
|
||
fontWeight: active ? 600 : 400,
|
||
color: active ? '#111' : '#666',
|
||
fontSize: '0.95rem',
|
||
transition: 'color 0.15s, border-color 0.15s',
|
||
});
|
||
|
||
export default function DatabsTab() {
|
||
const [activeSubTab, setActiveSubTab] = useState<SubTabId>('varor');
|
||
|
||
return (
|
||
<div>
|
||
{/* Undertabbar */}
|
||
<div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
|
||
{subTabs.map((tab) => (
|
||
<button
|
||
key={tab.id}
|
||
style={tabStyle(activeSubTab === tab.id)}
|
||
onClick={() => setActiveSubTab(tab.id)}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{activeSubTab === 'varor' && (
|
||
<div>
|
||
<p style={{ color: '#555', marginBottom: '1rem' }}>
|
||
Granska och standardisera produktnamn samt hantera kategorier.
|
||
</p>
|
||
<AdminProductList />
|
||
</div>
|
||
)}
|
||
|
||
{activeSubTab === 'skapa-merge' && (
|
||
<div>
|
||
<p style={{ color: '#555', marginBottom: '1rem' }}>
|
||
Skapa ny produkt, återställ produktdatabas eller slå ihop dubbletter.
|
||
</p>
|
||
<ExpandableCreateProductSection />
|
||
<ResetProductsButton />
|
||
<MergePreviewForm />
|
||
</div>
|
||
)}
|
||
|
||
{activeSubTab === 'papperskorg' && <DeletedProductsView />}
|
||
</div>
|
||
);
|
||
}
|