34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import Image from 'next/image'
|
|
import clsx from 'clsx'
|
|
|
|
interface SearchbarProps {
|
|
className?: string
|
|
}
|
|
|
|
export const Searchbar = ({ className }: SearchbarProps) => (
|
|
<div
|
|
className={clsx(
|
|
'flex-1 sm:max-w-[280px] md:max-w-[400px] lg:max-w-[500px] flex items-center justify-between gap-x-4 md:gap-x-6 px-4 sm:px-6 py-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-3xl',
|
|
className
|
|
)}
|
|
>
|
|
<input
|
|
type="search"
|
|
placeholder="Search for Movies, TV Shows, Themes & Cast"
|
|
className="w-full flex flex-1 outline-none bg-transparent text-black dark:text-white text-base"
|
|
/>
|
|
<div className="flex items-center justify-end gap-x-1 xs:gap-x-2 md:gap-x-3 lg:gap-x-5 xl:gap-x-6">
|
|
<div className="w-[1px] h-9 bg-gray-400/50 cursor-default" />
|
|
<div className="w-8 h-8 flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-200/10 rounded-full cursor-pointer">
|
|
<Image
|
|
alt=""
|
|
src="/search.svg"
|
|
width={16}
|
|
height={16}
|
|
className="select-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|