Function CategoryCounts

app/page.tsx:96–133

()

}

function CategoryCounts() {
  const extensions = useQuery(api.extensions.listAllApproved)

  const counts: Record<string, number> = {}
  HOMEPAGE_CATEGORIES.forEach((type) => {
    counts[type] = 0
  })

  if (extensions) {
    extensions.forEach((ext) => {
      if (counts[ext.type] !== undefined) {
        counts[ext.type]++
      }
    })
  }

  return (
    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {HOMEPAGE_CATEGORIES.map((type) => {
        const typeInfo = EXTENSION_TYPES[type]
        return (
          <Link
            key={type}
            href={`/search?type=${type}`}
            className="group flex flex-col gap-2 rounded-xl border border-[var(--color-border-weak)] bg-[var(--color-bg-weak)] p-5 transition-all hover:border-[var(--color-border)] hover:bg-[var(--color-bg-weak-hover)] hover:shadow-sm"
          >
            <span className="text-sm font-medium text-[var(--color-text-strong)]">
              {typeInfo.labelPlural}
            </span>
            <span className="text-xs text-[var(--color-text-weak)]">
              {counts[type]} {counts[type] === 1 ? "extension" : "extensions"}
            </span>
          </Link>
        )
      })}
    </div>
  )
}

export default function Home() {
  return (