refactor(ui): Simplify header layout and repo info display

Author: PresentKim

src/layout/components/Header.tsx

@@ -5,28 +5,22 @@ import {LogoIcon} from '@/components/LogoIcon'
 import {SettingButton} from '@/components/SettingButton'
 
 import {useRepoStore} from '@/stores/repoStore'
-import {cn} from '@/utils'
 
 function HomeButton() {
   return (
-    <NavLink
-      to="/"
-      aria-label="Home"
-      className="flex items-center gap-1 h-full w-fit text-2xl select-none">
-      <LogoIcon strokeWidth={3} className="size-8 min-w-8" />
-      <span className="font-bold">Github</span>
-      <span className="text-card-foreground">resource</span>
+    <NavLink to="/" aria-label="Home Button" className="select-none">
+      <LogoIcon className="size-8" />
     </NavLink>
   )
 }
 
-function RepoInfo({className}: {className?: string}) {
+function RepoInfo(props: React.ComponentProps<'div'>) {
   const repo = useRepoStore(state => state.repo)
 
   if (!repo.owner) return null
 
   return (
-    <div className={className}>
+    <div {...props}>
       <a
         href={repo.url}
         target="_blank"
@@ -38,30 +32,18 @@ function RepoInfo({className}: {className?: string}) {
   )
 }
 
-export default function Header(
-  props: Omit<React.ComponentProps<'header'>, 'ref' | 'className'>,
-) {
+export default function Header(props: React.ComponentProps<'header'>) {
   return (
     <FloatingHeader
       data-slot="header"
       className="w-full border-b border-border/40 bg-background/80 backdrop-blur-lg"
       {...props}>
-      <div
-        data-slot="header"
-        className={cn(
-          'flex flex-col',
-          'w-full max-w-7xl group-[wide]:max-w-full h-full mx-auto py-2 px-4 sm:px-6',
-        )}>
-        <div className="flex items-center justify-between min-h-10">
-          <div data-slot="header-title" className="flex-1 items-center">
-            <HomeButton />
-          </div>
-          <div data-slot="header-side" className="flex items-center gap-4">
-            <RepoInfo className="hidden md:block" />
-            <SettingButton />
-          </div>
+      <div className="flex flex-row justify-between w-full max-w-7xl min-h-10 mx-auto py-2 px-4 sm:px-6">
+        <div className="flex-1 flex flex-row flex-wrap justify-between items-center gap-2 mr-2">
+          <HomeButton />
+          <RepoInfo />
         </div>
-        <RepoInfo className="md:hidden pb-1" />
+        <SettingButton />
       </div>
     </FloatingHeader>
   )