4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-09-30 16:03:25 -05:00
commit e242525476
7 changed files with 89 additions and 22 deletions

View File

@ -1,11 +1,11 @@
import React, { FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
// import s from "./CartSidebarView.module.css"; // import s from "./CartSidebarView.module.css";
import { Button } from "@components/ui"; import { Button } from "@components/ui";
import { Trash } from "@components/icon"; import { Trash, Cross } from "@components/icon";
import { useUI } from "@components/ui/context";
interface Props {} const CartSidebarView: FunctionComponent = () => {
const { dispatch } = useUI();
const CartSidebarView: FunctionComponent<Props> = () => {
return ( return (
<> <>
<header className="px-4 py-6 sm:px-6 border-b border-gray-200"> <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
@ -17,22 +17,11 @@ const CartSidebarView: FunctionComponent<Props> = () => {
</div> </div>
<div className="h-7 flex items-center"> <div className="h-7 flex items-center">
<button <button
onClick={() => dispatch("CLOSE_SIDEBAR")}
aria-label="Close panel" aria-label="Close panel"
className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150" className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
> >
<svg <Cross className="h-6 w-6" />
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button> </button>
</div> </div>
</div> </div>

View File

@ -4,6 +4,8 @@ import s from "./Layout.module.css";
import { Navbar, Featurebar } from "@components/core"; import { Navbar, Featurebar } from "@components/core";
import { Container, Sidebar } from "@components/ui"; import { Container, Sidebar } from "@components/ui";
import { CartSidebarView } from "@components/cart"; import { CartSidebarView } from "@components/cart";
import { useUI } from "@components/ui/context";
interface Props { interface Props {
className?: string; className?: string;
children?: any; children?: any;
@ -11,6 +13,7 @@ interface Props {
const Layout: FunctionComponent<Props> = ({ className, children }) => { const Layout: FunctionComponent<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
const { displaySidebar } = useUI();
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>
<Featurebar <Featurebar
@ -19,9 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
/> />
<Navbar /> <Navbar />
<main className="h-screen">{children}</main> <main className="h-screen">{children}</main>
{/* <Sidebar> {displaySidebar && (
<CartSidebarView /> <Sidebar>
</Sidebar> */} <CartSidebarView />
</Sidebar>
)}
</Container> </Container>
); );
}; };

View File

@ -4,6 +4,7 @@ import s from "./Navbar.module.css";
import { Logo, Container } from "@components/ui"; import { Logo, Container } from "@components/ui";
import { Avatar, Searchbar } from "@components/core"; import { Avatar, Searchbar } from "@components/core";
import { Heart, Bag } from "@components/icon"; import { Heart, Bag } from "@components/icon";
import { useUI } from "@components/ui/context";
interface Props { interface Props {
className?: string; className?: string;
children?: any; children?: any;
@ -11,6 +12,10 @@ interface Props {
const Navbar: FunctionComponent<Props> = ({ className }) => { const Navbar: FunctionComponent<Props> = ({ className }) => {
const rootClassName = cn(s.root, className); const rootClassName = cn(s.root, className);
const { dispatch } = useUI();
const handleCartClick = () => dispatch("OPEN_SIDEBAR");
return ( return (
<Container className={rootClassName}> <Container className={rootClassName}>
<Logo /> <Logo />
@ -23,7 +28,7 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
</nav> </nav>
</div> </div>
<nav className="flex flex-row items-center"> <nav className="flex flex-row items-center">
<Bag className="mr-6" /> <Bag className="mr-6" onClick={handleCartClick} />
<Heart className="mr-6" /> <Heart className="mr-6" />
<Avatar /> <Avatar />
</nav> </nav>

16
components/icon/Cross.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
const Cross = ({ ...props }) => {
return (
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
);
};
export default Cross;

View File

@ -1,3 +1,4 @@
export { default as Bag } from "./Bag"; export { default as Bag } from "./Bag";
export { default as Heart } from "./Heart"; export { default as Heart } from "./Heart";
export { default as Trash } from "./Trash"; export { default as Trash } from "./Trash";
export { default as Cross } from "./Cross";

47
components/ui/context.tsx Normal file
View File

@ -0,0 +1,47 @@
import React, { Context, FunctionComponent } from "react";
const initialState = {
displaySidebar: false,
dispatch: null,
};
export interface UIState {
displaySidebar: boolean;
dispatch: (string) => void;
}
function uiReducer(state, action) {
switch (action) {
case "OPEN_SIDEBAR": {
return {
...state,
displaySidebar: true,
};
}
case "CLOSE_SIDEBAR": {
return {
...state,
displaySidebar: false,
};
}
}
}
export const UIContext = React.createContext<UIState>(initialState);
UIContext.displayName = "UIContext";
export const UIProvider: FunctionComponent = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState);
const value = {
...state,
dispatch,
};
return <UIContext.Provider value={value} {...props} />;
};
export const useUI = () => {
const context = React.useContext(UIContext);
if (context === undefined) {
throw new Error(`useUI must be used within a UIProvider`);
}
return context;
};

View File

@ -1,9 +1,13 @@
import "@assets/global.css"; import "@assets/global.css";
import React from "react";
import { UIProvider } from "@components/ui/context";
export default function MyApp({ Component, pageProps }) { export default function MyApp({ Component, pageProps }) {
return ( return (
<> <>
<Component {...pageProps} /> <UIProvider>
<Component {...pageProps} />
</UIProvider>
</> </>
); );
} }