crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
5 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/core/Featurebar/Featurebar.tsx
View File

@ -10,14 +10,14 @@ interface Props {
const Featurebar: FC<Props> = ({ title, description, className }) => {
const rootClassName = cn(
'hidden py-4 px-6 bg-black text-white md:flex flex-row justify-center items-center;',
'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
className
)
return (
<div className={rootClassName}>
<span className="text-white font-medium">{title}</span>
<span>{title}</span>
<span className={s.separator} />
<span className="text-white font-medium">{description}</span>
<span>{description}</span>
</div>
)
}

7
components/core/Navbar/Navbar.module.css
View File

@ -1,10 +1,3 @@
.root {
}
.container {
@apply flex justify-between items-center flex-row px-6 h-20 relative;
}
.link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
}

41
components/core/Navbar/Navbar.tsx
View File

@ -10,25 +10,40 @@ interface Props {
}
const Navbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className)
const rootClassName = className
return (
<div className={rootClassName}>
<Container>
<div className={s.container}>
<Link href="/">
<span className="flex-0 cursor-pointer">
<Logo />
</span>
</Link>
<div className="flex flex-row h-full content-center flex-1 ml-10">
<nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
<a className={s.link}>All</a>
<a className={s.link}>Clothes</a>
<a className={s.link}>Accesories</a>
<div className="flex justify-between align-center flex-row px-6 py-4 md:py-6 relative">
<div className="flex flex-1 items-center">
<Link href="/">
<a className="cursor-pointer">
<Logo />
</a>
</Link>
<nav className="space-x-4 ml-6 hidden md:block">
<Link href="/">
<a className={s.link}>All</a>
</Link>
<Link href="/">
<a className={s.link}>Clothes</a>
</Link>
<Link href="/">
<a className={s.link}>Accessories</a>
</Link>
</nav>
</div>
<div className="md:flex flex-1 justify-center hidden">
<Searchbar />
</div>
<UserNav />
<div className="flex flex-initial md:flex-1 justify-end">
<UserNav />
</div>
</div>
<div className="block flex pb-4 md:hidden px-6">
<Searchbar />
</div>
</Container>
</div>

10
components/core/Searchbar/Searchbar.module.css
View File

@ -1,13 +1,5 @@
.root {
@apply px-4 items-center hidden md:flex;
}
.container {
@apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1;
}
.input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4;
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4;
min-width: 300px;
}

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>
)