scaffold rotating cube

Author: mayank1513

packages/shared/src/client/index.ts

@@ -7,6 +7,7 @@
  */
 
 // client component exports
+export * from "./rotating-cube";
 export * from "./demo";
 export * from "./header";
 export * from "./global-loader";

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

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./rotating-cube";

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

@@ -0,0 +1,3 @@
+.rotating-cube {
+  /* create your container styles here */
+}

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

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { RotatingCube } from "./rotating-cube";
+
+describe.concurrent("rotating-cube", () => {
+	afterEach(cleanup);
+
+	test("Dummy test - test if renders without errors", ({ expect }) => {
+		const clx = "my-class";
+		render(<RotatingCube className={clx} />);
+		expect(screen.getByTestId("rotating-cube").classList).toContain(clx);
+	});
+});

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

@@ -0,0 +1,25 @@
+import { HTMLProps, ReactNode } from "react";
+import styles from "./rotating-cube.module.scss";
+
+export interface RotatingCubeProps extends HTMLProps<HTMLDivElement> {
+	children?: ReactNode;
+}
+
+/**
+ * 
+ *
+ * @example
+ * ```tsx
+ * <RotatingCube />
+ * ```
+ * 
+ * @source - Source code
+ */
+export const RotatingCube = ({ children, ...props }: RotatingCubeProps) => {
+  const className = [props.className, styles["rotating-cube"]].filter(Boolean).join(" ");
+	return (
+		<div {...props} className={className} data-testid="rotating-cube">
+			{children}
+		</div>
+	);
+}