Suche: vollständig - alle Tools, Einstellungen, Elektro-Sektionen, Todos, Dateien, Push, Kalender, QR-Codes

This commit is contained in:
2026-06-05 09:45:05 +02:00
parent a2527b8541
commit f5988d3af6
2 changed files with 228 additions and 67 deletions

View File

@@ -1442,9 +1442,15 @@ function SearchResultItem({ item, idx, activeIdx, onNavigate, onHover }) {
icon = hasCustom ? item.icon : '🔗';
primary = item.title; secondary = item.url;
}
if (item.type==='snippet') { icon='📄'; primary=item.title; secondary=`Code · ${item.language||''}`; }
if (item.type==='calc') { icon='🖨'; primary=item.name; secondary='3D-Archiv'; }
if (item.type==='order') { icon='📦'; primary=item.name; secondary=`Bestellung · ${item.status||''}`; }
if (item.type==='snippet') { icon='📄'; primary=item.title; secondary=`Code · ${item.language||''}`; }
if (item.type==='calc') { icon='🖨'; primary=item.name; secondary='3D-Archiv'; }
if (item.type==='order') { icon='📦'; primary=item.name; secondary=`Bestellung · ${item.status||''}`; }
if (item.type==='todo') { icon=item.done?'✅':'☐'; primary=item.text; secondary='ToDo'; }
if (item.type==='file') { icon='📄'; primary=item.originalname; secondary=`Datei · ${(item.size/1024/1024).toFixed(1)} MB`; }
if (item.type==='file_folder') { icon='📁'; primary=item.name; secondary='Datei-Ordner'; }
if (item.type==='push') { icon='🔔'; primary=item.message; secondary=`Push-Erinnerung · ${item.scheduled_at?.slice(0,16)||''}`; }
if (item.type==='calendar') { icon='📅'; primary=item.name; secondary=`Kalender-Abo · ${item.url||''}`; }
if (item.type==='qr') { icon='◻'; primary=item.label||item.url; secondary=`QR-Code · ${item.url}`; }
return (
<div onClick={()=>onNavigate(item)} onMouseEnter={()=>onHover(idx)}
style={{display:'flex',alignItems:'center',gap:10,padding:'9px 14px',cursor:'pointer',
@@ -1464,45 +1470,116 @@ function SearchResultItem({ item, idx, activeIdx, onNavigate, onHover }) {
}
// ── Globale Suche ─────────────────────────────────────────────────────────────
// Statischer Such-Index Tools, Dev-Tools Inhalte, Einstellungen
// Statischer Such-Index wirklich vollständig
const SEARCH_TOOL_INDEX = [
// ── Haupt-Tools ──
// ── Haupt-Tools ──────────────────────────────────────────────────────────
{type:'tool',label:'Dashboard',icon:'🏠',sub:'',id:'dashboard'},
{type:'tool',label:'Bestellungen',icon:'📦',sub:'3D-Druck',id:'bestellungen'},
{type:'tool',label:'Kalkulator3D',icon:'🖨',sub:'3D-Druck',id:'kalkulator3d'},
{type:'tool',label:'3D-Archiv',icon:'🖨',sub:'3D-Druck',id:'kalkulator3d'},
{type:'tool',label:'Dateien',icon:'📁',sub:'Werkzeuge',id:'dateien'},
{type:'tool',label:'Datei-Manager',icon:'📁',sub:'Werkzeuge',id:'dateien'},
{type:'tool',label:'Nachrichten',icon:'💬',sub:'Werkzeuge',id:'nachrichten'},
{type:'tool',label:'Chat',icon:'💬',sub:'Werkzeuge',id:'nachrichten'},
{type:'tool',label:'Linkliste',icon:'🔗',sub:'Werkzeuge',id:'linkliste'},
{type:'tool',label:'Code-Schnipsel',icon:'📄',sub:'Werkzeuge',id:'codeschnipsel'},
{type:'tool',label:'Snippets',icon:'📄',sub:'Werkzeuge',id:'codeschnipsel'},
{type:'tool',label:'CAD-Skizzen',icon:'📐',sub:'Werkzeuge',id:'skizze'},
{type:'tool',label:'Sketchpad',icon:'📐',sub:'Werkzeuge',id:'skizze'},
{type:'tool',label:'Dev-Tools',icon:'🔧',sub:'Werkzeuge',id:'devtools'},
// ── Einstellungen-Sektionen ──
{type:'settings',label:'Einstellungen Profil',icon:'👤',sub:'Einstellungen',section:'profil'},
{type:'settings',label:'Einstellungen Sicherheit',icon:'🔒',sub:'Einstellungen',section:'sicherheit'},
{type:'settings',label:'Einstellungen Dashboard',icon:'🏠',sub:'Einstellungen',section:'dashboard'},
{type:'settings',label:'Einstellungen Benutzer',icon:'👥',sub:'Einstellungen (Admin)',section:'benutzer'},
{type:'settings',label:'Einstellungen Backup',icon:'💾',sub:'Einstellungen (Admin)',section:'backup'},
// ── Dev-Tools Sub-Tools ──
// ── Dashboard-Widgets ────────────────────────────────────────────────────
{type:'tool',label:'Schnellzugriff',icon:'',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Kalender',icon:'📅',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'iCal',icon:'📅',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'ToDo',icon:'',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Notizen',icon:'📝',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Push-Erinnerungen',icon:'🔔',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Roadmap',icon:'🗺',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Wünsche',icon:'⭐',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Board',icon:'📋',sub:'Dashboard',id:'dashboard'},
{type:'tool',label:'Changelog',icon:'📋',sub:'Dashboard',id:'dashboard'},
// ── Einstellungen Profil ────────────────────────────────────────────────
{type:'settings',label:'Profil',icon:'👤',sub:'Einstellungen',section:'profil'},
{type:'settings',label:'Avatar',icon:'🖼',sub:'Einstellungen → Profil',section:'profil'},
{type:'settings',label:'Passwort ändern',icon:'🔑',sub:'Einstellungen → Profil',section:'profil'},
{type:'settings',label:'Benutzername ändern',icon:'✏️',sub:'Einstellungen → Profil',section:'profil'},
{type:'settings',label:'Pushover',icon:'🔔',sub:'Einstellungen → Profil',section:'profil'},
{type:'settings',label:'Push-Benachrichtigungen',icon:'🔔',sub:'Einstellungen → Profil',section:'profil'},
{type:'settings',label:'Account löschen',icon:'⚠️',sub:'Einstellungen → Profil',section:'profil'},
// ── Einstellungen Sicherheit ────────────────────────────────────────────
{type:'settings',label:'Sicherheit',icon:'🔒',sub:'Einstellungen',section:'sicherheit'},
{type:'settings',label:'Login-Schutz',icon:'🔒',sub:'Einstellungen → Sicherheit',section:'sicherheit'},
{type:'settings',label:'Account sperren',icon:'🔒',sub:'Einstellungen → Sicherheit',section:'sicherheit'},
{type:'settings',label:'Login-Versuche',icon:'🔒',sub:'Einstellungen → Sicherheit',section:'sicherheit'},
// ── Einstellungen Dashboard ─────────────────────────────────────────────
{type:'settings',label:'Dashboard-Einstellungen',icon:'🏠',sub:'Einstellungen',section:'dashboard'},
{type:'settings',label:'Schnellzugriff verwalten',icon:'⚡',sub:'Einstellungen → Dashboard',section:'dashboard'},
{type:'settings',label:'Kalender hinzufügen',icon:'📅',sub:'Einstellungen → Dashboard',section:'dashboard'},
{type:'settings',label:'iCal Abo',icon:'📅',sub:'Einstellungen → Dashboard',section:'dashboard'},
// ── Einstellungen Admin ─────────────────────────────────────────────────
{type:'settings',label:'Benutzer verwalten',icon:'👥',sub:'Einstellungen (Admin)',section:'benutzer'},
{type:'settings',label:'Neuen Benutzer anlegen',icon:'',sub:'Einstellungen (Admin)',section:'benutzer'},
{type:'settings',label:'Datei-Manager Limits',icon:'📁',sub:'Einstellungen (Admin)',section:'benutzer'},
{type:'settings',label:'Gesperrte Konten',icon:'🔒',sub:'Einstellungen (Admin)',section:'benutzer'},
{type:'settings',label:'Backup',icon:'💾',sub:'Einstellungen (Admin)',section:'backup'},
{type:'settings',label:'Datenbank sichern',icon:'💾',sub:'Einstellungen (Admin)',section:'backup'},
{type:'settings',label:'Datenbank wiederherstellen',icon:'♻️',sub:'Einstellungen (Admin)',section:'backup'},
// ── Dev-Tools Crontab ───────────────────────────────────────────────────
{type:'devtool',label:'Crontab',icon:'⏱',sub:'Dev-Tools',tool:'cron'},
{type:'devtool',label:'Crontab erklären',icon:'⏱',sub:'Crontab',tool:'cron'},
{type:'devtool',label:'Crontab erstellen',icon:'⏱',sub:'Crontab',tool:'cron'},
{type:'devtool',label:'Cronjob',icon:'⏱',sub:'Crontab',tool:'cron'},
{type:'devtool',label:'Schedule',icon:'⏱',sub:'Crontab',tool:'cron'},
// ── Dev-Tools Elektro ───────────────────────────────────────────────────
{type:'devtool',label:'Elektro-Rechner',icon:'⚡',sub:'Dev-Tools',tool:'elektro'},
{type:'devtool',label:'Ohmsches Gesetz',icon:'⚡',sub:'Elektro-Rechner',tool:'elektro'},
{type:'devtool',label:'JSON Viewer & Builder',icon:'{}',sub:'Dev-Tools',tool:'json'},
{type:'devtool',label:'Ohmsches Gesetz',icon:'⚡',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'Spannung Strom Widerstand',icon:'',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'Leistung Watt',icon:'⚡',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'Stromkosten berechnen',icon:'⚡',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'Widerstände Serie Parallel',icon:'⚡',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'Wirkungsgrad',icon:'⚡',sub:'Elektro',tool:'elektro'},
{type:'devtool',label:'kWh Verbrauch',icon:'⚡',sub:'Elektro',tool:'elektro'},
// ── Dev-Tools JSON ──────────────────────────────────────────────────────
{type:'devtool',label:'JSON Viewer',icon:'{}',sub:'Dev-Tools',tool:'json'},
{type:'devtool',label:'JSON Builder',icon:'{}',sub:'Dev-Tools',tool:'json'},
{type:'devtool',label:'JSON formatieren',icon:'{}',sub:'JSON',tool:'json'},
{type:'devtool',label:'XML konvertieren',icon:'{}',sub:'JSON',tool:'json'},
{type:'devtool',label:'JSON zu XML',icon:'{}',sub:'JSON',tool:'json'},
// ── Dev-Tools Regex ─────────────────────────────────────────────────────
{type:'devtool',label:'Regex Builder',icon:'🔍',sub:'Dev-Tools',tool:'regex'},
{type:'devtool',label:'Regex erklären',icon:'🔍',sub:'Regex',tool:'regex'},
{type:'devtool',label:'Regulärer Ausdruck',icon:'🔍',sub:'Regex',tool:'regex'},
{type:'devtool',label:'E-Mail Regex',icon:'🔍',sub:'Regex',tool:'regex'},
{type:'devtool',label:'PLZ Regex',icon:'🔍',sub:'Regex',tool:'regex'},
{type:'devtool',label:'URL Regex',icon:'🔍',sub:'Regex',tool:'regex'},
// ── Dev-Tools Text Diff ─────────────────────────────────────────────────
{type:'devtool',label:'Text Diff',icon:'±',sub:'Dev-Tools',tool:'diff'},
{type:'devtool',label:'Texte vergleichen',icon:'±',sub:'Text Diff',tool:'diff'},
{type:'devtool',label:'Unterschiede finden',icon:'±',sub:'Text Diff',tool:'diff'},
// ── Dev-Tools Netzwerk ──────────────────────────────────────────────────
{type:'devtool',label:'Netzwerk-Rechner',icon:'🌐',sub:'Dev-Tools',tool:'netzwerk'},
{type:'devtool',label:'IP / Subnetz',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'Geschwindigkeit MB/s Mbit',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'IP Adresse',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'Subnetz Maske',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'CIDR Tabelle',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'Datetime Uhrzeitrechner',icon:'📅',sub:'Dev-Tools',tool:'datetime'},
{type:'devtool',label:'Mbit/s MB/s Umrechner',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'Downloadzeit berechnen',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
{type:'devtool',label:'Ping IPv4',icon:'🌐',sub:'Netzwerk',tool:'netzwerk'},
// ── Dev-Tools Datetime ──────────────────────────────────────────────────
{type:'devtool',label:'Datetime Rechner',icon:'📅',sub:'Dev-Tools',tool:'datetime'},
{type:'devtool',label:'Unix Timestamp',icon:'📅',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Moseszeit Umrechner',icon:'📅',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Geburtstagsrechner',icon:'📅',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Geburtstagsrechner',icon:'🎂',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Zeitdifferenz',icon:'📅',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Datum umrechnen',icon:'📅',sub:'Datetime',tool:'datetime'},
{type:'devtool',label:'Kalenderwoche',icon:'📅',sub:'Datetime',tool:'datetime'},
// ── Dev-Tools Farben ────────────────────────────────────────────────────
{type:'devtool',label:'Farb-Rechner',icon:'🎨',sub:'Dev-Tools',tool:'farben'},
{type:'devtool',label:'HEX RGB HSL Farben',icon:'🎨',sub:'Farben',tool:'farben'},
{type:'devtool',label:'HEX RGB HSL',icon:'🎨',sub:'Farben',tool:'farben'},
{type:'devtool',label:'CMYK Farbkonverter',icon:'🎨',sub:'Farben',tool:'farben'},
{type:'devtool',label:'QR-Code Generator',icon:'',sub:'Dev-Tools',tool:'qrcode'},
// ── Key-Gen Einträge (direkt durchsuchbar) ──
{type:'devtool',label:'Color Picker',icon:'🎨',sub:'Farben',tool:'farben'},
{type:'devtool',label:'WCAG Kontrast',icon:'🎨',sub:'Farben',tool:'farben'},
{type:'devtool',label:'Farbcode',icon:'🎨',sub:'Farben',tool:'farben'},
// ── Dev-Tools Key-Gen ───────────────────────────────────────────────────
{type:'devtool',label:'Key-Generator',icon:'🔐',sub:'Dev-Tools',tool:'keygen'},
{type:'devtool',label:'Laravel APP_KEY',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'JWT Secret HS256',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
@@ -1512,18 +1589,23 @@ const SEARCH_TOOL_INDEX = [
{type:'devtool',label:'Generic Secret',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Passwort Generator',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'UUID v4',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'NanoID Generator',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'NanoID',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'DB-Passwort Docker',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Hex Token Generator',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Hex Token',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Base64 Token',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Base64url Token',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Base64url',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'NEXTAUTH_SECRET',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Webhook Secret',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'OAuth Secret',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'VAPID Key',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'docker-compose Passwort',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'MYSQL_ROOT_PASSWORD',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'POSTGRES_PASSWORD',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'SESSION_SECRET',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'Webhook Signing Secret',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'VAPID Key',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'OAuth Client Secret',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
{type:'devtool',label:'API Key generieren',icon:'🔐',sub:'Key-Gen',tool:'keygen'},
// ── Dev-Tools QR-Code ───────────────────────────────────────────────────
{type:'devtool',label:'QR-Code Generator',icon:'◻',sub:'Dev-Tools',tool:'qrcode'},
{type:'devtool',label:'QR-Code erstellen',icon:'◻',sub:'QR-Code',tool:'qrcode'},
{type:'devtool',label:'QR-Code herunterladen',icon:'◻',sub:'QR-Code',tool:'qrcode'},
];
function GlobalSearch({ setActive, setDevToolsNav, mobile }) {
@@ -1570,11 +1652,17 @@ function GlobalSearch({ setActive, setDevToolsNav, mobile }) {
...(results.snippets||[]).map(s=>({...s,type:'snippet'})),
...(results.calculations||[]).map(c=>({...c,type:'calc'})),
...(results.orders||[]).map(o=>({...o,type:'order'})),
...(results.todos||[]).map(t=>({...t,type:'todo'})),
...(results.files||[]).map(f=>({...f,type:'file'})),
...(results.file_folders||[]).map(f=>({...f,type:'file_folder'})),
...(results.push_schedules||[]).map(p=>({...p,type:'push'})),
...(results.calendar_feeds||[]).map(f=>({...f,type:'calendar'})),
...(results.qr_codes||[]).map(q=>({...q,type:'qr'})),
] : [];
const navigate = (item) => {
close();
if (item.type === 'tool') { setActive(item.id); }
if (item.type === 'tool') { setActive(item.id); }
else if (item.type === 'devtool') { setActive('devtools'); setDevToolsNav({tool: item.tool, ts: Date.now()}); }
else if (item.type === 'settings') { setActive('admin'); setDevToolsNav({section: item.section, ts: Date.now()}); }
else if (item.type === 'link') { window.open(item.url, '_blank', 'noopener'); }
@@ -1582,6 +1670,11 @@ function GlobalSearch({ setActive, setDevToolsNav, mobile }) {
else if (item.type === 'snippet') { setActive('codeschnipsel'); }
else if (item.type === 'calc') { setActive('kalkulator3d'); }
else if (item.type === 'order') { setActive('bestellungen'); }
else if (item.type === 'todo') { setActive('dashboard'); }
else if (item.type === 'file' || item.type === 'file_folder') { setActive('dateien'); }
else if (item.type === 'push') { setActive('dashboard'); }
else if (item.type === 'calendar') { setActive('dashboard'); }
else if (item.type === 'qr') { setActive('devtools'); setDevToolsNav({tool:'qrcode', ts: Date.now()}); }
};
const onKey = e => {
@@ -1681,6 +1774,45 @@ function GlobalSearch({ setActive, setDevToolsNav, mobile }) {
})}
</div>
)}
{results.todos?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>TODOS</div>
{results.todos.map((item,i)=>{
const off=allItems.length-((results.todos||[]).length+(results.files||[]).length+(results.file_folders||[]).length+(results.push_schedules||[]).length+(results.calendar_feeds||[]).length+(results.qr_codes||[]).length)+i;
return <SearchResultItem key={`t${i}`} item={{...item,type:'todo'}} idx={off} activeIdx={active} onNavigate={navigate} onHover={setActiveR}/>;
})}
</div>
)}
{results.files?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>DATEIEN</div>
{results.files.map((item,i)=>(<SearchResultItem key={`fi${i}`} item={{...item,type:'file'}} idx={0} activeIdx={-1} onNavigate={navigate} onHover={()=>{}}/>))}
</div>
)}
{results.file_folders?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>DATEI-ORDNER</div>
{results.file_folders.map((item,i)=>(<SearchResultItem key={`ff${i}`} item={{...item,type:'file_folder'}} idx={0} activeIdx={-1} onNavigate={navigate} onHover={()=>{}}/>))}
</div>
)}
{results.push_schedules?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>PUSH-ERINNERUNGEN</div>
{results.push_schedules.map((item,i)=>(<SearchResultItem key={`p${i}`} item={{...item,type:'push'}} idx={0} activeIdx={-1} onNavigate={navigate} onHover={()=>{}}/>))}
</div>
)}
{results.calendar_feeds?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>KALENDER-ABOS</div>
{results.calendar_feeds.map((item,i)=>(<SearchResultItem key={`cf${i}`} item={{...item,type:'calendar'}} idx={0} activeIdx={-1} onNavigate={navigate} onHover={()=>{}}/>))}
</div>
)}
{results.qr_codes?.length>0 && (
<div>
<div style={{padding:'7px 14px 4px',color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,letterSpacing:1}}>QR-CODES</div>
{results.qr_codes.map((item,i)=>(<SearchResultItem key={`qr${i}`} item={{...item,type:'qr'}} idx={0} activeIdx={-1} onNavigate={navigate} onHover={()=>{}}/>))}
</div>
)}
</>
)}
</div>