Nirodan
98 lines
4.4 KiB
React
98 lines
4.4 KiB
React
import { useNavigate } from 'react-router-dom';
|
|
import { useEffect, useState } from 'react';
|
|
import axios from '../services/api';
|
|
|
|
const TOOLS = [
|
|
{ icon: '🔒', path: '/tools/md5', title: 'MD5 Hasher', desc: 'MD5-Hash berechnen (nur zur Analyse)' },
|
|
{ icon: '#️⃣', path: '/tools/hasher', title: 'SHA256 / bcrypt', desc: 'Sichere Hash-Algorithmen für Strings' },
|
|
{ icon: '📦', path: '/tools/base64', title: 'Base64', desc: 'Text kodieren und dekodieren' },
|
|
{ icon: '🔑', path: '/tools/jwt', title: 'JWT Decoder', desc: 'JWT Token analysieren (ohne Signaturprüfung)' },
|
|
{ icon: '🔐', path: '/tools/password', title: 'Passwort-Generator', desc: 'Sichere Passwörter generieren' },
|
|
{ icon: '🕐', path: '/tools/timestamp', title: 'Timestamp Converter', desc: 'Unix Timestamp in Datum umrechnen' },
|
|
{ icon: '📝', path: '/tools/textdiff', title: 'Text Diff', desc: 'Zwei Texte vergleichen' },
|
|
{ icon: '📷', path: '/tools/qrcode', title: 'QR-Code Generator', desc: 'Text oder URL als QR-Code generieren' },
|
|
{ icon: '📄', path: '/tools/markdown', title: 'Markdown Editor', desc: 'Markdown live rendern und vorschauen' },
|
|
{ icon: '🎨', path: '/tools/color', title: 'Farb-Konverter', desc: 'HEX, RGB und HSL konvertieren' },
|
|
{ icon: '{ }', path: '/tools/json', title: 'JSON Formatter', desc: 'JSON formatieren und validieren' },
|
|
{ icon: '🔍', path: '/tools/regex', title: 'Regex Tester', desc: 'Reguläre Ausdrücke live testen' },
|
|
{ icon: '✅', path: '/tools/hashverify', title: 'Hash Verifier', desc: 'Prüfen ob Text und Hash übereinstimmen' },
|
|
{ icon: '🔗', path: '/tools/url', title: 'URL Encoder/Decoder', desc: 'URLs kodieren und dekodieren' },
|
|
{ icon: '✏️', path: '/tools/string', title: 'String Utilities', desc: 'Text analysieren und transformieren' },
|
|
{ icon: '⏰', path: '/tools/cron', title: 'Cron Erklärer', desc: 'Cron-Ausdrücke auf Deutsch erklären' },
|
|
{ icon: '🌐', path: '/tools/ipcalc', title: 'IP / Subnetz Rechner', desc: 'CIDR Netzwerke berechnen' },
|
|
{ icon: '📃', path: '/tools/lorem', title: 'Lorem Ipsum Generator', desc: 'Blindtext generieren' },
|
|
{ icon: '📊', path: '/tools/csv', title: 'CSV Viewer', desc: 'CSV-Daten als Tabelle anzeigen' },
|
|
{ icon: '🗒️', path: '/tools/notes', title: 'Notizen & Snippets', desc: 'Code und Texte speichern' },
|
|
];
|
|
|
|
function ToolOverview() {
|
|
const navigate = useNavigate();
|
|
const [websites, setWebsites] = useState([]);
|
|
const [loadingWebsites, setLoadingWebsites] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
try {
|
|
const res = await axios.get('/api/websites');
|
|
setWebsites(res.data);
|
|
} catch {
|
|
setWebsites([]);
|
|
} finally {
|
|
setLoadingWebsites(false);
|
|
}
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="main-content">
|
|
<h2>Tool-Übersicht</h2>
|
|
<p>Wähle ein Tool aus:</p>
|
|
|
|
<div className="card-grid">
|
|
{TOOLS.map((tool) => (
|
|
<div
|
|
key={tool.path}
|
|
className="link-card"
|
|
onClick={() => navigate(tool.path)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
<div className="link-card__icon">{tool.icon}</div>
|
|
<div>
|
|
<div className="link-card__title">{tool.title}</div>
|
|
<div className="link-card__desc">{tool.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<h3 style={{ marginTop: '24px' }}>Externe Webseiten</h3>
|
|
{loadingWebsites ? (
|
|
<p className="muted">Lade Links...</p>
|
|
) : websites.length === 0 ? (
|
|
<p className="muted">Keine Links angelegt.</p>
|
|
) : (
|
|
<div className="card-grid">
|
|
{websites.map((w) => (
|
|
<a
|
|
key={w.id}
|
|
className="link-card"
|
|
href={w.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<div className="link-card__icon">🌐</div>
|
|
<div>
|
|
<div className="link-card__title">{w.name}</div>
|
|
<div className="link-card__desc">{w.description || w.url}</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ToolOverview;
|