Skip to content

Commit 126b439

Browse files
mbrooksonmbrookson
committed
docs(example): Improve example site design
1 parent e8dc64f commit 126b439

File tree

12 files changed

+207
-142
lines changed

12 files changed

+207
-142
lines changed

‎example/components/TransitionSelect.tsx‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎example/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
/>
1414
<link
1515
rel="shortcut icon"
16-
href="./favicon.png"
16+
href="./logo.png"
1717
type="image/x-icon"
1818
>
1919
<link
2020
rel="icon"
21-
href="./favicon.png"
21+
href="./logo.png"
2222
type="image/x-icon"
2323
>
24-
<title>React Simple Modal Example</title>
24+
<title>React Simple Modal</title>
2525
</head>
2626

2727
<body>

‎example/index.tsx‎

Lines changed: 7 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,21 @@
11
import 'react-app-polyfill/ie11';
22
import * as React from 'react';
33
import * as ReactDOM from 'react-dom';
4-
import { ModalProvider, Modal, useModal, ModalTransition } from '../dist/index';
4+
import { ModalProvider, ModalTransition } from '../dist/index';
55
import '../dist/styles.css';
66
import './styles.css';
7-
import { TransitionSelect } from './components/TransitionSelect';
8-
9-
const ModalContent = ({ transition, onCloseClicked }) => {
10-
const { isModalOpen, openModal, closeModal } = useModal();
11-
const [toggle, setToggle] = React.useState(false);
12-
13-
return (
14-
<>
15-
<div>This modal can be closed by clicking the close button below.</div>
16-
<button
17-
className="p-3 bg-red-500 text-white rounded mt-4 mr-4"
18-
onClick={onCloseClicked}
19-
>
20-
Close this modal
21-
</button>
22-
<Modal
23-
id="2"
24-
content={<p>This modal can be closed by clicking the backdrop.</p>}
25-
isOpen={isModalOpen}
26-
onBackdropClick={closeModal}
27-
transition={transition}
28-
/>
29-
<div className="mt-8">
30-
Open another modal which will appear stacked on top of the current
31-
modal.
32-
</div>
33-
<button
34-
className="p-3 bg-blue-500 text-white rounded mt-4"
35-
onClick={openModal}
36-
>
37-
Open next modal
38-
</button>
39-
<div className="mt-8">
40-
Toggle some long content to see how react-simple-hook-modal behaves.
41-
</div>
42-
<button
43-
className="p-3 bg-blue-700 text-white rounded mt-4"
44-
onClick={() => setToggle(prev => !prev)}
45-
>
46-
Toggle long content
47-
</button>
48-
{toggle ? (
49-
<div className="mt-4">
50-
{[...Array(30)].map((e, i) => (
51-
<p key={i} className="mb-2">
52-
Are you using react-simple-hook-modal yet?
53-
</p>
54-
))}
55-
</div>
56-
) : null}
57-
</>
58-
);
59-
};
60-
61-
const Component = ({ transition }) => {
62-
const { isModalOpen, openModal, closeModal } = useModal();
63-
64-
return (
65-
<div>
66-
<h1 className="mb-4 text-2xl">React Simple Modal Example</h1>
67-
<a
68-
className="block mb-4 hover:text-blue-700"
69-
href="https://github.com/mbrookson/react-simple-hook-modal"
70-
target="_blank"
71-
rel="noopener noreferrer"
72-
>
73-
https://github.com/mbrookson/react-simple-hook-modal
74-
</a>
75-
<button
76-
className="p-3 bg-blue-500 text-white rounded"
77-
onClick={openModal}
78-
>
79-
Open modal
80-
</button>
81-
<Modal
82-
id="1"
83-
content={
84-
<ModalContent transition={transition} onCloseClicked={closeModal} />
85-
}
86-
isOpen={isModalOpen}
87-
transition={transition}
88-
/>
89-
</div>
90-
);
91-
};
7+
import { Header } from './src/Header';
8+
import { Example } from './src/Example';
9+
import { TransitionSelect } from './src/TransitionSelect';
9210

9311
const App = () => {
9412
const [transition, setTransition] = React.useState(ModalTransition.SCALE);
9513

9614
return (
9715
<ModalProvider>
98-
<div className="p-8">
99-
<Component transition={transition} />
100-
<TransitionSelect value={transition} onChange={setTransition} />
101-
</div>
16+
<Header />
17+
<Example transition={transition} />
18+
<TransitionSelect value={transition} onChange={setTransition} />
10219
</ModalProvider>
10320
);
10421
};

example/favicon.png renamed to example/logo.png

