doc: write documentation for useBattery

pages/hooks/_meta.json

@@ -1,5 +1,6 @@
 {
   "use-abort-controller": "useAbortController",
+  "use-battery":"useBattery",
   "use-fetch": "useFetch",
   "use-history": "useHistory",
   "use-local-storage": "useLocalStorage",

pages/hooks/use-battery.mdx

@@ -0,0 +1,95 @@
+# useBattery
+
+<h3 className="mt-4 text-xl font-normal text-gray-400">A custom hook for fetching battery status information.</h3>
+
+## Add hook
+
+Create a file `use-battery.ts` and copy & paste the code from [useBattery](/hooks/use-battery#hook).
+
+## Usage
+
+```tsx {3,6}
+
+import React, { useEffect, useState } from 'react';
+import { useBattery } from './useBattery';
+
+function App() {
+    const batteryInfo = useBattery();
+
+    if (!batteryInfo) {
+        return <div>Battery status unavailable</div>;
+    }
+
+    return (
+        <div>
+            <h1>Battery Status</h1>
+            <p>Charging: {batteryInfo.charging ? 'Yes' : 'No'}</p>
+            <p>Charging Time: {batteryInfo.chargingTime}</p>
+            <p>Discharging Time: {batteryInfo.dischargingTime}</p>
+            <p>Level: {batteryInfo.level}</p>
+        </div>
+    );
+}
+
+export default App;
+
+```
+
+## Hook
+
+```ts
+
+import { useEffect, useState } from 'react'
+
+interface BatteryManager {
+    charging: boolean
+    chargingTime: number
+    dischargingTime: number
+    level: number
+}
+
+export const useBattery = (): BatteryManager | undefined => {
+    const [battery, setBattery] = useState<BatteryManager>()
+
+    const updateBatteryStatus = async () => {
+        try {
+            /* eslint-disable  @typescript-eslint/no-explicit-any */
+            const batteryInfo: BatteryManager = await (navigator as any).getBattery()
+
+            if (batteryInfo) {
+                setBattery(batteryInfo)
+            }
+        } catch (error) {
+            console.error('Error getting battery status:', error)
+        }
+    }
+
+    useEffect(() => {
+        updateBatteryStatus()
+
+        const intervalId = setInterval(updateBatteryStatus, 30000)
+
+        return () => clearInterval(intervalId)
+    }, [])
+
+    return battery
+}
+
+```
+## API
+
+[`useBattery(): BatteryManager | undefined`](/hooks/use-battery#hook)
+
+A custom hook for fetching battery status information in a React application.
+
+ <h1 className='text-xl font-medium mt-6'>Returns</h1>
+
+An object containing the following properties:
+
+| Name             | Type      | Description                                                             |
+| ---------------- | --------- | ----------------------------------------------------------------------- |
+| `charging`       | `boolean` | Indicates whether the battery is currently charging.                   |
+| `chargingTime`   | `number`  | The estimated time, in seconds, until the battery is fully charged.    |
+| `dischargingTime`| `number`  | The estimated time, in seconds, until the battery is fully discharged. |
+| `level`          | `number`  | The battery level, expressed as a percentage (0 to 1).                 |
+

theme.config.jsx

@@ -53,14 +53,10 @@ const config = {
   },
   sidebar: {
     titleComponent({ title, type }) {
-      const newHooks = ["useTimeout", "usePersistent", "useFetch"];
-
       return (
         <div className="flex items-center justify-between relative w-full">
           <div>{title}</div>
-          {(title === "useTimeout" ||
-            title === "usePersistentState" ||
-            title === "useFetch") && (
+          {title === "useBattery" && (
             <Badge className=" absolute -right-[0.5em] bg-transparent border-lime-400 text-lime-500 px-[0.5em] hover:bg-transparent">
               New
             </Badge>