mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
🛠️ Refactor header component; streamline button classes and improve layout consistency
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user