Skip to content

Commit 0713519

Browse files
atapasatapas
committed
feat: Now tested the shapes using the dummy data.
1 parent e284a36 commit 0713519

6 files changed

Lines changed: 277 additions & 10 deletions

File tree

‎components/core/App.js‎

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

5-
import { shapes } from '../../data/shapes';
5+
import { shapes } from "../../data/shapes";
6+
7+
const Shape = dynamic(import('react-clip-path'), { ssr: false })
8+
import Switch from "react-switch";
9+
10+
import {
11+
ShapeCards,
12+
ShapeCard,
13+
ShapeName,
14+
ShapePallete,
15+
ShapeDetailsItems,
16+
ShapeActions,
17+
ShapeHeader,
18+
CopyIcon,
19+
DownloadIcon,
20+
LikeIcon,
21+
} from "../utils/StyledComponents";
622

723
const App = (props) => {
824
const [data, setData] = useState([]);
@@ -19,16 +35,114 @@ const App = (props) => {
1935
});*/
2036

2137
console.log(shapes);
38+
let modifiedShapes = shapes.map((shape, index) => {
39+
shape.showAdvanced = false;
40+
return shape;
41+
});
42+
console.log(modifiedShapes);
2243

23-
await setData(shapes);
44+
await setData(modifiedShapes);
2445
setLoading(false);
2546
}, []);
2647

27-
return(
28-
<div>
29-
Test
30-
</div>
31-
)
48+
const handleSwicth = (shapeName) => {
49+
console.log(shapeName);
50+
51+
52+
let modifiedShapes = data.map((shape, index) => {
53+
if (shape.name === shapeName) {
54+
return {
55+
...shape,
56+
showAdvanced: !shape.showAdvanced
57+
}
58+
}
59+
return shape;
60+
});
61+
console.log(modifiedShapes);
62+
setData(...[modifiedShapes]);
63+
}
64+
65+
const getShapeFileName = (name) => {
66+
return name.split(" ").join("-");
67+
};
68+
69+
async function performCopy(event, formula) {
70+
event.preventDefault();
71+
try {
72+
await navigator.clipboard.writeText(formula);
73+
console.log("The clip-path formula copied to clipboard");
74+
} catch (err) {
75+
console.error("Failed to copy: ", err);
76+
}
77+
}
78+
79+
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>
145+
);
32146
};
33147

34148
export default App;

