Janady13/llms-txt-hub / apps/web/components/sort-controls.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/sort-controls.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/sort-controls.tsx
Original SHA-256	b39d57e6545cdabc9f46c11cf6533247da501ea274aba9a1936ff5699f45fd42
Git blob SHA	0cd4a1a718c8db47b73ee834d6149df4488b1c88
Reading-copy SHA-256	b39d57e6545cdabc9f46c11cf6533247da501ea274aba9a1936ff5699f45fd42

Original source ↗

Recovered source transcript

Download complete source text ↓64 lines · 1.9 KB

'use client'

import { ToggleGroup, ToggleGroupItem } from '@thedaviddias/design-system/toggle-group'
import { Clock, SortAsc } from 'lucide-react'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useCallback } from 'react'

interface SortControlsProps {
  currentSort: string
}

export function SortControls({ currentSort }: SortControlsProps) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  const handleSortChange = useCallback(
    (value: string) => {
      if (!value) return

      const params = new URLSearchParams(searchParams.toString())
      if (value === 'name') {
        params.delete('sort')
      } else {
        params.set('sort', value)
      }

      const queryString = params.toString()
      const newUrl = queryString ? `${pathname}?${queryString}` : pathname
      router.push(newUrl)
    },
    [pathname, router, searchParams]
  )

  return (
    <div className="flex justify-end items-center">
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground">Sort by:</span>
        <ToggleGroup
          type="single"
          value={currentSort}
          onValueChange={handleSortChange}
          className="bg-background border rounded-md"
        >
          <ToggleGroupItem
            value="latest"
            className="px-3 py-2 h-10 data-[state=on]:bg-accent cursor-pointer"
          >
            <Clock className="size-4 mr-2" />
            <span className="text-sm">Latest</span>
          </ToggleGroupItem>
          <ToggleGroupItem
            value="name"
            className="px-3 py-2 h-10 data-[state=on]:bg-accent cursor-pointer"
          >
            <SortAsc className="size-4 mr-2" />
            <span className="text-sm">Name</span>
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
    </div>
  )
}