Skip to content

Commit 2026b61

Browse files
authored
Lorem ipsum (#29)
* Lorem ipsum * Change label
1 parent 37ae2b4 commit 2026b61

File tree

7 files changed

+125
-1
lines changed

7 files changed

+125
-1
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
- [x] 14. HTML Entity Encode / Decode
3030
- [x] 15. URL Encode / Decode
3131
- [x] 16. Backslash Encode / Decode
32+
- [x] 17. Lorem Ipsum Generator
3233

3334
## Demo
3435

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@
269269
"jsonwebtoken": "^8.5.1",
270270
"jsqr": "^1.4.0",
271271
"lodash": "^4.17.21",
272+
"lorem-ipsum": "^2.0.3",
272273
"marked": "^2.1.3",
273274
"pngjs": "^6.0.0",
274275
"qrcode": "^1.4.4",

src/components/Main.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import JsConsole from './notebook/JavaScript';
2222
import HtmlEntityCodec from './html/HtmlEntityCodec';
2323
import UrlCodec from './url/UrlCodec';
2424
import BackSlashCodec from './text/BackSlash';
25+
import LoremIpsum from './text/LoremIpsum';
2526

2627
interface MenuItem {
2728
path: string;
@@ -60,6 +61,13 @@ const defaultRoutes: MenuItem[] = [
6061
show: true,
6162
Component: RegexTester,
6263
},
64+
{
65+
icon: <FontAwesomeIcon icon="random" />,
66+
path: '/lorem-ipsum',
67+
name: 'Lorem Ipsum Generator',
68+
show: true,
69+
Component: LoremIpsum,
70+
},
6371
{
6472
icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
6573
path: '/markdown-to-html',

src/components/text/LoremIpsum.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { clipboard } from 'electron';
3+
import { loremIpsum } from 'lorem-ipsum';
4+
5+
type Unit = 'words' | 'sentences' | 'paragraphs';
6+
type Format = 'html' | 'plain';
7+
8+
const LoremIpsum = () => {
9+
const [output, setOutput] = useState('');
10+
const [copied, setCopied] = useState(false);
11+
const [units, setUnits] = useState<Unit>('paragraphs');
12+
const [format, setFormat] = useState<Format>('plain');
13+
const [count, setCount] = useState(5);
14+
15+
const handleCopyOutput = () => {
16+
setCopied(true);
17+
clipboard.write({ text: output });
18+
setTimeout(() => setCopied(false), 500);
19+
};
20+
21+
const unitsList = ['words', 'sentences', 'paragraphs'];
22+
const formatList = [
23+
{
24+
f: 'html',
25+
l: 'HTML',
26+
},
27+
{
28+
f: 'plain',
29+
l: 'Text',
30+
},
31+
];
32+
33+
useEffect(() => {
34+
setOutput(loremIpsum({ units, count, format }));
35+
}, [units, count, format]);
36+
37+
return (
38+
<div className="flex flex-col min-h-full">
39+
<div className="flex justify-between mb-1">
40+
<span className="flex space-x-4">
41+
<input
42+
type="number"
43+
className="w-20 text-center"
44+
value={count}
45+
onChange={(e) => setCount(parseInt(e.target.value, 10) || 5)}
46+
/>
47+
48+
{unitsList.map((unit) => (
49+
<label
50+
htmlFor={unit}
51+
className="flex items-center space-x-1"
52+
key={unit}
53+
>
54+
<input
55+
type="radio"
56+
className="btn"
57+
name="unit"
58+
id={unit}
59+
checked={unit === units}
60+
onChange={() => setUnits(unit as Unit)}
61+
/>
62+
<p>{unit}</p>
63+
</label>
64+
))}
65+
</span>
66+
67+
<span className="flex items-center justify-center space-x-4">
68+
{formatList.map(({ f, l }) => (
69+
<label htmlFor={f} className="flex items-center space-x-1" key={f}>
70+
<input
71+
type="radio"
72+
className="btn"
73+
name="format"
74+
id={f}
75+
checked={f === format}
76+
onChange={() => setFormat(f as Format)}
77+
/>
78+
<p>{l}</p>
79+
</label>
80+
))}
81+
</span>
82+
83+
<button
84+
type="button"
85+
className="w-16 btn"
86+
onClick={handleCopyOutput}
87+
disabled={copied}
88+
>
89+
{copied ? 'Copied' : 'Copy'}
90+
</button>
91+
</div>
92+
<div className="flex flex-1 min-h-full space-x-2">
93+
<textarea
94+
className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
95+
value={output}
96+
readOnly
97+
/>
98+
</div>
99+
</div>
100+
);
101+
};
102+
103+
export default LoremIpsum;

src/helpers/fontAwesome.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
faLink,
2727
faFileCode,
2828
faSlash,
29+
faRandom,
2930
} from '@fortawesome/free-solid-svg-icons';
3031

3132
library.add(
@@ -52,5 +53,6 @@ library.add(
5253
faLink,
5354
faFileCode,
5455
faSlash,
56+
faRandom,
5557
faCheck
5658
);

src/main.dev.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ const createWindow = async () => {
8888
mainWindow = new BrowserWindow({
8989
show: false,
9090
width: 1024,
91+
minWidth: 1024,
9192
height: 728,
93+
minHeight: 728,
9294
icon: getAssetPath('icon.png'),
9395
webPreferences: {
9496
nodeIntegration: true,

yarn.lock

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3716,7 +3716,7 @@ [email protected]:
37163716
dependencies:
37173717
graceful-readlink ">= 1.0.0"
37183718

3719-
commander@^2.19.0, commander@^2.20.0:
3719+
commander@^2.17.1, commander@^2.19.0, commander@^2.20.0:
37203720
version "2.20.3"
37213721
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
37223722
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -8248,6 +8248,13 @@ loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4
82488248
dependencies:
82498249
js-tokens "^3.0.0 || ^4.0.0"
82508250

8251+
lorem-ipsum@^2.0.3:
8252+
version "2.0.3"
8253+
resolved "https://registry.yarnpkg.com/lorem-ipsum/-/lorem-ipsum-2.0.3.tgz#9f1fa634780c9f58a349d4e091c3ba74f733164e"
8254+
integrity sha512-CX2r84DMWjW/DWiuzicTI9aRaJPAw2cvAGMJYZh/nx12OkTGqloj8y8FU0S8ZkKwOdqhfxEA6Ly8CW2P6Yxjwg==
8255+
dependencies:
8256+
commander "^2.17.1"
8257+
82518258
loud-rejection@^1.0.0:
82528259
version "1.6.0"
82538260
resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"

0 commit comments

Comments
 (0)