feat: add BlockSearch component and integrate it into the Header

Author: tomast1337

web/src/modules/shared/components/layout/BlockSearchProps.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { cn } from '@web/src/lib/tailwind.utils';
+import { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+export const BlockSearch = () => {
+  const [query, setQuery] = useState('');
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        className={cn(
+          'bevel p-2 flex-1 w-8 md:min-w-20 max-w-28 flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-800 before:bg-zinc-900 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125',
+        )}
+        id={'search-button'}
+      >
+        <FontAwesomeIcon icon={faMagnifyingGlass} />
+        <span className='hidden sm:block'>Search</span>
+      </PopoverTrigger>
+      <PopoverContent className='w-fit p-[2px] pb-1.5 h-fit shadow-[inset_0px_0px_0px_2px_rgb(82_82_91)] drop-shadow-lg border-zinc-600 bg-zinc-800 text-white rounded-lg'>
+        <div className='flex flex-row gap-2 p-4'>
+          <input
+            type='text'
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder='Search for songs and users'
+            className='w-full bg-zinc-800 text-white border border-zinc-600 rounded-md p-2'
+          />
+          <button
+            className='bg-zinc-600 text-white rounded-md p-2 hover:bg-zinc-500 w-12 h-12'
+            onClick={() => {
+              console.log('Searching for:', query);
+            }}
+          >
+            <FontAwesomeIcon icon={faMagnifyingGlass} />
+          </button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

web/src/modules/shared/components/layout/BlockTab.tsx

@@ -4,24 +4,29 @@ import Link from 'next/link';
 
 import { cn } from '@web/src/lib/tailwind.utils';
 
+interface BlockTabProps {
+  href: string;
+  icon: IconDefinition;
+  label: string;
+  className?: string;
+  id?: string;
+}
+
 export const BlockTab = ({
+  id,
   href,
   icon,
   label,
   className,
-}: {
-  href: string;
-  icon: IconDefinition;
-  label: string;
-  className?: string;
-}) => {
+}: BlockTabProps) => {
   return (
     <Link
       href={href}
       className={cn(
         'bevel p-2 flex-1 w-8 md:min-w-20 max-w-28 flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-800 before:bg-zinc-900 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125',
         className,
       )}
+      id={id}
     >
       <FontAwesomeIcon icon={icon} />
       <span className='hidden sm:block'>{label}</span>

web/src/modules/shared/components/layout/Header.tsx

@@ -16,6 +16,7 @@ import {
 import { BlockTab } from './BlockTab';
 import { NavLinks } from './NavLinks';
 import { RandomSongButton } from './RandomSongButton';
+import { BlockSearch } from './BlockSearchProps';
 
 export async function Header() {
   let isLogged;
@@ -77,26 +78,31 @@ export async function Header() {
             icon={faMusic}
             label='Songs'
             className='bg-purple-700 after:bg-purple-900 before:bg-purple-950'
+            id='songs-tab'
           />
           <BlockTab
             href='/help'
             icon={faQuestionCircle}
             label='Help'
             className='bg-blue-700 after:bg-blue-900 before:bg-blue-950'
+            id='help-tab'
           />
           <BlockTab
             href='/blog'
             icon={faNewspaper}
             label='Blog'
             className='bg-green-700 after:bg-green-900 before:bg-green-950'
+            id='blog-tab'
           />
           <BlockTab
             href='/about'
             icon={faUser}
             label='About'
             className='bg-cyan-700 after:bg-cyan-900 before:bg-cyan-950'
+            id='about-tab'
           />
           <RandomSongButton />
+          <BlockSearch />
         </div>
 
         {/* Sign in / Profile */}