4
0
forked from crowetic/commerce
This commit is contained in:
Belen Curcio 2020-09-29 09:23:23 -03:00
parent 381b19e820
commit 54cf948f56
10 changed files with 83 additions and 26 deletions

View File

@ -1,12 +1,7 @@
.root {
@apply border-black border-b;
@apply;
}
.container {
@apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative;
}
.logoContainer {
@apply absolute transform -translate-x-1/2;
left: 50%;
@apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b;
}

View File

@ -13,15 +13,15 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
return (
<div className={rootClassName}>
<Container className={s.container}>
<div className="flex flex-row h-full content-center">
<Logo />
<div className="flex flex-row h-full content-center flex-1">
<Searchbar />
<nav className="flex flex-row items-center px-3">
All Clothes Accesories
<a className="pr-4">All</a>
<a className="pr-4">Clothes</a>
<a>Accesories</a>
</nav>
</div>
<span className={s.logoContainer}>
<Logo />
</span>
<nav>
<Avatar />
</nav>

View File

@ -1,3 +1,25 @@
.root {
@apply px-4 border-black border-r h-full flex items-center;
@apply px-4 flex items-center;
}
.container {
@apply relative rounded-lg flex flex-row text-sm items-center;
background-color: #fafafa;
}
.input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg;
min-width: 300px;
}
.input:focus {
@apply outline-none shadow-outline-gray;
}
.iconContainer {
@apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
}
.icon {
@apply h-5 w-5;
}

View File

@ -12,13 +12,18 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
return (
<div className={rootClassName}>
<div className="flex-1 flex justify-between px-2">
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
clip-rule="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 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
fill-rule="evenodd"
clip-rule="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>
</div>
);

View File

@ -8,6 +8,7 @@
"start": "next start"
},
"dependencies": {
"@tailwindcss/ui": "^0.6.2",
"@types/classnames": "^2.2.10",
"classnames": "^2.2.6",
"next": "^9.5.4-canary.20",

View File

@ -9,7 +9,7 @@ export default function Home() {
description="Due to COVID-19, some orders may experience processing and delivery delays."
/>
<Navbar />
<Container className="px-4 py-5 border-black border-l border-r h-screen">
<Container className="px-4 py-5 h-screen">
<Button>Click Me!</Button>
</Container>
<Footer></Footer>

View File

@ -1,5 +1,6 @@
@import "./font.css";
@tailwind base;
@tailwind components;
:root {
/* Spacing variables */
@ -190,6 +191,4 @@ a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@tailwind components;
@tailwind utilities;
@tailwind screens;

View File

@ -15,5 +15,5 @@ module.exports = {
},
},
variants: {},
plugins: [],
plugins: [require("@tailwindcss/ui")],
};

View File

@ -1,4 +1,5 @@
.root {
@apply max-w-6xl mx-auto px-2;
@apply mx-auto px-2;
display: inherit;
max-width: 1440px;
}

View File

@ -1060,6 +1060,30 @@
dependencies:
mkdirp "^1.0.4"
"@tailwindcss/custom-forms@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
dependencies:
lodash "^4.17.11"
mini-svg-data-uri "^1.0.3"
traverse "^0.6.6"
"@tailwindcss/typography@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
"@tailwindcss/ui@^0.6.2":
version "0.6.2"
resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.6.2.tgz#4144aba86543bf79fefe0ea14a78a12fb315810e"
integrity sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ==
dependencies:
"@tailwindcss/custom-forms" "^0.2.1"
"@tailwindcss/typography" "^0.2.0"
hex-rgb "^4.1.0"
postcss-selector-parser "^6.0.2"
"@types/classnames@^2.2.10":
version "2.2.10"
resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
@ -2667,6 +2691,11 @@ he@1.1.1:
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
hex-rgb@^4.1.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.2.0.tgz#fb377f2e5658fc924f1efa189685922e56ecaf0f"
integrity sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA==
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -3170,6 +3199,11 @@ mime-types@^2.1.27:
dependencies:
mime-db "1.44.0"
mini-svg-data-uri@^1.0.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@ -4740,7 +4774,7 @@ tr46@^1.0.1:
dependencies:
punycode "^2.1.0"
traverse@0.6.6:
traverse@0.6.6, traverse@^0.6.6:
version "0.6.6"
resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=