feat: add star in the header

Author: thedaviddias

app/[lang]/layout.tsx

@@ -11,9 +11,10 @@ import { getPageMap } from 'nextra/page-map';
 import { getDictionary } from '../_dictionaries/get-dictionary';
 
 import PlausibleProvider from 'next-plausible';
-import { DiscordIcon, GitHubIcon } from "nextra/icons";
+import { DiscordIcon } from "nextra/icons";
 import '../../styles/globals.css';
 import { Footer } from "../_components/footer";
+import { Stars } from "../_components/stars";
 import { GITHUB_REPO_URL, PROJECT_URL } from "../_constants/project";
 import { metadataSEO } from "../metadata";
 
@@ -51,7 +52,9 @@ export default async function RootLayout({ children, params }) {
         </>
       }
       projectLink={PROJECT_URL}
-      projectIcon={<GitHubIcon className="w-6 h-6" aria-label="Github" />}
+      projectIcon={
+        <Stars variant="small" />
+      }
       chatLink="https://ddias.link/discord"
       chatIcon={<DiscordIcon className="w-6 h-6" aria-label="Discord" />}
     >

app/_components/stars.tsx

@@ -6,7 +6,11 @@ import { StarIcon } from 'lucide-react';
 import { GitHubIcon } from 'nextra/icons';
 import { useEffect, useState } from 'react';
 
-export function Stars() {
+type StarsProps = {
+  variant?: 'default' | 'small'
+}
+
+export const Stars = ({ variant = 'default' }: StarsProps) => {
   const [stars, setStars] = useState<number | null>(null)
 
   useEffect(() => {
@@ -27,11 +31,12 @@ export function Stars() {
         target="_blank"
         rel="noopener noreferrer"
         className="!no-underline plausible-event-name=Star+Github inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-sm font-medium text-neutral-900 dark:text-neutral-100 rounded-lg border border-neutral-400 dark:border-neutral-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-200 dark:focus:ring-neutral-700"
+        aria-label="Star on GitHub"
       >
-        <GitHubIcon className="w-4 h-4" />
-        <span className="hidden lg:inline">Star on GitHub</span>
+        <GitHubIcon className="w-4 h-4" aria-hidden="true" />
+        {variant === 'default' && <span className="hidden lg:inline">Star on GitHub</span>}
         <span className="inline-flex items-center px-2 py-0.5 rounded bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100">
-          <StarIcon className="w-4 h-4 mr-1" />
+          <StarIcon className="w-4 h-4 mr-1" aria-hidden="true" />
           {stars}
         </span>
       </a>