Add playground page

README.md

@@ -135,3 +135,13 @@ onClick={(e) => {
 | `showSpinner`        | `boolean`            | Determines whether to accompany the loading bar with a spinner. Turned off by default.                       | `false`      |
 | `ignoreSearchParams` | `boolean`            | Determines whether to ignore search parameters in the URL when triggering the loader. Turned off by default. | `false`      |
 | `dir`                | `ltr` or `rtl`       | Sets the direction of the top-loading bar.                                                                   | `ltr`      |
+
+## Playground
+
+A simple playground page is available for testing HolyLoader.
+
+### Instructions
+
+1. Navigate to the `src/pages/Playground.tsx` file.
+2. Modify the `Playground` component as needed to test different configurations of HolyLoader.
+3. Run the application and visit the playground page to see the changes in action.

biome.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
   "files": {
-    "include": ["src/**/*.ts"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/pages/Playground.tsx"],
     "ignore": ["dist", ".github", "node_modules"]
   },
   "formatter": {

src/__tests__/Playground.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Playground from '../pages/Playground';
+
+describe('Playground', () => {
+  it('renders the Playground component', () => {
+    render(<Playground />);
+    const heading = screen.getByText(/Playground/i);
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('renders the HolyLoader component', () => {
+    render(<Playground />);
+    const loader = screen.getByText(/This is a simple playground page for testing HolyLoader./i);
+    expect(loader).toBeInTheDocument();
+  });
+});

src/pages/Playground.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import HolyLoader from 'holy-loader';
+
+const Playground: React.FC = () => {
+  return (
+    <div>
+      <h1>Playground</h1>
+      <HolyLoader />
+      <p>This is a simple playground page for testing HolyLoader.</p>
+    </div>
+  );
+};
+
+export default Playground;