gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
1 lines • 3.63 kB
JavaScript
import"./main-v4-BFwmMcfm.js";var e=[{id:1,kind:"info",cat:"all",from:"Stripe",text:"Payment of $499.00 received from Acme Corp",time:"2 min ago",unread:!0},{id:2,kind:"task",cat:"reviews",from:"GitHub",text:"PR #248 ready for review on the analytics-pipeline repo",time:"14 min ago",unread:!0},{id:3,kind:"alert",cat:"all",from:"Linear",text:"GEN-128 marked as urgent — needs attention before EOD",time:"1 hour ago",unread:!0},{id:4,kind:"mention",cat:"mentions",from:"Sarah K.",text:'Mentioned you in a comment on "Q2 Marketing Campaign"',time:"2 hours ago",unread:!0},{id:5,kind:"info",cat:"all",from:"Vercel",text:"Deployment succeeded — gentelella-v4.vercel.app live in 28s",time:"3 hours ago",unread:!1},{id:6,kind:"task",cat:"reviews",from:"GitHub",text:"PR #246 was merged into main by Michael R.",time:"5 hours ago",unread:!1},{id:7,kind:"mention",cat:"mentions",from:"Notion",text:'You were mentioned in "Q2 OKRs" by Emily Wang',time:"Yesterday",unread:!1},{id:8,kind:"info",cat:"all",from:"Stripe",text:"Subscription renewed — Pro plan $29 billed for May 2026",time:"Yesterday",unread:!1},{id:9,kind:"alert",cat:"all",from:"System",text:"Scheduled maintenance window: April 30 02:00–04:00 UTC",time:"2 days ago",unread:!1},{id:10,kind:"task",cat:"reviews",from:"Linear",text:"GEN-129 assigned to you — fix table sort indicators",time:"2 days ago",unread:!1},{id:11,kind:"mention",cat:"mentions",from:"Diego R.",text:'Replied to your comment on "Customer feedback summary"',time:"3 days ago",unread:!1},{id:12,kind:"info",cat:"all",from:"Notion",text:'Page "API integration guide" was edited by Tom Hardy',time:"4 days ago",unread:!1}],t={info:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v3M8 11h.01"/></svg>',task:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8l3 3 7-7"/></svg>',alert:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1l7 13H1L8 1z"/><path d="M8 6v4"/><circle cx="8" cy="12" r="0.5"/></svg>',mention:'<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="3"/><path d="M11 8v1a2 2 0 004 0V8a7 7 0 10-2.7 5.5"/></svg>'},n="all";function i(){const i=document.getElementById("notif-list"),a=document.getElementById("notif-empty"),o="all"===n?e:e.filter("unread"===n?e=>e.unread:e=>e.cat===n);o.length?(a.hidden=!0,i.innerHTML=o.map(e=>`\n <button type="button" class="notification-row${e.unread?" unread":""}" data-id="${e.id}">\n <span class="notif-icon notif-${e.kind}" aria-hidden="true">${t[e.kind]||t.info}</span>\n <span class="notif-body">\n <span class="notif-from">${e.from}</span>\n <span class="notif-text">${e.text}</span>\n </span>\n <span class="notif-time">${e.time}</span>\n </button>\n `).join("")):(i.innerHTML="",a.hidden=!1);const r=e.filter(e=>e.unread).length,d=document.getElementById("count-unread");d.textContent=r,d.style.display=r?"":"none"}document.getElementById("notif-tabs").addEventListener("click",e=>{const t=e.target.closest(".chart-tab");t&&(n=t.dataset.filter,i())}),document.getElementById("notif-list").addEventListener("click",t=>{const n=t.target.closest(".notification-row");if(!n)return;const a=parseInt(n.dataset.id,10),o=e.find(e=>e.id===a);o&&(o.unread=!1),i()}),document.getElementById("mark-all-read").addEventListener("click",t=>{t.stopPropagation(),e.forEach(e=>{e.unread=!1}),i()}),i();