b2a6108eeb
Removes the last react-refresh disables by splitting exports instead: - contexts/language.ts: Language/Translations types + LanguageContext + useTranslation/useT (LanguageProvider stays a component-only file); 12 importers repointed. - lib/sortOptions.ts: calculatePopularity + calculateDistance (out of SortDropdown) - lib/trustFilter.ts: TrustFilterLevel + filterByTrustLevel (out of TrustFilter) - EventCountdown: deleted the unused useEventStatus hook - NewsletterPage: dropped the NEWSLETTER_ISSUES re-export shim - AGENTS.md updated (lint stays clean with no blanket disables) Gate: 101 tests, 0 errors/warnings, boot smoke green.
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { ArrowUpDown, Clock, TrendingUp, MapPin, Zap, Shield } from 'lucide-react';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type SortOption =
|
|
| 'recent'
|
|
| 'trust'
|
|
| 'proximity'
|
|
| 'popular'
|
|
| 'zaps';
|
|
|
|
interface SortDropdownProps {
|
|
value: SortOption;
|
|
onChange: (value: SortOption) => void;
|
|
className?: string;
|
|
showProximity?: boolean; // Only show if geolocation available
|
|
contentType?: 'spots' | 'events' | 'coaches' | 'generic';
|
|
}
|
|
|
|
const SORT_OPTIONS = {
|
|
recent: {
|
|
label: 'Most Recent',
|
|
icon: Clock,
|
|
description: 'Newest first',
|
|
},
|
|
trust: {
|
|
label: 'Highest Trust',
|
|
icon: Shield,
|
|
description: 'Most trusted creators',
|
|
},
|
|
proximity: {
|
|
label: 'Closest to Me',
|
|
icon: MapPin,
|
|
description: 'Nearest locations',
|
|
},
|
|
popular: {
|
|
label: 'Most Popular',
|
|
icon: TrendingUp,
|
|
description: 'Most comments/reactions',
|
|
},
|
|
zaps: {
|
|
label: 'Most Zapped',
|
|
icon: Zap,
|
|
description: 'Highest value received',
|
|
},
|
|
};
|
|
|
|
export function SortDropdown({
|
|
value,
|
|
onChange,
|
|
className,
|
|
showProximity = false,
|
|
}: SortDropdownProps) {
|
|
const selectedOption = SORT_OPTIONS[value];
|
|
const Icon = selectedOption.icon;
|
|
|
|
// Determine which sort options to show based on content type
|
|
const availableOptions: SortOption[] = ['recent', 'trust'];
|
|
|
|
if (showProximity) {
|
|
availableOptions.push('proximity');
|
|
}
|
|
|
|
// Popular sorting available for all content types
|
|
availableOptions.push('popular');
|
|
|
|
// Zaps available for all content
|
|
availableOptions.push('zaps');
|
|
|
|
return (
|
|
<Select value={value} onValueChange={(v) => onChange(v as SortOption)}>
|
|
<SelectTrigger className={cn("w-[200px] gap-2", className)}>
|
|
<ArrowUpDown className="h-4 w-4 text-muted-foreground" />
|
|
<SelectValue>
|
|
<span className="flex items-center gap-2">
|
|
<Icon className="h-4 w-4" />
|
|
{selectedOption.label}
|
|
</span>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{availableOptions.map((option) => {
|
|
const opt = SORT_OPTIONS[option];
|
|
const OptionIcon = opt.icon;
|
|
|
|
return (
|
|
<SelectItem key={option} value={option}>
|
|
<div className="flex items-center gap-2 w-full">
|
|
<OptionIcon className="h-4 w-4 text-muted-foreground" />
|
|
<div className="flex-1">
|
|
<div className="font-medium">{opt.label}</div>
|
|
<div className="text-xs text-muted-foreground">{opt.description}</div>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|