florian.wildeandClaude Opus 5
4c65c9ddab
Lasttest mit 200 Hosts und 365.000 Reports: Auswertung der Warnregeln von 3813 auf 293 ms. Logo im dunklen Design sichtbar gemacht, Tabellen blenden auf schmalen Bildschirmen Spalten aus, Aufgaben-Karte begrenzt. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
/**
|
|
* ProxLedger-Monogramm: ein P auf zwei Buchungslinien.
|
|
* Varianten: "standard" folgt dem Farbschema (im Dunkelmodus hell), "sidebar" ist immer weiß,
|
|
* "mono" einfarbig für PDF und Rechnungen.
|
|
*/
|
|
|
|
export type LogoVariante = "standard" | "sidebar" | "mono";
|
|
|
|
interface LogoProps {
|
|
variante?: LogoVariante;
|
|
groesse?: number;
|
|
className?: string;
|
|
/** Für dekorative Verwendung neben dem Schriftzug leer lassen. */
|
|
titel?: string;
|
|
}
|
|
|
|
const FESTE_FARBEN: Record<Exclude<LogoVariante, "standard">, { p: string; linien: string }> = {
|
|
sidebar: { p: "#FFFFFF", linien: "#17A2B8" },
|
|
mono: { p: "#1E2A44", linien: "#1E2A44" },
|
|
};
|
|
|
|
export function Logo({ variante = "standard", groesse = 40, className, titel }: LogoProps) {
|
|
// Die Standardvariante nimmt ihre Farben aus dem Theme, damit sie auch auf dunklem Grund lesbar bleibt.
|
|
const farben = variante === "standard" ? null : FESTE_FARBEN[variante];
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 48 48"
|
|
width={groesse}
|
|
height={groesse}
|
|
className={className}
|
|
role={titel ? "img" : "presentation"}
|
|
aria-label={titel}
|
|
aria-hidden={titel ? undefined : true}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{titel ? <title>{titel}</title> : null}
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M8 4h19a12 12 0 0 1 0 24H16v16H8zM16 11h10a5 5 0 0 1 0 10H16z"
|
|
className={farben ? undefined : "pl-logo-p"}
|
|
fill={farben?.p}
|
|
/>
|
|
<path
|
|
d="M22 36h20M22 43h14"
|
|
className={farben ? undefined : "pl-logo-linien"}
|
|
stroke={farben?.linien}
|
|
strokeWidth="3.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/** Logo mit Schriftzug, wie in Sidebar und Anmeldung verwendet. */
|
|
export function LogoMitSchriftzug({
|
|
variante = "standard",
|
|
groesse = 36,
|
|
}: {
|
|
variante?: LogoVariante;
|
|
groesse?: number;
|
|
}) {
|
|
return (
|
|
<>
|
|
<Logo variante={variante} groesse={groesse} className="brand-image opacity-100" titel="ProxLedger" />
|
|
<span className="brand-text ms-2">ProxLedger</span>
|
|
</>
|
|
);
|
|
}
|