forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
Luis Alvarez
commit
b44d6e31c0
@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
|
||||
import s from "./Navbar.module.css";
|
||||
import { Logo, Container } from "@components/ui";
|
||||
import { Avatar, Searchbar } from "@components/core";
|
||||
import { Heart, Bag } from "@components/icon";
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
@ -21,7 +22,9 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
<a>Accesories</a>
|
||||
</nav>
|
||||
</div>
|
||||
<nav>
|
||||
<nav className="flex flex-row items-center">
|
||||
<Bag className="mr-6" />
|
||||
<Heart className="mr-6" />
|
||||
<Avatar />
|
||||
</nav>
|
||||
</Container>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export { default as Avatar } from "./Avatar";
|
||||
export { default as Featurebar } from "./Featurebar";
|
||||
export { default as Footer } from "./Footer";
|
||||
export { default as Layout } from "./Layout";
|
||||
export { default as Navbar } from "./Navbar";
|
||||
export { default as Searchbar } from "./Searchbar";
|
||||
export { default as Layout } from "./Layout";
|
||||
export { default as Featurebar } from "./Featurebar";
|
||||
|
||||
38
components/icon/Bag.tsx
Normal file
38
components/icon/Bag.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
|
||||
const Bag = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="22"
|
||||
viewBox="0 0 20 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z"
|
||||
stroke="black"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1 5H19"
|
||||
stroke="black"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9"
|
||||
stroke="black"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bag;
|
||||
24
components/icon/Heart.tsx
Normal file
24
components/icon/Heart.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
const Heart = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="20"
|
||||
viewBox="0 0 24 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M20.84 2.61C20.3292 2.099 19.7228 1.69365 19.0554 1.41708C18.3879 1.14052 17.6725 0.998175 16.95 0.998175C16.2275 0.998175 15.5121 1.14052 14.8446 1.41708C14.1772 1.69365 13.5708 2.099 13.06 2.61L12 3.67L10.94 2.61C9.9083 1.57831 8.50903 0.998709 7.05 0.998709C5.59096 0.998709 4.19169 1.57831 3.16 2.61C2.1283 3.64169 1.54871 5.04097 1.54871 6.5C1.54871 7.95903 2.1283 9.35831 3.16 10.39L4.22 11.45L12 19.23L19.78 11.45L20.84 10.39C21.351 9.87924 21.7563 9.27281 22.0329 8.60536C22.3095 7.9379 22.4518 7.22249 22.4518 6.5C22.4518 5.77751 22.3095 5.0621 22.0329 4.39464C21.7563 3.72719 21.351 3.12076 20.84 2.61V2.61Z"
|
||||
stroke="black"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Heart;
|
||||
45
components/icon/Trash.tsx
Normal file
45
components/icon/Trash.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
|
||||
const Trash = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M3 6H21"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 11V17"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14 11V17"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Trash;
|
||||
3
components/icon/index.ts
Normal file
3
components/icon/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as Bag } from "./Bag";
|
||||
export { default as Heart } from "./Heart";
|
||||
export { default as Trash } from "./Trash";
|
||||
@ -1,3 +1,8 @@
|
||||
.root {
|
||||
@apply flex flex-row h-screen py-12;
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply py-5 uppercase text-center;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@ -17,10 +17,14 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<div className="absolute h-12">
|
||||
<h1>T-Shirt</h1>
|
||||
<div className="absolute">
|
||||
<h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
|
||||
T-Shirt
|
||||
</h1>
|
||||
<div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
|
||||
$50
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute h-12">T-Shirt</div>
|
||||
<div className="flex-1 h-full p-24">
|
||||
<div className="bg-violet h-full"></div>
|
||||
</div>
|
||||
@ -36,19 +40,19 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
||||
<section className="pb-4">
|
||||
<h2 className="uppercase font-medium">Size</h2>
|
||||
<div className="flex flex-row py-4">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
|
||||
S
|
||||
</span>
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
|
||||
M
|
||||
</span>
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-900 flex items-center justify-center cursor-pointer">
|
||||
L
|
||||
</span>
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
|
||||
XL
|
||||
</span>
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center">
|
||||
<span className="h-12 w-12 bg-white rounded-full mr-3 border border-gray-200 flex items-center justify-center cursor-pointer">
|
||||
XXL
|
||||
</span>
|
||||
</div>
|
||||
@ -57,7 +61,7 @@ const ProductView: FunctionComponent<Props> = ({ productData, className }) => {
|
||||
<p>{productData.description}</p>
|
||||
</section>
|
||||
<section className="pb-4">
|
||||
<Button className="">Add to Cart</Button>
|
||||
<Button className={s.button}>Add to Cart</Button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.root {
|
||||
@apply cursor-pointer inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium;
|
||||
@apply cursor-pointer inline-flex px-8 py-2 rounded-sm border border-transparent leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center;
|
||||
}
|
||||
|
||||
.root:hover {
|
||||
@ -13,3 +13,7 @@
|
||||
.root:active {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
s.filled {
|
||||
@apply text-white bg-black;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user