cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Improve styling of featurebar/searchbar

Browse Source
This commit is contained in:
paco
2020-10-08 13:16:30 -06:00
parent 791e8cf18f
commit 8983f51e2c
5 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/core/Searchbar/Searchbar.tsx
View File

@@ -8,22 +8,22 @@ interface Props {
}
const Searchbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className)
return (
<div className={rootClassName}>
<div className="flex-1 flex justify-between px-2">
<div className={s.container}>
<input className={s.input} placeholder="Search for products..." />
<div className={s.iconContainer}>
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
</div>
</div>
<div
className={cn(
'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full',
className
)}
>
<input className={s.input} placeholder="Search for products..." />
<div className={s.iconContainer}>
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
/>
</svg>
</div>
</div>
)