Status Bar
Hide Toggle
"Investor / anonymous mode" pill that flips between SHOW andHIDE to mask sensitive labels when sharing your screen. Pass a categories array to make it granular — the pill still toggles everything, but hovering reveals a menu to hide each category independently.
Preview
Custom categories
Hover the pill to choose what to hide. The master click toggles all at once; the label showsHIDE n/N when only some are hidden. Categories are fully custom — pass whatever keys your app understands.
Source
Copy this file to components/status/hide-toggle.tsx
tsx
'use client'
import * as React from 'react'
import { Eye, EyeOff } from 'lucide-react'
import { cn } from '@/lib/utils'
export interface HideCategory {
key: string // reported back through onChange, e.g. "exchanges"
label: string // shown in the hover menu, e.g. "Exchanges"
defaultHidden?: boolean
}
export interface HideToggleProps {
// Simple mode
hidden?: boolean
defaultHidden?: boolean
onChange?: (hidden: boolean) => void
// Category mode (pass `categories`)
categories?: HideCategory[]
hiddenKeys?: string[]
onCategoriesChange?: (hiddenKeys: string[]) => void
storageKey?: string | null
className?: string
}
// "Investor / anonymous mode" pill. Simple form flips SHOW <-> HIDE.
// Pass `categories` to make it granular: the pill toggles everything,
// hovering reveals a per-item menu (exchanges, coins, volumes, ...).
// Persists to localStorage when uncontrolled (storageKey).Props
| Prop | Type |
|---|---|
| hidden | boolean |
| defaultHidden | boolean |
| onChange | (hidden: boolean) => void |
| categories | HideCategory[] |
| hiddenKeys | string[] |
| onCategoriesChange | (hiddenKeys: string[]) => void |
| storageKey | string | null |
| className | string |