michellepace · michellepace · Jan 2, 2026 · Jan 2, 2026 · Jan 2, 2026 · Jan 2, 2026
diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**

diff --git a/.claude/settings.json b/.claude/settings.json
@@ -71,7 +71,7 @@
  "WebFetch(domain:vercel.com)",
  "WebFetch(domain:vitest.dev)"
  ],
- "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+ "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
  "ask": []
  },
  "enabledPlugins": {

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -1,32 +1,9 @@
+import { TagLink } from "@/components/tag-link";
+
 const HomePage = () => (
  <>
- <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
-
- {/* Demo: top overflow test */}
- <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
-
- {/* Flexbox demo: grow vs flex-none */}
- <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
-
- {/* Grows to fill available space */}
- <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
- grow
- </div>
-
- {/* Fixed width - won't grow */}
- <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
- flex-none
- </div>
- </div>
-
- {/* Demo: bottom overflow test */}
- <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
+ <h1 className="text-heading-2xl">All Questions</h1>
 
- {/* Question boxes for testing sticky sidebar scroll */}
  <div className="mt-8 space-y-6">
  {[1, 2, 3, 4].map((questionIndex) => (
  <article
@@ -56,13 +33,8 @@ const HomePage = () => (
 
  {/* Tags */}
  <div className="mb-4 flex flex-wrap gap-2">
- {["next.js", "tailwindcss", "react", "css"].map((tag) => (
- <span
- key={tag}
- className="rounded-md bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-foreground"
- >
- {tag}
- </span>
+ {["tailwind", "nextjs"].map((tag) => (
+ <TagLink key={tag} name={tag} />
  ))}
  </div>
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -27,6 +27,12 @@ export default function RootLayout({
  className={`${inter.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} h-full`}
  suppressHydrationWarning
  >
+ <head>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+ />
+ </head>
  <body className="flex min-h-full flex-col antialiased">
  <ThemeProvider
  attribute="class"

diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx
@@ -1,5 +1,5 @@
 import { QuestionLink } from "@/components/right-sidebar/question-link";
-import { TagLink } from "@/components/right-sidebar/tag-link";
+import { TagLink } from "@/components/tag-link";
 import {
  Sidebar,
  SidebarContent,
@@ -59,6 +59,8 @@ export async function RightSidebar() {
  key={tag.name}
  name={tag.name}
  questionCount={tag.questions}
+ showIcon
+ colored
  />
  ))}
  </div>

diff --git a/components/right-sidebar/tag-link.tsx b/components/right-sidebar/tag-link.tsx
diff --git a/components/tag-link.tsx b/components/tag-link.tsx
@@ -0,0 +1,40 @@
+import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { getDeviconClassName } from "@/lib/devicon";
+
+type TagLinkProps = {
+ name: string;
+ questionCount?: number;
+ colored?: boolean;
+ showIcon?: boolean;
+};
+
+export function TagLink({
+ name,
+ questionCount,
+ colored = false,
+ showIcon = false,
+}: TagLinkProps) {
+ const iconClass = getDeviconClassName(name, colored);
+
+ return (
+ <Link
+ href={`/tags/${name}`}
+ className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]"
+ >
+ <Badge className="flex items-center gap-1.5 rounded-md border-transparent bg-(--tag-bg) px-4 py-1.5 uppercase text-(--tag-text)">
+ {showIcon &&
+ (iconClass ? (
+ <i className={iconClass} aria-hidden="true" />
+ ) : (
+ <Tag className="size-3.5" aria-hidden="true" />
+ ))}
+ {name}
+ </Badge>
+ {questionCount !== undefined && (
+ <span className="text-xs text-muted-foreground">{questionCount}</span>
+ )}
+ </Link>
+ );
+}
diff --git a/lib/data/tags.test.ts b/lib/data/tags.test.ts
@@ -16,4 +16,11 @@ describe("getPopularTags", () => {
  expect(tags[0]).toHaveProperty("name");
  expect(tags[0]).toHaveProperty("questions");
  });
+
+ it("returns tags sorted by question count (descending)", async () => {
+ const tags = await getPopularTags(5);
+ for (let i = 0; i < tags.length - 1; i++) {
+ expect(tags[i].questions).toBeGreaterThanOrEqual(tags[i + 1].questions);
+ }
+ });
 });
diff --git a/lib/data/tags.ts b/lib/data/tags.ts
@@ -6,9 +6,14 @@ export type Tag = {
 const MOCK_TAGS: Tag[] = [
  { name: "nextjs", questions: 320 },
  { name: "reactjs", questions: 244 },
+ { name: "typescript", questions: 203 },
+ { name: "css", questions: 156 },
+ { name: "tailwind", questions: 94 },
+ { name: "postgres", questions: 89 },
  { name: "javascript", questions: 83 },
+ { name: "nodejs", questions: 67 },
+ { name: "html", questions: 45 },
  { name: "react", questions: 30 },
- { name: "postgres", questions: 89 },
 ];
 
 /**