g1t/apps/web/app/components/topics.tsx
| 1 | import { Link } from "react-router"; |
| 2 | |
| 3 | /** A repository's topics, each a link to Explore filtered by it. */ |
| 4 | export function Topics({ topics, className = "mt-2" }: { topics: string[] | undefined; className?: string }) { |
| 5 | if (!topics?.length) return null; |
| 6 | return ( |
| 7 | <div className={`${className} flex flex-wrap gap-1.5`}> |
| 8 | {topics.map((topic) => ( |
| 9 | <Link |
| 10 | key={topic} |
| 11 | to={`/explore?topic=${encodeURIComponent(topic)}`} |
| 12 | className="rounded-full bg-accent/10 px-2 py-px text-xs text-accent ring-1 ring-accent/30 transition-colors hover:bg-accent/20" |
| 13 | > |
| 14 | {topic} |
| 15 | </Link> |
| 16 | ))} |
| 17 | </div> |
| 18 | ); |
| 19 | } |