Add example of using the plugin

Author: mayank1513

examples/nextjs/src/app/page.tsx

@@ -1,6 +1,6 @@
 import MyButton from "./button";
 import { LandingPage } from "@repo/shared/dist/server";
-import { Demo } from "@repo/shared";
+import { Demo, RotatingCube } from "@repo/shared";
 
 export const metadata = {
   title: "Esbuild Plugin Webgl",
@@ -10,6 +10,7 @@ export const metadata = {
 export default function Page(): JSX.Element {
   return (
     <LandingPage title="Next.js Example">
+      <RotatingCube />
       <Demo />
       <MyButton />
     </LandingPage>

packages/shared/src/client/rotating-cube/rotating-cube.module.scss

@@ -1,5 +1,7 @@
 .cube {
   /* create your container styles here */
-  height: 400px;
-  width: 600px;
+  height: 480px;
+  width: 640px;
+  margin: auto;
+  display: block;
 }

packages/shared/src/client/rotating-cube/rotating-cube.test.tsx

@@ -4,7 +4,7 @@ import { mat4, glMatrix } from "gl-matrix";
 
 /** Create rotating Cube */
 export const createCube = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) => {
-  gl.clearColor(2.55, 2.55, 2.55, 1);
+  gl.clearColor(0, 0, 0, 0);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.enable(gl.DEPTH_TEST);
   gl.enable(gl.CULL_FACE);
@@ -162,7 +162,6 @@ export const createCube = (canvas: HTMLCanvasElement, gl: WebGLRenderingContext)
     mat4.mul(worldMatrix, yRotationMatrix, xRotationMatrix);
     gl.uniformMatrix4fv(matWorldUniformLocation, false, worldMatrix);
 
-    gl.clearColor(2.55, 2.55, 2.55, 1.0);
     gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
 
     gl.drawElements(gl.TRIANGLES, boxIndices.length, gl.UNSIGNED_SHORT, 0);

packages/shared/src/client/rotating-cube/utils.ts

@@ -17,6 +17,7 @@
   background: rgba(var(--card-rgb), 0);
   border: 1px solid rgba(var(--card-border-rgb), 0.1);
   cursor: pointer;
+  max-width: 300px;
   transition:
     background 200ms,
     border 200ms;