forked from crowetic/commerce
Adding UI Context
This commit is contained in:
parent
3dc2c16cea
commit
1af9a980df
@ -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>
|
||||||
|
@ -13,7 +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();
|
const { displaySidebar } = useUI();
|
||||||
return (
|
return (
|
||||||
<Container className={rootClassName}>
|
<Container className={rootClassName}>
|
||||||
<Featurebar
|
<Featurebar
|
||||||
@ -22,11 +22,11 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
|
|||||||
/>
|
/>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main className="h-screen">{children}</main>
|
<main className="h-screen">{children}</main>
|
||||||
{/* {displaySidebar && (
|
{displaySidebar && (
|
||||||
<Sidebar>
|
<Sidebar>
|
||||||
<CartSidebarView />
|
<CartSidebarView />
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
)} */}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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
16
components/icon/Cross.tsx
Normal 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;
|
@ -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";
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
import React, { Context, FunctionComponent } from "react";
|
import React, { Context, FunctionComponent } from "react";
|
||||||
|
|
||||||
export interface ContextType {
|
|
||||||
displaySidebar: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
displaySidebar: false,
|
displaySidebar: false,
|
||||||
|
dispatch: null,
|
||||||
};
|
};
|
||||||
|
export interface UIState {
|
||||||
|
displaySidebar: boolean;
|
||||||
|
dispatch: (string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
function uiReducer(state, action) {
|
function uiReducer(state, action) {
|
||||||
switch (action.type) {
|
switch (action) {
|
||||||
case "OPEN_SIDEBAR": {
|
case "OPEN_SIDEBAR": {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
@ -19,13 +20,13 @@ function uiReducer(state, action) {
|
|||||||
case "CLOSE_SIDEBAR": {
|
case "CLOSE_SIDEBAR": {
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
displaySidebar: true,
|
displaySidebar: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UIContext = React.createContext<ContextType>(initialState);
|
export const UIContext = React.createContext<UIState>(initialState);
|
||||||
UIContext.displayName = "UIContext";
|
UIContext.displayName = "UIContext";
|
||||||
|
|
||||||
export const UIProvider: FunctionComponent = (props) => {
|
export const UIProvider: FunctionComponent = (props) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user