@bitcoin-os/mini-dock-status-bar

A TINY bottom status bar (mini dock) for Bitcoin OS web applications with micro icons (32px height, 20px app icons).

IMPORTANT: This is NOT a top taskbar - it's a bottom dock/status bar like macOS.

Installation

``bash npm install @bitcoin-os/mini-dock-status-bar`

`Usage`

`tsx import React from 'react'; import BitcoinDock, { defaultBitcoinApps } from '@bitcoin-os/dock';

function App() { return (


      {/ Your app content /}
              apps={defaultBitcoinApps}
        currentApp="Bitcoin Writer"
        onAppClick={(app) => {
          if (app.url) window.open(app.url, '_blank');
        }}
      />


  );
}


Props
$3

| Prop | Type | Default | Description | |------|------|---------|-------------| |apps | DockApp[] | []| Array of applications to display in the dock | |currentApp | string | undefined| ID or name of the currently active app | |showStatus | boolean | true| Whether to show the status bar on the right | |showWifi | boolean | true| Whether to show wifi indicator | |showBattery | boolean | true| Whether to show battery indicator | |showTime | boolean | true| Whether to show current time | |onAppClick | (app: DockApp) => void | undefined| Callback when an app is clicked | |className | string | '' | Additional CSS class name |

`$3`

`tsx interface DockApp { id?: string; // Unique identifier name: string; // Display name icon: LucideIcon | string; // Lucide icon component or image URL color: string; // Color class or 'rainbow' for rainbow effect url?: string; // URL to navigate to when clicked disabled?: boolean; // Whether the app is disabled current?: boolean; // Whether this is the current app isImage?: boolean; // Whether icon is an image URL }`

`Default Bitcoin Apps`

The package includes a pre-configured set of Bitcoin OS applications:

`tsx import { defaultBitcoinApps } from '@bitcoin-os/dock';``

This includes apps like Bitcoin Wallet, Bitcoin Email, Bitcoin Music, Bitcoin Writer, and many more.

Styling

The component uses CSS modules and includes responsive design for mobile devices. The dock automatically adjusts its size and hides less important status indicators on smaller screens.

License

MIT © Bitcoin OS

Usage

tsx
import React from 'react';
import BitcoinDock, { defaultBitcoinApps } from '@bitcoin-os/dock';

function App() {
  return (


      {/ Your app content /}
              apps={defaultBitcoinApps}
        currentApp="Bitcoin Writer"
        onAppClick={(app) => {
          if (app.url) window.open(app.url, '_blank');
        }}
      />

);
}

Props

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
|

apps | DockApp[] | []

 | Array of applications to display in the dock |
|

currentApp | string | undefined

 | ID or name of the currently active app |
|

showStatus | boolean | true

 | Whether to show the status bar on the right |
|

showWifi | boolean | true

 | Whether to show wifi indicator |
|

showBattery | boolean | true

 | Whether to show battery indicator |
|

showTime | boolean | true

 | Whether to show current time |
|

onAppClick | (app: DockApp) => void | undefined

 | Callback when an app is clicked |
|

className | string | '' | Additional CSS class name |

$3

tsx
interface DockApp {
  id?: string;           // Unique identifier
  name: string;          // Display name
  icon: LucideIcon | string; // Lucide icon component or image URL
  color: string;         // Color class or 'rainbow' for rainbow effect
  url?: string;          // URL to navigate to when clicked
  disabled?: boolean;    // Whether the app is disabled
  current?: boolean;     // Whether this is the current app
  isImage?: boolean;     // Whether icon is an image URL
}