‎components/utils/StyledComponents.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import styled from "styled-components";
2+
import { FiCopy, FiDownload, FiHeart } from 'react-icons/fi';
3+
4+
const ShapeCards = styled.div`
5+
display: flex;
6+
flex-wrap: wrap;
7+
justify-content: center;
8+
align-items: center;
9+
`;
10+
11+
const ShapeCard = styled.div`
12+
height: 100%;
13+
border: 1px solid #ececec;
14+
border-radius: 4px;
15+
padding: 5px;
16+
margin: 5px;
17+
background-color: #ebebeb;
18+
`;
19+
20+
const ShapeActions = styled.div`
21+
float: right;
22+
`;
23+
24+
const ShapeName = styled.span`
25+
font-weight: bold;
26+
font-size: 20px;
27+
`;
28+
29+
const Playground = styled.div`
30+
width: 100%;
31+
`;
32+
33+
const ShapeDetails = styled.ul`
34+
background-color: #ebebeb;
35+
border-radius: 4px;
36+
padding: 10px;
37+
width: 100%;
38+
`;
39+
40+
const ShapeDetailsItems = styled.li`
41+
word-wrap: break-word;
42+
`;
43+
44+
const ShapePallete = styled.div`
45+
margin-top: 5px;
46+
`;
47+
48+
const ShapeHeader = styled.div`
49+
padding: 5px;
50+
margin: 5px;
51+
`;
52+
53+
const CopyIcon = styled(FiCopy)`
54+
cursor: pointer;
55+
&:hover {
56+
color: #f71b76;
57+
}
58+
`;
59+
60+
const DownloadIcon = styled(FiDownload)`
61+
cursor: pointer;
62+
&:hover {
63+
color: #f71b76;
64+
}
65+
`;
66+
67+
const LikeIcon = styled(FiHeart)`
68+
cursor: pointer;
69+
&:hover {
70+
color: #f71b6f;
71+
}
72+
`;
73+
74+
export {
75+
ShapeCards,
76+
ShapeCard,
77+
ShapeName,
78+
Playground,
79+
ShapeDetails,
80+
ShapeDetailsItems,
81+
ShapePallete,
82+
CopyIcon,
83+
DownloadIcon,
84+
LikeIcon,
85+
ShapeActions,
86+
ShapeHeader };

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
"dependencies": {
1111
"next": "^10.0.0",
1212
"react": "17.0.1",
13+
"react-clip-path": "^0.0.6",
1314
"react-dom": "17.0.1",
15+
"react-icons": "^4.2.0",
16+
"react-switch": "^6.0.0",
1417
"styled-components": "^5.3.0"
1518
},
1619
"devDependencies": {

‎pages/_app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
import '../styles/global.css';
3+
4+
export default function App({ Component, pageProps }) {
5+
return <Component {...pageProps} />;
6+
}

‎styles/global.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
html,
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
6+
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7+
line-height: 1.6;
8+
font-size: 18px;
9+
}
10+
11+
* {
12+
box-sizing: border-box;
13+
}
14+
15+
a {
16+
color: #0070f3;
17+
text-decoration: none;
18+
}
19+
20+
a:hover {
21+
text-decoration: underline;
22+
}
23+
24+
img {
25+
max-width: 100%;
26+
display: block;
27+
}
28+
29+
li {
30+
list-style: none;
31+
}
32+
33+
code {
34+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
35+
monospace;
36+
font-size: 87.5%;
37+
color: #e83e8c;
38+
word-wrap: break-word;
39+
}

‎yarn.lock‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1500,7 +1500,7 @@ process@0.11.10, process@^0.11.10:
15001500
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
15011501
integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
15021502

1503-
prop-types@15.7.2:
1503+
prop-types@15.7.2, prop-types@^15.7.2:
15041504
version "15.7.2"
15051505
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
15061506
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1576,6 +1576,13 @@ raw-body@2.4.1:
15761576
iconv-lite "0.4.24"
15771577
unpipe "1.0.0"
15781578

1579+
react-clip-path@^0.0.6:
1580+
version "0.0.6"
1581+
resolved "https://registry.yarnpkg.com/react-clip-path/-/react-clip-path-0.0.6.tgz#d9181cf89166d472470207fc2bb4ca059feed207"
1582+
integrity sha512-q3uU3GfqKBMzGzSsMYy1g550ctosfGm8+leNJlQTxA2oSqdzrid0lbLEaXrsP7uU01mT6HjYrFxQO6b5uqwHFg==
1583+
dependencies:
1584+
styled-components "^5.2.1"
1585+
15791586
react-dom@17.0.1:
15801587
version "17.0.1"
15811588
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -1585,6 +1592,11 @@ react-dom@17.0.1:
15851592
object-assign "^4.1.1"
15861593
scheduler "^0.20.1"
15871594

1595+
react-icons@^4.2.0:
1596+
version "4.2.0"
1597+
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
1598+
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
1599+
15881600
react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
15891601
version "16.13.1"
15901602
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -1595,6 +1607,13 @@ react-refresh@0.8.3:
15951607
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
15961608
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
15971609

1610+
react-switch@^6.0.0:
1611+
version "6.0.0"
1612+
resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
1613+
integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
1614+
dependencies:
1615+
prop-types "^15.7.2"
1616+
15981617
react@17.0.1:
15991618
version "17.0.1"
16001619
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -1821,7 +1840,7 @@ strip-ansi@6.0.0:
18211840
dependencies:
18221841
ansi-regex "^5.0.0"
18231842

1824-
styled-components@^5.3.0:
1843+
styled-components@^5.2.1, styled-components@^5.3.0:
18251844
version "5.3.0"
18261845
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.0.tgz#e47c3d3e9ddfff539f118a3dd0fd4f8f4fb25727"
18271846
integrity sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==

0 commit comments

Comments
 (0)