File renamed without changes.

‎example/package-lock.json‎

Lines changed: 16 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
},
1111
"dependencies": {
1212
"components": "^0.1.0",
13-
"react-app-polyfill": "^1.0.0"
13+
"react-app-polyfill": "^1.0.0",
14+
"react-icons": "^3.10.0"
1415
},
1516
"alias": {
1617
"react": "../node_modules/react",
@@ -25,7 +26,7 @@
2526
"cssnano": "^4.1.10",
2627
"parcel": "^1.12.3",
2728
"postcss-cli": "^7.1.0",
28-
"tailwindcss": "^1.2.0",
29+
"tailwindcss": "^1.3.5",
2930
"typescript": "^3.4.5"
3031
}
31-
}
32+
}

‎example/postcss.config.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,10 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
77
});
88

99
module.exports = {
10-
plugins: [tailwindcss(), autoprefixer(), cssnano(), purgecss],
10+
plugins: [
11+
tailwindcss(),
12+
autoprefixer(),
13+
cssnano(),
14+
...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
15+
],
1116
};

‎example/src/Example.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import * as React from 'react';
2+
import { Modal, useModal } from '../../dist/index';
3+
4+
const ModalContent = ({ transition, onCloseClicked }) => {
5+
const { isModalOpen, openModal, closeModal } = useModal();
6+
const [toggle, setToggle] = React.useState(false);
7+
8+
return (
9+
<>
10+
<div>This modal can be closed by clicking the close button below.</div>
11+
<button
12+
className="p-3 bg-red-500 text-white rounded mt-4 mr-4"
13+
onClick={onCloseClicked}
14+
>
15+
Close this modal
16+
</button>
17+
<Modal
18+
id="2"
19+
content={<p>This modal can be closed by clicking the backdrop.</p>}
20+
isOpen={isModalOpen}
21+
onBackdropClick={closeModal}
22+
transition={transition}
23+
/>
24+
<div className="mt-8">
25+
Open another modal which will appear stacked on top of the current
26+
modal.
27+
</div>
28+
<button
29+
className="p-3 bg-blue-500 text-white rounded mt-4"
30+
onClick={openModal}
31+
>
32+
Open next modal
33+
</button>
34+
<div className="mt-8">
35+
Toggle some long content to see how react-simple-hook-modal behaves.
36+
</div>
37+
<button
38+
className="p-3 bg-blue-700 text-white rounded mt-4"
39+
onClick={() => setToggle(prev => !prev)}
40+
>
41+
Toggle long content
42+
</button>
43+
{toggle ? (
44+
<div className="mt-4">
45+
{[...Array(30)].map((e, i) => (
46+
<p key={i} className="mb-2">
47+
Are you using react-simple-hook-modal yet?
48+
</p>
49+
))}
50+
</div>
51+
) : null}
52+
</>
53+
);
54+
};
55+
56+
export const Example = ({ transition }) => {
57+
const { isModalOpen, openModal, closeModal } = useModal();
58+
59+
return (
60+
<div className="container pt-8">
61+
<h2 className="text-xl text-gray-800 font-bold mb-4">
62+
Click the button below to see an example modal
63+
</h2>
64+
<button
65+
className="p-3 bg-blue-500 text-white rounded"
66+
onClick={openModal}
67+
>
68+
Open modal
69+
</button>
70+
<Modal
71+
id="1"
72+
content={
73+
<ModalContent transition={transition} onCloseClicked={closeModal} />
74+
}
75+
isOpen={isModalOpen}
76+
transition={transition}
77+
/>
78+
</div>
79+
);
80+
};

‎example/src/Header.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
import { FaGithub } from 'react-icons/fa';
3+
// @ts-ignore
4+
import images from '../*.png';
5+
6+
export const Header = () => {
7+
return (
8+
<div className="bg-blue-800 text-white py-24 text-center md:text-right">
9+
<div className="container">
10+
<div className="flex flex-col md:flex-row items-center">
11+
<div className="flex-1 md:pr-16">
12+
<h1 className="mb-4 text-5xl font-bold">React Simple Modal</h1>
13+
<div className="flex flex-row items-center justify-center md:justify-end pb-8">
14+
<FaGithub className="inline" />
15+
<a
16+
className="ml-2 hover:text-blue-300 transition transition-colors duration-200"
17+
href="https://github.com/mbrookson/react-simple-hook-modal"
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
>
21+
View on Github
22+
</a>
23+
</div>
24+
</div>
25+
<div className="flex-1">
26+
<img src={images.logo} />
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
};

0 commit comments

Comments
 (0)