🛠️ Refactor header component; streamline button classes and improve layout consistency
📦 Build / 🛠️ Build app (push) Has been cancelled
🧑‍🚀 Check / ⚙️ Linting (push) Has been cancelled
🧑‍🚀 Check / 📦 SVGs Size (push) Has been cancelled

This commit is contained in:
pheralb
2025-09-01 17:44:16 +01:00
parent 77356d3215
commit 803e13001a
+18 -12
View File
@@ -18,11 +18,6 @@
} }
let { githubStars }: HeaderProps = $props(); let { githubStars }: HeaderProps = $props();
const headerItemsClasses = cn(
buttonVariants({ variant: "ghost" }),
"hover:bg-neutral-200 dark:hover:bg-neutral-800",
);
</script> </script>
<header <header
@@ -39,24 +34,35 @@
</a> </a>
<SvglVersion /> <SvglVersion />
</div> </div>
<div class="flex h-8 items-center"> <div class="flex h-5 items-center space-x-2.5">
<div class="flex items-center space-x-0.5"> <div class="flex items-center space-x-1.5">
<a <a
target="_blank" target="_blank"
title="X/Twitter" title="X/Twitter"
href={globals.twitterUrl} href={globals.twitterUrl}
class={cn(headerItemsClasses, "h-9 w-9")} class={cn(
buttonVariants({ variant: "ghost", size: "icon" }),
"hover:bg-neutral-200 dark:hover:bg-neutral-800",
)}
> >
<Twitter size={18} /> <Twitter size={18} />
</a> </a>
<ModeToggle className={cn(headerItemsClasses, "h-9 w-9")} /> <ModeToggle
className={cn(
buttonVariants({ variant: "ghost", size: "icon" }),
"hover:bg-neutral-200 dark:hover:bg-neutral-800",
)}
/>
</div> </div>
<Separator orientation="vertical" class="mx-2 h-8" /> <Separator orientation="vertical" />
<a <a
target="_blank" target="_blank"
title="GitHub Repository" title="GitHub Repository"
href={globals.githubUrl} href={globals.githubUrl}
class={cn(headerItemsClasses, "h-9 w-fit")} class={cn(
buttonVariants({ variant: "ghost" }),
"w-fit hover:bg-neutral-200 dark:hover:bg-neutral-800",
)}
> >
<Github size={20} /> <Github size={20} />
<span class="text-neutral-600 dark:text-neutral-400"> <span class="text-neutral-600 dark:text-neutral-400">
@@ -65,7 +71,7 @@
: githubStars.toLocaleString()} : githubStars.toLocaleString()}
</span> </span>
</a> </a>
<Separator orientation="vertical" class="mr-3 ml-2" /> <Separator orientation="vertical" />
<a <a
target="_blank" target="_blank"
href={globals.submitUrl} href={globals.submitUrl}