38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import { AiOutlineClose } from 'react-icons/ai'
|
|
|
|
const SearchPage = () => {
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col laptop:flex-row flex-wrap items-start w-[100vw] laptop:w-[80vw] h-[100vh]">
|
|
<div className="p-10 w-[100vw] laptop:w-[20vw]">
|
|
<a href='/'><p className="text-5xl tablet:text-6xl laptop:text-3xl text-white text-center font-serif ">KitabCitab</p></a>
|
|
</div>
|
|
<div className="group
|
|
my-3
|
|
mx-auto
|
|
py-5
|
|
h-[4vh]
|
|
max-w-[90vw]
|
|
bg-[#303134]
|
|
border-[1px] w-[90%] border-[#bdc1c6] rounded-3xl
|
|
flex flex-row justify-around items-center
|
|
|
|
tablet:w-[70%]
|
|
|
|
laptop:w-[40vw]
|
|
laptop:mx-0
|
|
laptop:my-10
|
|
laptop:justify-between
|
|
"
|
|
>
|
|
<input className="bg-[#303134] ml-5 w-[80%] active:border-none text-white outline-none text-lg "/>
|
|
<a className='rounded-3xl hover:border-black text-[#9aa0a6] px-3 py-auto' onClick={() => console.log("Remove text from input")}><AiOutlineClose size={25} /></a>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SearchPage |