forked from crowetic/commerce
Improve styling of featurebar/searchbar
This commit is contained in:
parent
791e8cf18f
commit
8983f51e2c
@ -10,14 +10,14 @@ interface Props {
|
|||||||
|
|
||||||
const Featurebar: FC<Props> = ({ title, description, className }) => {
|
const Featurebar: FC<Props> = ({ title, description, className }) => {
|
||||||
const rootClassName = cn(
|
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
|
className
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
<span className="text-white font-medium">{title}</span>
|
<span>{title}</span>
|
||||||
<span className={s.separator} />
|
<span className={s.separator} />
|
||||||
<span className="text-white font-medium">{description}</span>
|
<span>{description}</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,3 @@
|
|||||||
.root {
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
@apply flex justify-between items-center flex-row px-6 h-20 relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
.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;
|
@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;
|
||||||
}
|
}
|
||||||
|
@ -10,25 +10,40 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Navbar: FC<Props> = ({ className }) => {
|
const Navbar: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = className
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
<Container>
|
<Container>
|
||||||
<div className={s.container}>
|
<div className="flex justify-between align-center flex-row px-6 py-4 md:py-6 relative">
|
||||||
<Link href="/">
|
<div className="flex flex-1 items-center">
|
||||||
<span className="flex-0 cursor-pointer">
|
<Link href="/">
|
||||||
<Logo />
|
<a className="cursor-pointer">
|
||||||
</span>
|
<Logo />
|
||||||
</Link>
|
</a>
|
||||||
<div className="flex flex-row h-full content-center flex-1 ml-10">
|
</Link>
|
||||||
<nav className="hidden flex-row items-center px-6 lg:flex space-x-4">
|
<nav className="space-x-4 ml-6 hidden md:block">
|
||||||
<a className={s.link}>All</a>
|
<Link href="/">
|
||||||
<a className={s.link}>Clothes</a>
|
<a className={s.link}>All</a>
|
||||||
<a className={s.link}>Accesories</a>
|
</Link>
|
||||||
|
<Link href="/">
|
||||||
|
<a className={s.link}>Clothes</a>
|
||||||
|
</Link>
|
||||||
|
<Link href="/">
|
||||||
|
<a className={s.link}>Accessories</a>
|
||||||
|
</Link>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:flex flex-1 justify-center hidden">
|
||||||
<Searchbar />
|
<Searchbar />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 {
|
.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;
|
min-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,22 +8,22 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Searchbar: FC<Props> = ({ className }) => {
|
const Searchbar: FC<Props> = ({ className }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
|
||||||
return (
|
return (
|
||||||
<div className={rootClassName}>
|
<div
|
||||||
<div className="flex-1 flex justify-between px-2">
|
className={cn(
|
||||||
<div className={s.container}>
|
'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full',
|
||||||
<input className={s.input} placeholder="Search for products..." />
|
className
|
||||||
<div className={s.iconContainer}>
|
)}
|
||||||
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
>
|
||||||
<path
|
<input className={s.input} placeholder="Search for products..." />
|
||||||
fillRule="evenodd"
|
<div className={s.iconContainer}>
|
||||||
clipRule="evenodd"
|
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
|
||||||
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"
|
<path
|
||||||
/>
|
fillRule="evenodd"
|
||||||
</svg>
|
clipRule="evenodd"
|
||||||
</div>
|
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"
|
||||||
</div>
|
/>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user