Skip to content

Commit 4728770

Browse files
atapasatapas
committed
feat: Added the Toaster component. Now showing a success message on copying the clip-path value
1 parent 0713519 commit 4728770

6 files changed

Lines changed: 117 additions & 79 deletions

File tree

‎components/core/App.js‎

Lines changed: 82 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useEffect, useState } from "react";
2-
import dynamic from 'next/dynamic';
2+
import dynamic from "next/dynamic";
33
import { harperFetch } from "../../utils/HarperFetch";
44

55
import { shapes } from "../../data/shapes";
66

7-
const Shape = dynamic(import('react-clip-path'), { ssr: false })
7+
import toast from "react-hot-toast";
8+
9+
const Shape = dynamic(import("react-clip-path"), { ssr: false });
810
import Switch from "react-switch";
911

1012
import {
@@ -13,8 +15,9 @@ import {
1315
ShapeName,
1416
ShapePallete,
1517
ShapeDetailsItems,
18+
ShapeCardSwitch,
1619
ShapeActions,
17-
ShapeHeader,
20+
ShapeCardHeader,
1821
CopyIcon,
1922
DownloadIcon,
2023
LikeIcon,
@@ -47,20 +50,19 @@ const App = (props) => {
4750

4851
const handleSwicth = (shapeName) => {
4952
console.log(shapeName);
50-
5153

5254
let modifiedShapes = data.map((shape, index) => {
5355
if (shape.name === shapeName) {
5456
return {
5557
...shape,
56-
showAdvanced: !shape.showAdvanced
57-
}
58+
showAdvanced: !shape.showAdvanced,
59+
};
5860
}
5961
return shape;
6062
});
6163
console.log(modifiedShapes);
6264
setData(...[modifiedShapes]);
63-
}
65+
};
6466

6567
const getShapeFileName = (name) => {
6668
return name.split(" ").join("-");
@@ -70,78 +72,86 @@ const App = (props) => {
7072
event.preventDefault();
7173
try {
7274
await navigator.clipboard.writeText(formula);
75+
toast.success("Successfully Copied!");
7376
console.log("The clip-path formula copied to clipboard");
7477
} catch (err) {
7578
console.error("Failed to copy: ", err);
7679
}
7780
}
7881

7982
return (
80-
<ShapePallete>
81-
<h2>Available Shapes({shapes.length})</h2>
82-
<ShapeCards>
83-
{data.map((shape, index) => (
84-
<React.Fragment key={index}>
85-
<ShapeCard>
86-
<ShapeHeader>
87-
<ShapeName>{shape.name}</ShapeName>
88-
<ShapeActions>
89-
<span title="Like">
90-
<LikeIcon size={24} />
91-
</span>{" "}
92-
<span title="Download">
93-
<DownloadIcon
94-
size={24}
95-
onClick={(event) =>
96-
saveAsPng(
97-
event,
98-
`${getShapeFileName(shape.name)}-id`,
99-
getShapeFileName(shape.name)
100-
)
101-
}
102-
/>
103-
</span>
104-
</ShapeActions>
105-
</ShapeHeader>
106-
<Shape
107-
width="300px"
108-
height="300px"
109-
name={shape.name}
110-
id={`${getShapeFileName(shape.name)}-id`}
111-
backgroundColor="#eb3d86"
112-
showShadow={shape.showAdvanced}
113-
/>
114-
115-
<label htmlFor={`${getShapeFileName(shape.name)}-form`}>
116-
<span>Show Advanced</span>{' '}
117-
<Switch
118-
onChange={() => handleSwicth(shape.name)}
119-
checked={shape.showAdvanced}
120-
id={`${getShapeFileName(shape.name)}-form`}
121-
/>
122-
</label>
123-
124-
{shape.showAdvanced && (
125-
<ShapeDetailsItems>
126-
<span>
127-
<b>Clip-Path:</b>{" "}
128-
<code>
129-
<b>{shape.formula}</b>
130-
</code>
131-
</span>{" "}
132-
<span title="Copy">
133-
<CopyIcon
134-
size={24}
135-
onClick={(event) => performCopy(event, shape.formula)}
136-
/>
137-
</span>
138-
</ShapeDetailsItems>
139-
)}
140-
</ShapeCard>
141-
</React.Fragment>
142-
))}
143-
</ShapeCards>
144-
</ShapePallete>
83+
<>
84+
{loading ? (
85+
<h1>Loading...</h1>
86+
) : (
87+
<ShapePallete>
88+
<ShapeCards>
89+
{data.map((shape, index) => (
90+
<React.Fragment key={index}>
91+
<ShapeCard>
92+
<ShapeCardHeader>
93+
<ShapeName>{shape.name}</ShapeName>
94+
<ShapeActions>
95+
<span title="Like">
96+
<LikeIcon size={24} />
97+
</span>{" "}
98+
<span title="Download">
99+
<DownloadIcon
100+
size={24}
101+
onClick={(event) =>
102+
saveAsPng(
103+
event,
104+
`${getShapeFileName(shape.name)}-id`,
105+
getShapeFileName(shape.name)
106+
)
107+
}
108+
/>
109+
</span>
110+
</ShapeActions>
111+
</ShapeCardHeader>
112+
<Shape
113+
width="300px"
114+
height="300px"
115+
name={shape.name}
116+
id={`${getShapeFileName(shape.name)}-id`}
117+
backgroundColor="#eb3d86"
118+
showShadow={shape.showAdvanced}
119+
/>
120+
121+
<ShapeCardSwitch>
122+
<label htmlFor={`${getShapeFileName(shape.name)}-form`}>
123+
<span>Show Clip-Path Info</span>{" "}
124+
<Switch
125+
onChange={() => handleSwicth(shape.name)}
126+
checked={shape.showAdvanced}
127+
id={`${getShapeFileName(shape.name)}-form`}
128+
/>
129+
</label>
130+
</ShapeCardSwitch>
131+
132+
{shape.showAdvanced && (
133+
<ShapeDetailsItems>
134+
<span>
135+
<b>Clip-Path:</b>{" "}
136+
<code>
137+
<b>{shape.formula}</b>
138+
</code>
139+
</span>{" "}
140+
<span title="Copy">
141+
<CopyIcon
142+
size={24}
143+
onClick={(event) => performCopy(event, shape.formula)}
144+
/>
145+
</span>
146+
</ShapeDetailsItems>
147+
)}
148+
</ShapeCard>
149+
</React.Fragment>
150+
))}
151+
</ShapeCards>
152+
</ShapePallete>
153+
)}
154+
</>
145155
);
146156
};
147157

‎components/utils/StyledComponents.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const ShapeCards = styled.div`
99
`;
1010

1111
const ShapeCard = styled.div`
12-
height: 100%;
12+
width: 400px;
13+
min-height: 456px;
1314
border: 1px solid #ececec;
1415
border-radius: 4px;
1516
padding: 5px;
@@ -45,11 +46,15 @@ const ShapePallete = styled.div`
4546
margin-top: 5px;
4647
`;
4748

48-
const ShapeHeader = styled.div`
49+
const ShapeCardHeader = styled.div`
4950
padding: 5px;
5051
margin: 5px;
5152
`;
5253

54+
const ShapeCardSwitch = styled.div`
55+
margin: 5px auto auto 9px;
56+
`;
57+
5358
const CopyIcon = styled(FiCopy)`
5459
cursor: pointer;
5560
&:hover {
@@ -77,10 +82,11 @@ export {
7782
ShapeName,
7883
Playground,
7984
ShapeDetails,
80-
ShapeDetailsItems,
85+
ShapeDetailsItems,
86+
ShapeCardSwitch,
8187
ShapePallete,
8288
CopyIcon,
8389
DownloadIcon,
8490
LikeIcon,
8591
ShapeActions,
86-
ShapeHeader };
92+
ShapeCardHeader };

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react": "17.0.1",
1313
"react-clip-path": "^0.0.6",
1414
"react-dom": "17.0.1",
15+
"react-hot-toast": "^2.0.0",
1516
"react-icons": "^4.2.0",
1617
"react-switch": "^6.0.0",
1718
"styled-components": "^5.3.0"

‎pages/_app.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11

2+
// styles
23
import '../styles/global.css';
34

5+
// toaster
6+
import { Toaster } from "react-hot-toast";
7+
48
export default function App({ Component, pageProps }) {
5-
return <Component {...pageProps} />;
9+
return (
10+
<>
11+
<Toaster position="top-right" reverseOrder={false} />
12+
<Component {...pageProps} />
13+
</>
14+
);
615
}

‎pages/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { App } from "../components";
33

44
const index = (props) => {
55
return (
6-
<div>
6+
<main>
77
<App {...props} />
8-
</div>
8+
</main>
99
);
1010
};
1111

‎yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -882,6 +882,11 @@ globals@^11.1.0:
882882
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
883883
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
884884

885+
goober@^2.0.35:
886+
version "2.0.37"
887+
resolved "https://registry.yarnpkg.com/goober/-/goober-2.0.37.tgz#5598c41f4c19bc1fca2c926e876a58a685faffb8"
888+
integrity sha512-wgj5C7IJX2+MyHZ4TgOA+hLL1mCDW+jGorQ5KCMLF1ofE9gQkfbo1s8txIrzIsAX65XRTm0qaipolId2KMYUkw==
889+
885890
graceful-fs@^4.1.2:
886891
version "4.2.6"
887892
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
@@ -1592,6 +1597,13 @@ react-dom@17.0.1:
15921597
object-assign "^4.1.1"
15931598
scheduler "^0.20.1"
15941599

1600+
react-hot-toast@^2.0.0:
1601+
version "2.0.0"
1602+
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.0.0.tgz#6e83b2937a20b040acb2d5fd08bcf32561b7832a"
1603+
integrity sha512-J0J2rcSvKetlziVquwESgk85pV9JB0Dz3RJIZcAEv7CWU2y2z8BQqxmZHZUxjPKIBGPqXAocZch4Kj4oUdX4+w==
1604+
dependencies:
1605+
goober "^2.0.35"
1606+
15951607
react-icons@^4.2.0:
15961608
version "4.2.0"
15971609
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"

0 commit comments

Comments
 (0)