4
0
forked from crowetic/commerce

UI and more

This commit is contained in:
Belen Curcio 2020-09-23 17:15:24 -03:00
parent d26ab52cb2
commit 0190f3b541
8 changed files with 86 additions and 3 deletions

View File

@ -0,0 +1,2 @@
.root {
}

View File

@ -0,0 +1,23 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import s from "./Avatar.module.css";
interface Props {
className?: string;
children?: any;
}
const Avatar: FunctionComponent<Props> = ({ className }) => {
const rootClassName = cn(s.root, className);
return (
<div className={rootClassName}>
<img
className="inline-block h-12 w-12 rounded-full"
src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
alt=""
></img>
</div>
);
};
export default Avatar;

View File

@ -0,0 +1 @@
export { default } from "./Avatar";

View File

@ -2,6 +2,7 @@ import cn from "classnames";
import React, { FunctionComponent } from "react";
import s from "./Navbar.module.css";
import { Logo, Container } from "ui";
import { Avatar, Searchbar } from "components";
interface Props {
className?: string;
children?: any;
@ -13,9 +14,11 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
<div className={rootClassName}>
<Container className={s.container}>
<Logo />
<div>SEARCH BAR</div>
<div>Menu list bar</div>
<div>Menu Icon bar</div>
<Searchbar />
<nav>All Clothes Accesories</nav>
<nav>
<Avatar />
</nav>
</Container>
</div>
);

View File

@ -0,0 +1,3 @@
.root {
@apply px-4;
}

View File

@ -0,0 +1,48 @@
import cn from "classnames";
import React, { FunctionComponent } from "react";
import s from "./Searchbar.module.css";
interface Props {
className?: string;
children?: any;
}
const Searchbar: FunctionComponent<Props> = ({ className }) => {
const rootClassName = cn(s.root, className);
return (
<div className={rootClassName}>
<div className="flex-1 flex justify-between px-2">
<div className="flex-1 flex">
<form className="w-full flex md:mr-0" action="#">
<label htmlFor="search_field" className="sr-only">
Search
</label>
<div className="relative w-full text-gray-600 focus-within:text-gray-600">
<input
id="search_field"
className="block w-full h-full pr-12 pl-3 py-2 rounded-md bg-gray-200 text-gray-900 placeholder-gray-600 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
placeholder="Search"
type="search"
/>
<div className="absolute inset-y-0 right-0 mr-3 flex items-center pointer-events-none">
<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>
</div>
</form>
</div>
</div>
</div>
);
};
export default Searchbar;

View File

@ -0,0 +1 @@
export { default } from "./Searchbar";

View File

@ -1 +1,3 @@
export { default as Navbar } from "./Navbar";
export { default as Searchbar } from "./Searchbar";
export { default as Avatar } from "./Avatar";