components/Wordcloud.tsx

@@ -72,19 +72,21 @@ export default function Wordcloud({
         random={fixedValueGenerator}
       >
         {(cloudWords) =>
-          cloudWords.map((w, i) => (
-            <Text
-              key={w.text}
-              fill={colors[i % colors.length]}
-              textAnchor={"middle"}
-              transform={`translate(${w.x ?? 0}, ${w.y ?? 0})`}
-              fontSize={w.size}
-              fontFamily={w.font}
-              fontWeight={300}
-            >
-              {w.text}
-            </Text>
-          ))
+          cloudWords.map((w, i) => {
+            return (
+              <Text
+                key={w.text}
+                fill={colors[i % colors.length]}
+                textAnchor={"middle"}
+                transform={`translate(${w.x ?? 0}, ${w.y ?? 0})`}
+                fontSize={w.size}
+                fontFamily={w.font}
+                fontWeight={300}
+              >
+                {w.text}
+              </Text>
+            );
+          })
         }
       </VisxWordcloud>
       {showControls && (

pages/playground.tsx

@@ -6,11 +6,11 @@ import { ColorPalette } from "../components/ColorPalette";
 
 export default function Home() {
   return (
-    <>
+    <div style={{ padding: "20px" }}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
       <ColorPalette />
       <Wordcloud width={2000} height={1000} showControls />
-    </>
+    </div>
   );
 }