feat: Add even more dropdowns ...

Author: Michaelninder

components/dropdowns/minimalist-command-dropdown.html

@@ -0,0 +1,35 @@
+<div class="relative inline-block text-left">
+  <button
+    type="button"
+    class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+    </svg>
+    <span>Menu</span>
+    <kbd class="ml-2 hidden rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400 md:inline-block">⌘K</kbd>
+  </button>
+
+  <div class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-800 dark:bg-gray-900">
+    <div class="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Project</div>
+    <a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-gray-600 hover:bg-primary-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-primary-900/20 dark:hover:text-primary-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+      </svg>
+      New Project
+    </a>
+    <a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-gray-600 hover:bg-primary-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-primary-900/20 dark:hover:text-primary-400">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0 1 20.25 6v12A2.25 2.25 0 0 1 18 20.25H6A2.25 2.25 0 0 1 3.75 18V6A2.25 2.25 0 0 1 6 3.75h1.5m9 0h-9" />
+        </svg>
+      Library
+    </a>
+    <div class="my-1 border-t border-gray-100 dark:border-gray-800"></div>
+    <a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+      </svg>
+      Delete Items
+    </a>
+  </div>
+</div>

components/dropdowns/rich-user-dashboard-dropdown.html

@@ -0,0 +1,42 @@
+<div class="relative inline-block text-left">
+  <button type="button" class="flex items-center gap-2 rounded-full border border-gray-200 bg-white p-1 pr-4 shadow-sm transition-all hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
+    <div class="relative">
+      <img src="https://ui-avatars.com/api/?name=FT&background=6366f1&color=fff" class="size-8 rounded-full" alt="User" />
+      <span class="absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-white bg-green-500 dark:border-gray-800"></span>
+    </div>
+    <div class="text-left">
+      <p class="text-xs font-bold text-gray-900 dark:text-white leading-tight">Fabian T.</p>
+      <p class="text-[10px] text-gray-500 leading-tight">Pro Plan</p>
+    </div>
+  </button>
+
+  <div class="absolute right-0 z-50 mt-2 w-64 origin-top-right divide-y divide-gray-100 rounded-2xl border border-gray-200 bg-white shadow-xl dark:divide-gray-800 dark:border-gray-700 dark:bg-gray-900">
+    <div class="p-4">
+      <div class="flex items-center gap-3">
+        <div class="flex size-10 items-center justify-center rounded-xl bg-primary-50 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+            </svg>
+        </div>
+        <div>
+          <p class="text-sm font-bold text-gray-900 dark:text-white">MTEX Developer</p>
+          <p class="text-xs text-gray-500">ID: #88219</p>
+        </div>
+      </div>
+    </div>
+    <div class="p-2">
+      <a href="#" class="group flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-gray-700 transition-all hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400 group-hover:text-primary-500">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
+        </svg>
+        Billing & Subscriptions
+      </a>
+      <a href="#" class="group flex items-center gap-3 rounded-xl px-3 py-2 text-sm text-gray-700 transition-all hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400 group-hover:text-primary-500"">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+        </svg>
+        Team Members
+      </a>
+    </div>
+  </div>
+</div>

config.php

@@ -1,6 +1,6 @@
 <?php
 
 return [
-    'APP_VERSION' => '1.4.1',
+    'APP_VERSION' => '1.4.2',
     'BRAND_NAME' => 'mtex.dev',
 ];

data/components.json

@@ -48,6 +48,20 @@
     "path": "components/dropdowns/glass-user-menu.html",
     "is_full": false
   },
+  {
+    "id": "a1b2c3d4-e5f6-4a7b-8c9d-0e1f2a3b4c5d",
+    "category": "Dropdowns",
+    "name": "Minimalist Command Dropdown",
+    "path": "components/dropdowns/minimalist-command-dropdown.html",
+    "is_full": false
+  },
+  {
+    "id": "f1e2d3c4-b5a6-4987-a1b2-c3d4e5f6g7h8",
+    "category": "Dropdowns",
+    "name": "Rich User Dashboard Dropdown",
+    "path": "components/dropdowns/rich-user-dashboard-dropdown.html",
+    "is_full": false
+  },
   {
     "id": "6e64699d-f807-4aeb-adf2-fb4f84623665",
     "category": "Auth",
@@ -76,4 +90,4 @@
     "path": "components/auth/alternative-registration-form.html",
     "is_full": true
   }
-]
+]