refactor: rename SearchButton to SearchBar

Author: Bentroen

apps/frontend/src/modules/shared/components/layout/Header.tsx

@@ -13,7 +13,7 @@ import { checkLogin, getUserData } from '@web/modules/auth/features/auth.utils';
 import { BlockTab } from './BlockTab';
 import { NavLinks } from './NavLinks';
 import { RandomSongButton } from './RandomSongButton';
-import { SearchButton } from './SearchButton';
+import { SearchBar } from './SearchBar';
 
 export async function Header() {
   let isLogged;
@@ -50,6 +50,11 @@ export async function Header() {
           </picture>
         </div>
 
+        {/* Search bar */}
+        <div className='flex-1 max-w-lg'>
+          <SearchBar />
+        </div>
+
         {/* Icon */}
         <div className='flex-0 flex justify-start lg:justify-center min-w-fit'>
           <Link href='/'>
@@ -94,7 +99,6 @@ export async function Header() {
             label='About'
             className='bg-cyan-700 after:bg-cyan-900 before:bg-cyan-950'
           />
-          <SearchButton />
           <RandomSongButton />
         </div>
 

apps/frontend/src/modules/shared/components/layout/SearchButton.tsx renamed to apps/frontend/src/modules/shared/components/layout/SearchBar.tsx

@@ -13,7 +13,7 @@ import {
 import { cn } from '@web/lib/tailwind.utils';
 import { MusicalNote } from './MusicalNote';
 
-export function SearchButton() {
+export function SearchBar() {
   const router = useRouter();
   const [searchQuery, setSearchQuery] = useState('');
   const [isOpen, setIsOpen] = useState(false);