feat: Finish version 1.2.4 of the Component-Libary and its content

Author: Michaelninder

assets/script.js

@@ -0,0 +1,68 @@
+document.addEventListener('DOMContentLoaded', async () => {
+  const navContainer = document.getElementById('nav-container');
+  const previewContainer = document.getElementById('preview-container');
+  const codeContainer = document.getElementById('code-container');
+  const titleEl = document.getElementById('component-title');
+  const idEl = document.getElementById('component-id');
+  const codeWrapper = document.getElementById('code-block-wrapper');
+
+  try {
+    const response = await fetch('data/components.json');
+    const components = await response.json();
+    renderNavigation(components);
+  } catch (error) {
+    console.error('Failed to load library:', error);
+  }
+
+  function renderNavigation(components) {
+    const categories = {};
+
+    components.forEach((c) => {
+      if (!categories[c.category]) categories[c.category] = [];
+      categories[c.category].push(c);
+    });
+
+    Object.keys(categories).forEach((cat) => {
+      const group = document.createElement('div');
+      group.className = 'mb-6';
+      
+      const title = document.createElement('h3');
+      title.className =
+        'text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2';
+      title.textContent = cat;
+      group.appendChild(title);
+
+      categories[cat].forEach((item) => {
+        const btn = document.createElement('button');
+        btn.className =
+          'w-full text-left px-3 py-2 text-sm text-gray-600 rounded-lg hover:bg-gray-100 hover:text-gray-900 transition-colors mb-1';
+        btn.textContent = item.name;
+        btn.onclick = () => loadComponent(item);
+        group.appendChild(btn);
+      });
+
+      navContainer.appendChild(group);
+    });
+  }
+
+  async function loadComponent(item) {
+    try {
+      const response = await fetch(item.path);
+      const html = await response.text();
+
+      previewContainer.innerHTML = html;
+      codeContainer.textContent = html;
+      titleEl.textContent = item.name;
+      idEl.textContent = item.id;
+      codeWrapper.classList.remove('hidden');
+    } catch (e) {
+      previewContainer.innerHTML = '<span class="text-red-500">Error loading component</span>';
+    }
+  }
+});
+
+window.copyCode = () => {
+  const code = document.getElementById('code-container').textContent;
+  navigator.clipboard.writeText(code);
+  alert('Copied to clipboard!');
+};

components/dropdowns/other-dropdown.html

@@ -0,0 +1,37 @@
+<div class="relative inline-block text-left">
+  <button type="button" class="flex items-center space-x-2 rounded-full border border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 p-1 backdrop-blur-sm transition-all duration-200 hover:ring-2 hover:ring-primary-500">
+    <img src="https://ui-avatars.com/api/?name=Fabian+Ternis&background=random" alt="User Avatar" class="h-8 w-8 rounded-full border border-gray-200 dark:border-gray-700 object-cover" />
+    <svg class="h-4 w-4 text-gray-600 dark:text-gray-400 transition-colors" 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" /></svg>
+  </button>
+  <div class="absolute right-0 mt-2 w-64 origin-top-right rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-xl z-50">
+    <div class="border-b border-gray-200 dark:border-gray-800 p-4">
+      <div class="flex items-center space-x-3">
+        <img src="https://ui-avatars.com/api/?name=Fabian+Ternis&background=random" alt="User Avatar" class="h-10 w-10 rounded-full border border-gray-200 dark:border-gray-700 object-cover" />
+        <div>
+          <p class="text-sm font-medium text-gray-900 dark:text-white">Fabian Ternis</p>
+          <p class="text-xs text-gray-600 dark:text-gray-400">fabian@mtex.dev</p>
+        </div>
+      </div>
+    </div>
+    <div class="p-2">
+      <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-700 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400">
+        <svg class="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+        Profile
+      </a>
+      <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-700 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400">
+        <svg class="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+        Dashboard
+      </a>
+      <a href="#" class="flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-700 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400">
+        <svg class="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+        Preview Portfolio
+      </a>
+    </div>
+    <div class="border-t border-gray-200 dark:border-gray-800 p-2">
+      <button type="button" class="flex w-full items-center rounded-md px-3 py-2 text-sm text-red-600 dark:text-red-400 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800">
+        <svg class="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
+        Sign Out
+      </button>
+    </div>
+  </div>
+</div>

components/dropdowns/some-dropdown.html

@@ -0,0 +1,32 @@
+<div class="relative inline-block text-left">
+  <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-600 dark:text-gray-300 bg-white/10 dark:bg-gray-800/10 hover:bg-white/30 dark:hover:bg-gray-800/30 focus:outline-none transition ease-in-out duration-150 backdrop-blur-sm">
+    <img class="h-8 w-8 rounded-full object-cover mr-2" src="https://ui-avatars.com/api/?name=John+Doe&background=random" alt="User Avatar">
+    <div>John Doe</div>
+    <svg class="ms-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+  </button>
+  <div class="origin-top-right absolute right-0 mt-2 w-52 rounded-2xl shadow-xl bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 border border-gray-200 dark:border-gray-700 focus:outline-none z-50">
+    <div class="p-1.5 flex flex-col gap-1">
+      <div class="px-3 py-2 text-xs text-gray-400">
+        <div class="font-medium text-sm text-gray-800 dark:text-gray-200">John Doe</div>
+        <div class="truncate text-gray-500">john.doe@xpsystems.eu</div>
+      </div>
+      <div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
+      <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm transition-all duration-150 rounded-xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/50">
+        <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-70"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8.25V18a2.25 2.25 0 0 0 2.25 2.25h13.5A2.25 2.25 0 0 0 21 18V8.25m-18 0V6a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 6v2.25m-18 0h18M5.25 6h.008v.008H5.25V6ZM7.5 6h.008v.008H7.5V6Zm2.25 0h.008v.008H9.75V6Z" /></svg>
+        Dashboard
+      </a>
+      <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm transition-all duration-150 rounded-xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/50">
+        <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-70"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
+        Profile
+      </a>
+      <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm transition-all duration-150 rounded-xl text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/50">
+        <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-70"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
+        Settings
+      </a>
+      <button type="button" class="w-full flex items-center justify-between px-3 py-2 text-sm transition-all duration-150 rounded-xl text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 group">
+        <span>Logout</span>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 opacity-70 group-hover:opacity-100 transition-opacity"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" /></svg>
+      </button>
+    </div>
+  </div>
+</div>

config.php

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

data/components.json

@@ -0,0 +1,14 @@
+[
+  {
+    "id": "5aad06c9-bc27-4be3-8b37-5102754195f1",
+    "category": "Dropdowns",
+    "name": "Some Dropdown",
+    "path": "components/dropdowns/some-dropdown.html"
+  },
+  {
+    "id": "d00482cd-526b-4d35-b5f8-4e101827b7b7",
+    "category": "Dropdowns",
+    "name": "Other Dropdown",
+    "path": "components/dropdowns/other-dropdown.html"
+  }
+]