LabelsView.tsx
2.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import React from 'react';
import { LabelsList } from './LabelsList';
import { LabelCategoriesView } from './LabelCategoriesView';
import { LabelTypesView } from './LabelTypesView';
import { LabelTemplatesView } from './LabelTemplatesView';
import { MultipleOptionsView } from './MultipleOptionsView';
type Tab = 'Labels' | 'Label Categories' | 'Label Types' | 'Label Templates' | 'Multiple Options';
interface LabelsViewProps {
currentView?: string;
onViewChange?: (view: string) => void;
}
export function LabelsView({ currentView = 'Labels', onViewChange }: LabelsViewProps) {
const tabs: Tab[] = [
'Labels',
'Label Categories',
'Label Types',
'Label Templates',
'Multiple Options'
];
const handleTabClick = (tab: Tab) => {
if (onViewChange) {
onViewChange(tab);
}
};
return (
<div className="space-y-6">
{/* Tabs - underline spans full width */}
<div className="w-full border-b border-gray-200">
<div className="flex overflow-x-auto bg-white">
{tabs.map((tab) => (
<div
key={tab}
onClick={() => handleTabClick(tab)}
style={
currentView === tab
? { borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: '#2563eb' }
: undefined
}
className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap cursor-pointer transition-colors -mb-px ${
currentView === tab
? 'text-blue-600'
: 'border-b-2 border-b-transparent text-gray-600 hover:text-gray-800'
}`}
>
{tab}
</div>
))}
</div>
</div>
{/* Content */}
<div className="min-h-[400px]">
{currentView === 'Labels' && <LabelsList />}
{currentView === 'Label Categories' && <LabelCategoriesView />}
{currentView === 'Label Types' && <LabelTypesView />}
{currentView === 'Label Templates' && <LabelTemplatesView />}
{currentView === 'Multiple Options' && <MultipleOptionsView />}
{!['Labels', 'Label Categories', 'Label Types', 'Label Templates', 'Multiple Options'].includes(currentView) && (
<div className="flex items-center justify-center h-64 text-gray-400">
{currentView} content coming soon...
</div>
)}
</div>
</div>
);
}