add BrandXIcon and BSkyIcon components; update Navbar to use new icons

Author: LadyBluenotes

src/components/Navbar.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import { BrandContextMenu } from './BrandContextMenu'
 import { Link, useLocation, useMatches } from '@tanstack/react-router'
-import { TbBrandX, TbBrandBesky } from 'react-icons/tb'
 import {
   Code,
   Users,
@@ -33,6 +32,8 @@ import { useCapabilities } from '~/hooks/useCapabilities'
 import { GithubIcon } from '~/components/icons/GithubIcon'
 import { DiscordIcon } from '~/components/icons/DiscordIcon'
 import { InstagramIcon } from '~/components/icons/InstagramIcon'
+import { BSkyIcon } from '~/components/icons/BSkyIcon'
+import { BrandXIcon } from '~/components/icons/BrandXIcon'
 
 export function Navbar({ children }: { children: React.ReactNode }) {
   const matches = useMatches()
@@ -42,7 +43,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     [...matches].reverse().find((m) => m.staticData.Title)?.staticData.Title ??
     null
 
-  const canAdmin = capabilities.incdes('admin')
+  const canAdmin = capabilities.includes('admin')
 
   const containerRef = React.useRef<HTMLDivElement>(null)
 
@@ -80,7 +81,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
             className="flex items-center gap-1 bg-gray-500/20 rounded-lg p-2 opacity-80
             hover:opacity-100 whitespace-nowrap uppercase font-black text-xs"
           >
-            <User className="scale-125" />
+            <User size={16} />
             <div className="">Log In</div>
           </Link>
         )
@@ -127,14 +128,14 @@ export function Navbar({ children }: { children: React.ReactNode }) {
         className="opacity-70 hover:opacity-100"
         aria-label="Follow TanStack on X.com"
       >
-        <TbBrandX className="text-xl" />
+        <BrandXIcon className="text-xl" />
       </a>
       <a
         href="https://bsky.app/profile/tanstack.com"
         className="opacity-70 hover:opacity-100"
         aria-label="Follow TanStack on Besky"
       >
-        <TbBrandBesky className="text-xl" />
+        <BSkyIcon className="text-xl" />
       </a>
       <a
         href="https://instagram.com/tan_stack"
@@ -268,7 +269,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                 textStyle: string
                 badge?: string
                 colorFrom: string
-              } => d.to !== undefined && sidebarLibraryIds.incdes(d.id),
+              } => d.to !== undefined && sidebarLibraryIds.includes(d.id),
             )
             .sort((a, b) => {
               const indexA = sidebarLibraryIds.indexOf(a.id)
@@ -418,7 +419,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
       <div>
         <Authenticated>
           {capabilities.some((capability) =>
-            (['builder', 'admin'] as const).incdes(
+            (['builder', 'admin'] as const).includes(
               capability as 'builder' | 'admin',
             ),
           ) ? (
@@ -450,22 +451,22 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                 </span>
               </>
             ),
-            icon: <Rss />,
+            icon: <Rss size={14} />,
             to: '/feed',
           },
           {
             label: 'Maintainers',
-            icon: <Code />,
+            icon: <Code size={14} />,
             to: '/maintainers',
           },
           {
             label: 'Partners',
-            icon: <Users />,
+            icon: <Users size={14} />,
             to: '/partners',
           },
           {
             label: 'Blog',
-            icon: <Music />,
+            icon: <Music size={14} />,
             to: '/blog',
           },
           {
@@ -477,28 +478,28 @@ export function Navbar({ children }: { children: React.ReactNode }) {
                 </span>
               </>
             ),
-            icon: <BookOpen />,
+            icon: <BookOpen size={14} />,
             to: '/learn',
           },
           {
             label: 'Support',
-            icon: <HelpCircle />,
+            icon: <HelpCircle size={14} />,
             to: '/support',
           },
           {
             label: 'Stats',
-            icon: <TrendingUp />,
+            icon: <TrendingUp size={14} />,
             to: '/stats/npm',
           },
           {
             label: 'Discord',
-            icon: <DiscordIcon />,
+            icon: <DiscordIcon size={14} />,
             to: 'https://tlinz.com/discord',
             target: '_blank',
           },
           {
             label: 'Merch',
-            icon: <Shirt />,
+            icon: <Shirt size={14} />,
             to: '/merch',
           },
           {
@@ -508,26 +509,26 @@ export function Navbar({ children }: { children: React.ReactNode }) {
           },
           {
             label: 'Ethos',
-            icon: <ShieldCheck />,
+            icon: <ShieldCheck size={14} />,
             to: '/ethos',
           },
           {
             label: 'Tenets',
-            icon: <BookOpen />,
+            icon: <BookOpen size={14} />,
             to: '/tenets',
           },
           {
             label: 'Brand Guide',
-            icon: <Paintbrush />,
+            icon: <Paintbrush size={14} />,
             to: '/brand-guide',
           },
         ]
           .filter((item) => {
             // Filter out items that require capabilities the user doesn't have
             if (item.requiresCapability) {
               return (
-                capabilities.incdes(item.requiresCapability) ||
-                capabilities.incdes('admin')
+                capabilities.includes(item.requiresCapability) ||
+                capabilities.includes('admin')
               )
             }
             return true

src/components/SearchButton.tsx

@@ -24,7 +24,7 @@ export function SearchButton({ className }: SearchButtonProps) {
         <MdSearch className="text-lg" /> Search...
       </div>
       <div className="flex items-center bg-white/50 dark:bg-gray-500/50 rounded-md px-2 py-1 gap-1 font-bold text-xs whitespace-nowrap">
-        <Command size={14} /> + K
+        <Command size={12} /> + K
       </div>
     </button>
   )

src/components/icons/BSkyIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+export function BSkyIcon({
+                                  className,
+                                  width = '1em',
+                                  height = '1em',
+                                  ...props
+                                }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z"></path>
+    </svg>
+  )
+}

src/components/icons/BrandXIcon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+export function BrandXIcon({
+                                  className,
+                                  width = '1em',
+                                  height = '1em',
+                                  ...props
+                                }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={width}
+      height={height}
+      role="img"
+      aria-hidden={props['aria-label'] ? undefined : true}
+      className={className}
+      {...props}
+    >
+      <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
+    </svg>
+  )
+}