forked from crowetic/commerce
UI Components
This commit is contained in:
parent
2d94841910
commit
c699d16dda
3
components/Navbar/Navbar.module.css
Normal file
3
components/Navbar/Navbar.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.root {
|
||||
@apply flex justify-between items-center px-4 py-5;
|
||||
}
|
22
components/Navbar/Navbar.tsx
Normal file
22
components/Navbar/Navbar.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import cn from "classnames";
|
||||
import { FunctionComponent } from "react";
|
||||
import s from "./Navbar.module.css";
|
||||
import { Logo } from "ui";
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
const Navbar: FunctionComponent<Props> = ({ className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return (
|
||||
<div className={rootClassName}>
|
||||
<Logo />
|
||||
<div>SEARCH BAR</div>
|
||||
<div>Menu list bar</div>
|
||||
<div>Menu Icon bar</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
1
components/index.ts
Normal file
1
components/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Navbar } from "./Navbar";
|
18
package-lock.json
generated
18
package-lock.json
generated
@ -4768,12 +4768,10 @@
|
||||
}
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
|
||||
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
|
||||
"dev": true,
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.0.tgz",
|
||||
"integrity": "sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==",
|
||||
"requires": {
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
}
|
||||
},
|
||||
@ -5983,6 +5981,16 @@
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
|
||||
"integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.32",
|
||||
"postcss-selector-parser": "^6.0.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
|
@ -11,6 +11,7 @@
|
||||
"@types/classnames": "^2.2.10",
|
||||
"classnames": "^2.2.6",
|
||||
"next": "^9.5.4-canary.20",
|
||||
"postcss-nested": "^5.0.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"swr": "^0.3.3"
|
||||
@ -19,6 +20,7 @@
|
||||
"webpack": "^5.0.0-beta.30"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.11.2",
|
||||
"@types/react": "^16.9.49",
|
||||
"postcss-flexbugs-fixes": "^4.2.1",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
|
@ -1,15 +1,17 @@
|
||||
import { Featurebar, Button } from "ui";
|
||||
import { Featurebar, Button, Container } from "ui";
|
||||
import { Navbar } from "components";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div>
|
||||
<main>
|
||||
<Featurebar
|
||||
title="Free Standard Shipping on orders over $99.99"
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<>
|
||||
<Navbar />
|
||||
<Featurebar
|
||||
title="Free Standard Shipping on orders over $99.99"
|
||||
description="Due to COVID-19, some orders may experience processing and delivery delays."
|
||||
/>
|
||||
<Container className="py-12 bg-black">
|
||||
<Button>Click Me!</Button>
|
||||
</main>
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
.root {
|
||||
@apply cursor-pointer font-bold inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 font-medium text-white bg-black transition ease-in-out duration-150 shadow-sm;
|
||||
@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;
|
||||
}
|
||||
|
||||
.root:hover {
|
||||
|
@ -26,7 +26,9 @@ export default class Button extends React.Component<Props> {
|
||||
let Component: React.ComponentType<
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> &
|
||||
React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
|
||||
> = "button" as any;
|
||||
> = "a" as any;
|
||||
|
||||
// Catch for buttons / span / stc.
|
||||
|
||||
const rootClassName = cn(
|
||||
s.root,
|
||||
|
3
ui/Container/Container.module.css
Normal file
3
ui/Container/Container.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.root {
|
||||
@apply max-w-6xl mx-auto;
|
||||
}
|
25
ui/Container/Container.tsx
Normal file
25
ui/Container/Container.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import cn from "classnames";
|
||||
import { FunctionComponent } from "react";
|
||||
import s from "./Container.module.css";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
el?: HTMLElement;
|
||||
}
|
||||
|
||||
const Container: FunctionComponent<Props> = ({
|
||||
children,
|
||||
className,
|
||||
el = "div",
|
||||
}) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
|
||||
let Component: React.ComponentType<React.HTMLAttributes<
|
||||
HTMLDivElement
|
||||
>> = el as any;
|
||||
|
||||
return <Component className={rootClassName}>{children}</Component>;
|
||||
};
|
||||
|
||||
export default Container;
|
1
ui/Container/index.ts
Normal file
1
ui/Container/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./Container";
|
@ -1,15 +0,0 @@
|
||||
import cn from "classnames";
|
||||
import { FunctionComponent } from "react";
|
||||
import s from "./Navbar.module.css";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
children?: any;
|
||||
}
|
||||
|
||||
const Navbar: FunctionComponent<Props> = ({ children, className }) => {
|
||||
const rootClassName = cn(s.root, className);
|
||||
return <div className={rootClassName}>{children}</div>;
|
||||
};
|
||||
|
||||
export default Navbar;
|
3
ui/README.md
Normal file
3
ui/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# UI
|
||||
|
||||
Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpuse.
|
@ -1,2 +1,4 @@
|
||||
export { default as Button } from "./Button";
|
||||
export { default as Container } from "./Container";
|
||||
export { default as Featurebar } from "./Featurebar";
|
||||
export { default as Logo } from "./Logo";
|
||||
|
12
yarn.lock
12
yarn.lock
@ -1101,6 +1101,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
|
||||
integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
|
||||
|
||||
"@types/node@^14.11.2":
|
||||
version "14.11.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
|
||||
integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==
|
||||
|
||||
"@types/prop-types@*":
|
||||
version "15.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
|
||||
@ -3821,6 +3826,13 @@ postcss-nested@^4.1.1:
|
||||
postcss "^7.0.32"
|
||||
postcss-selector-parser "^6.0.2"
|
||||
|
||||
postcss-nested@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.0.tgz#0d05bb93578ec42919bdbda7d4eb419d5f58fe07"
|
||||
integrity sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==
|
||||
dependencies:
|
||||
postcss-selector-parser "^6.0.2"
|
||||
|
||||
postcss-nesting@^7.0.0:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
|
||||
|
Loading…
x
Reference in New Issue
Block a user