Status Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!-- Status Menu -->
<div class="relative inline-block">
  <button
    id="status-button"
    class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
    onclick="toggleDropdown('status-menu')"
  >
    <span id="current-status" class="flex items-center gap-2">
      <span class="w-2.5 h-2.5 bg-emerald-500 rounded-full"></span>
      <span>Active</span>
    </span>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>

  <div
    id="status-menu"
    class="hidden absolute left-0 z-20 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden"
  >
    <div class="px-4 py-3 border-b border-gray-100">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Change Status</p>
    </div>

    <div class="py-2">
      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="active" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-emerald-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Active</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="away" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-amber-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Away</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="busy" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-red-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Busy</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>

      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-blue-50 transition-colors" data-status="offline" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-gray-400 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Appear Offline</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>

    <div class="border-t border-gray-100 py-2">
      <button class="status-option w-full flex items-center justify-between px-4 py-3 hover:bg-red-50 transition-colors" data-status="dnd" onclick="setStatus(this)">
        <div class="flex items-center gap-3">
          <span class="w-3 h-3 bg-red-600 rounded-full relative">
            <span class="absolute inset-0 bg-red-600 rounded-full animate-ping opacity-75"></span>
          </span>
          <span class="text-sm font-medium text-gray-900">Do Not Disturb</span>
        </div>
        <svg class="w-4 h-4 text-blue-600 hidden check-icon" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  function setStatus(element) {
    const status = element.getAttribute('data-status');
    const statusDisplay = document.getElementById('current-status');
    
    const statusConfig = {
      'active': { color: 'bg-emerald-500', label: 'Active' },
      'away': { color: 'bg-amber-500', label: 'Away' },
      'busy': { color: 'bg-red-500', label: 'Busy' },
      'offline': { color: 'bg-gray-400', label: 'Appear Offline' },
      'dnd': { color: 'bg-red-600', label: 'Do Not Disturb' }
    };
    
    const config = statusConfig[status];
    
    statusDisplay.innerHTML = `
      <span class="w-2.5 h-2.5 ${config.color} rounded-full"></span>
      <span>${config.label}</span>
    `;
    
    document.querySelectorAll('.status-option').forEach(opt => {
      opt.classList.remove('bg-blue-50');
      opt.querySelector('.check-icon').classList.add('hidden');
    });
    
    element.classList.add('bg-blue-50');
    element.querySelector('.check-icon').classList.remove('hidden');
    
    toggleDropdown('status-menu');
  }

  document.addEventListener('click', function(event) {
    const container = document.querySelector('.relative.inline-block');
    if (!container.contains(event.target)) {
      document.getElementById('status-menu').classList.add('hidden');
    }
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Status Menu

Status selection dropdown.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Status options with color cues

## Usage

```bash
npx devsnips add Tailwind/Components/Dropdowns/status-menu
```

Copy from `code.html`.

## Customization

- Status colors, item styles

## Accessibility

- Do not rely on color alone for status

## Dependencies

- Tailwind CSS; JS as present

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`