valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement sort by hue for named colors using pastel-wasm

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-24 10:45:00 +01:00
parent d65a7c6c30
commit d61add82cd
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/(app)/pastel/names/page.tsx
View File

@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select'; import { Select } from '@/components/ui/Select';
import { useNamedColors } from '@/lib/pastel/api/queries'; import { useNamedColors } from '@/lib/pastel/api/queries';
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { parse_color } from '@valknarthing/pastel-wasm';
export default function NamedColorsPage() { export default function NamedColorsPage() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@@ -24,9 +25,13 @@ export default function NamedColorsPage() {
if (sortBy === 'name') { if (sortBy === 'name') {
colors.sort((a, b) => a.name.localeCompare(b.name)); colors.sort((a, b) => a.name.localeCompare(b.name));
} else if (sortBy === 'hue') {
colors.sort((a, b) => {
const infoA = parse_color(a.hex);
const infoB = parse_color(b.hex);
return infoA.hsl[0] - infoB.hsl[0];
});
} }
// For hue sorting, we'd need to convert to HSL which requires the API
// For now, just keep alphabetical as default
return colors; return colors;
}, [data, search, sortBy]); }, [data, search, sortBy]);