58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { HierarchySeriesItem } from '@/services/api/catalogService';
|
|
|
|
interface SeriesSelectorProps {
|
|
seriesList: HierarchySeriesItem[];
|
|
selectedSeriesId: string | null;
|
|
onSelectSeries: (seriesId: string | null) => void;
|
|
}
|
|
|
|
export const SeriesSelector: React.FC<SeriesSelectorProps> = ({
|
|
seriesList,
|
|
selectedSeriesId,
|
|
onSelectSeries,
|
|
}) => {
|
|
if (!seriesList || seriesList.length === 0) return null;
|
|
|
|
return (
|
|
<div className="w-full mb-8">
|
|
<h3 className="text-base font-bold text-gray-900 mb-4 tracking-tight">
|
|
Select Series
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-5 gap-3">
|
|
{/* All Series Pill */}
|
|
<button
|
|
onClick={() => onSelectSeries(null)}
|
|
className={`py-3.5 px-4 rounded-xl text-xs font-semibold transition-all duration-200 text-center ${
|
|
selectedSeriesId === null
|
|
? 'bg-gray-900 text-white shadow-sm font-bold'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
All Series
|
|
</button>
|
|
|
|
{/* Series List */}
|
|
{seriesList.map((series) => {
|
|
const isSelected = selectedSeriesId === series.series_id;
|
|
return (
|
|
<button
|
|
key={series.series_id}
|
|
onClick={() => onSelectSeries(series.series_id)}
|
|
className={`py-3.5 px-4 rounded-xl text-xs font-semibold transition-all duration-200 text-center truncate ${
|
|
isSelected
|
|
? 'bg-red-600 text-white shadow-md font-bold scale-[1.02]'
|
|
: 'bg-gray-100 text-gray-800 hover:bg-gray-200 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{series.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|