30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
import SearchBar from '../Search/SearchBar'
|
|
|
|
export default function Topbar() {
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 z-50">
|
|
<div className="h-full px-5 flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-4">
|
|
<button aria-label="Toggle menu" className="md:hidden text-neutral-200 hover:text-sky-400">
|
|
<i className="fas fa-bars text-lg" aria-hidden="true"></i>
|
|
</button>
|
|
<a href="/" className="text-sky-400 font-semibold text-xl">Skinbase</a>
|
|
</div>
|
|
|
|
<div className="hidden md:block flex-1 max-w-xl">
|
|
<SearchBar />
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 sm:gap-5">
|
|
<a href="/forum" className="hidden sm:inline text-sm hover:text-sky-400">Forum</a>
|
|
<button aria-label="User menu" className="text-neutral-200 hover:text-sky-400">
|
|
<i className="fas fa-user" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|