@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

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

Usage

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

function App() {
  return (
    <div>
      {/* Your app content */}
      <BitcoinDock 
        apps={defaultBitcoinApps}
        currentApp="Bitcoin Writer"
        onAppClick={(app) => {
          if (app.url) window.open(app.url, '_blank');
        }}
      />
    </div>
  );
}

Props

BitcoinDockProps

| 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 |

DockApp Interface

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:

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