web3 v4 playground (#6945)

* web3 playground

* menu update

* playground on max screen

* updated style file

* 80% width

docs/docs/web3_playground.md

@@ -0,0 +1,6 @@
+---
+title: 'Web3.js Playground'
+---
+
+<iframe height="700px" id="playground-iframe"  width="80%"
+  max-width="80%"  src="https://stackblitz.com/edit/web3jsplayground?embed=1&file=index.ts&hideNavigation=0&view=editor&hideExplorer=0&showSidebar=1"></iframe> 

docs/docusaurus.config.js

@@ -137,6 +137,12 @@ const config = {
 						label: 'Glossary',
 						position: 'left',
 					},
+					{
+						to: '/web3_playground',
+						activeBasePath: '/',
+						label: 'Playground',
+						position: 'right',
+					},
 					{
 						href: 'https://github.com/ChainSafe/web3.js/tree/4.x/',
 						label: 'GitHub',

docs/src/css/custom.css

@@ -69,4 +69,13 @@ li[role="tab"] {
 
 .tabs-container .margin-top--md {
   margin-top: 0px !important;
-}
+}
+
+
+
+#playground-iframe {
+  width: 92vw; /* 92% of viewport width */
+  height: 700px; /* Adjust height as needed */
+  margin: 0; /* Remove any default margins */
+  padding: 0; /* Remove any default padding */
+}