fix: github stars component (#237)

Author: thedaviddias

apps/gallery/app/api/github-stars/route.ts

@@ -1,22 +1,30 @@
 import { SOCIAL_LINKS } from "@ux-patterns/constants/social";
-import { ExternalLinkIcon } from "lucide-react";
+import { GitHubStarsWrapper } from "@ux-patterns/ui/components/custom/github-stars-wrapper";
 import Link from "next/link";
 import { HeaderSearchWrapper } from "@/components/header/header-search-wrapper";
-import { TRACKING_CLASSES } from "@/lib/tracking";
-import { StarsWrapper } from "../stars/stars-wrapper";
+import { GALLERY_TRACKING_EVENTS, TRACKING_CLASSES } from "@/lib/tracking";
 
 export function Header() {
 	return (
 		<header className="bg-fd-card border-b border-fd-border">
 			<div className="container-responsive">
 				<div className="flex items-center justify-between h-16">
 					<div className="flex items-center space-x-6">
-						<Link
-							href="/"
-							className="text-xl font-bold text-fd-foreground hover:text-fd-primary transition-colors"
-						>
-							UX Patterns Gallery
-						</Link>
+						<div className="flex items-center">
+							<Link
+								href="https://uxpatterns.dev"
+								className="text-xl font-bold text-fd-foreground hover:text-fd-primary transition-colors"
+							>
+								UX Patterns
+							</Link>
+							<span className="mx-2 text-fd-muted-foreground">/</span>
+							<Link
+								href="/"
+								className="text-xl font-bold text-fd-primary hover:text-fd-primary/90 transition-colors"
+							>
+								Gallery
+							</Link>
+						</div>
 
 						<nav className="hidden md:flex items-center space-x-6">
 							<Link
@@ -34,29 +42,27 @@ export function Header() {
 					</div>
 
 					<div className="flex items-center gap-2">
-						<nav className="hidden md:flex items-center space-x-6">
+						<nav className="hidden md:flex items-center space-x-1 mr-4">
 							<Link
 								href="https://uxpatterns.dev"
-								className={`text-fd-muted-foreground hover:text-fd-foreground transition-colors ${TRACKING_CLASSES.MAIN_SITE_LINK_CLICK}`}
+								className={`px-3 py-1 rounded-md text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/50 transition-all ${TRACKING_CLASSES.MAIN_SITE_LINK_CLICK}`}
 							>
 								Patterns
-								<span className="ml-1 inline-flex items-center">
-									<ExternalLinkIcon className="w-4 h-4" />
-								</span>
 							</Link>
 							<Link
 								href="https://kit.uxpatterns.dev"
-								className={`text-fd-muted-foreground hover:text-fd-foreground transition-colors ${TRACKING_CLASSES.MAIN_SITE_LINK_CLICK}`}
+								className={`px-3 py-1 rounded-md text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/50 transition-all ${TRACKING_CLASSES.MAIN_SITE_LINK_CLICK}`}
 							>
 								Kit
-								<span className="ml-1 inline-flex items-center">
-									<ExternalLinkIcon className="w-4 h-4" />
-								</span>
 							</Link>
 						</nav>
 
 						<div className="scale-90 -mx-2">
-							<StarsWrapper variant="small" />
+							<GitHubStarsWrapper
+								variant="small"
+								asLink={true}
+								trackingEvent={GALLERY_TRACKING_EVENTS.GITHUB_STAR_CLICK}
+							/>
 						</div>
 						{SOCIAL_LINKS.filter((social) => social.label !== "GitHub").map(
 							(social) => (

apps/gallery/components/common/header.tsx

@@ -1,8 +1,8 @@
-import { PROJECT } from "@ux-patterns/constants/author";
+import { GitHubStarsWrapper } from "@ux-patterns/ui/components/custom/github-stars-wrapper";
 import type { BaseLayoutProps, LinkItemType } from "fumadocs-ui/layouts/shared";
 import { siDiscord, siInstagram, siX } from "simple-icons";
+import { TRACKING_EVENTS } from "@/lib/tracking";
 import { SimpleIconComponent } from "../components/simple-icon";
-import { StarsWrapper } from "../components/stars-wrapper";
 
 export const linkItems: LinkItemType[] = [
 	// see https://fumadocs.dev/docs/ui/navigation/links
@@ -18,11 +18,14 @@ export const linkItems: LinkItemType[] = [
 	},
 	{
 		type: "icon",
-		url: PROJECT.repository.url,
+		url: "https://github.com/thedaviddias/ux-patterns-for-developers",
 		text: "GitHub Stars",
 		icon: (
 			<div className="scale-90 -mx-2">
-				<StarsWrapper variant="small" />
+				<GitHubStarsWrapper
+					variant="small"
+					trackingEvent={TRACKING_EVENTS.GITHUB_STAR_CLICK}
+				/>
 			</div>
 		),
 		external: true,
@@ -92,11 +95,14 @@ export function baseOptions(): BaseLayoutProps {
 			},
 			{
 				type: "icon",
-				url: PROJECT.repository.url,
+				url: "https://github.com/thedaviddias/ux-patterns-for-developers",
 				text: "GitHub Stars",
 				icon: (
 					<div className="scale-90 -mx-2">
-						<StarsWrapper variant="small" />
+						<GitHubStarsWrapper
+							variant="small"
+							trackingEvent={TRACKING_EVENTS.GITHUB_STAR_CLICK}
+						/>
 					</div>
 				),
 				external: true,