mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 13:51:13 -05:00
123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
import { ArrowUp, ArrowDown, Loader2 } from 'lucide-react';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface SortControlsProps<T extends string = string> {
|
|
/** Current sort field */
|
|
sortField: T;
|
|
|
|
/** Current sort direction */
|
|
sortDirection: 'asc' | 'desc';
|
|
|
|
/** Available sort fields with labels */
|
|
sortFields: Record<T, string>;
|
|
|
|
/** Handler for field change */
|
|
onFieldChange: (field: T) => void;
|
|
|
|
/** Handler for direction toggle */
|
|
onDirectionToggle: () => void;
|
|
|
|
/** Whether component is in mobile mode */
|
|
isMobile?: boolean;
|
|
|
|
/** Whether data is loading */
|
|
isLoading?: boolean;
|
|
|
|
/** Optional label for the sort selector */
|
|
label?: string;
|
|
}
|
|
|
|
/**
|
|
* Generic reusable sort controls component
|
|
*
|
|
* Provides consistent sorting UI across the application:
|
|
* - Field selector with custom labels
|
|
* - Direction toggle (asc/desc)
|
|
* - Mobile-responsive layout
|
|
* - Loading states
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <SortControls
|
|
* sortField={sortConfig.field}
|
|
* sortDirection={sortConfig.direction}
|
|
* sortFields={{
|
|
* created_at: 'Date Created',
|
|
* name: 'Name',
|
|
* status: 'Status'
|
|
* }}
|
|
* onFieldChange={(field) => setSortConfig({ ...sortConfig, field })}
|
|
* onDirectionToggle={() => setSortConfig({
|
|
* ...sortConfig,
|
|
* direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
|
|
* })}
|
|
* isMobile={isMobile}
|
|
* />
|
|
* ```
|
|
*/
|
|
export function SortControls<T extends string = string>({
|
|
sortField,
|
|
sortDirection,
|
|
sortFields,
|
|
onFieldChange,
|
|
onDirectionToggle,
|
|
isMobile = false,
|
|
isLoading = false,
|
|
label = 'Sort By',
|
|
}: SortControlsProps<T>) {
|
|
const DirectionIcon = sortDirection === 'asc' ? ArrowUp : ArrowDown;
|
|
|
|
return (
|
|
<div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-end'}`}>
|
|
<div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[160px]'}`}>
|
|
<Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'} flex items-center gap-2`}>
|
|
{label}
|
|
{isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
|
|
</Label>
|
|
<Select
|
|
value={sortField}
|
|
onValueChange={onFieldChange}
|
|
disabled={isLoading}
|
|
>
|
|
<SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
|
|
<SelectValue>
|
|
{sortFields[sortField]}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(sortFields).map(([field, label]) => (
|
|
<SelectItem key={field} value={field}>
|
|
{label as string}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className={isMobile ? "" : "pb-[2px]"}>
|
|
<Button
|
|
variant="outline"
|
|
size={isMobile ? "default" : "icon"}
|
|
onClick={onDirectionToggle}
|
|
disabled={isLoading}
|
|
className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : 'h-10 w-10'}`}
|
|
title={sortDirection === 'asc' ? 'Ascending' : 'Descending'}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<DirectionIcon className="w-4 h-4" />
|
|
)}
|
|
{isMobile && (
|
|
<span className="capitalize">
|
|
{isLoading ? 'Loading...' : `${sortDirection}ending`}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|