feat: add examples to development page

Author: ChrisUser

package.json

@@ -2,7 +2,7 @@
     "name": "react-usage-bar",
     "version": "1.2.1",
     "description": "Usage bar, graphic component for React",
-    "main": "dist/main.js",
+    "main": "dist/main.mjs",
     "types": "dist/main.d.ts",
     "files": [
         "dist"
@@ -15,7 +15,7 @@
         "url": "https://github.com/ChrisUser/react-usage-bar.git"
     },
     "scripts": {
-        "dev": "vite",
+        "start": "vite",
         "build": "tsc --p ./tsconfig-build.json && vite build",
         "test": "react-scripts test",
         "prepublishOnly": "yarn build",

src/main.tsx

@@ -1,8 +1,48 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import UsageBar from '../lib/UsageBar'
 
 const App = () => {
-    return <div>ok</div>
+    const itemsToDisplay = [
+        {
+            name: 'UI',
+            value: 10,
+            color: '#000000'
+        },
+        {
+            name: 'Photos',
+            value: 30
+        },
+        {
+            name: 'Videos',
+            value: 15
+        },
+        {
+            name: 'System Data',
+            value: 33
+        },
+        {
+            name: 'Other',
+            value: 8
+        }
+    ]
+
+    return (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', gap: 32, width: '100%', marginTop: 24 }}>
+            <div style={{ padding: '24px 0', width: '60%' }}>
+                <UsageBar showFallbackColors items={itemsToDisplay} total={100} />
+            </div>
+            <div style={{ padding: '24px 0', width: '60%' }}>
+                <UsageBar showFallbackColors compactLayout items={itemsToDisplay} total={100} />
+            </div>
+            <div style={{ padding: '24px 0', width: '60%' }}>
+                <UsageBar showFallbackColors compactLayout showLabels={false} items={itemsToDisplay} total={100} />
+            </div>
+            <div style={{ padding: '24px 0', width: '60%' }}>
+                <UsageBar darkMode showFallbackColors compactLayout showLabels={false} items={itemsToDisplay} total={100} />
+            </div>
+        </div>
+    )
 }
 
 ReactDOM.createRoot(document.getElementById('root')!).render(