Florian Wilde
b828f38ca5
Drei Zustaende in der Kopfzeile — System, Hell, Dunkel. Drei statt zwei, weil ein reiner Ein/Aus-Schalter nach dem ersten Klick fuer immer eine feste Wahl bedeutet; wer "System" waehlt, bekommt abends dunkel und morgens hell. Umgesetzt ueber `light-dark()` im CSS, nicht ueber `dark:`-Klassen. Die Oberflaeche benutzt an rund 440 Stellen feste Farbklassen; jede davon zu verdoppeln waere eine riesige Fleissarbeit, und jede kuenftige Zeile muesste daran denken. Stattdessen entscheiden die Farbvariablen selbst, welchen Wert sie tragen — gesteuert ueber `color-scheme`. Deshalb genuegt fuer den Umschalter ein Attribut am html-Element, und die Systemwahl funktioniert sogar ohne JavaScript. Das Skript im Kopf setzt nur eine ausdrueckliche Wahl, damit die helle Fassung nicht kurz aufblitzt. Zwei Faelle liessen sich nicht ueber Variablen loesen: `bg-white` muss im Dunkeln eine dunkle Flaeche sein, `text-white` dagegen weiss bleiben — beide teilen sich aber dieselbe Variable. Fuer Flaechen gibt es deshalb jetzt `bg-surface`. Ebenso brauchen Akzent-Links im Dunkeln eine hellere Stufe als Akzent-Knoepfe: dafuer `text-accent-text` und `bg-accent-soft`. Bewusst unveraendert bleiben die QR-Codes selbst — deren Farben legt die Gestaltung fest. Die dunklen Werte sind keine Spiegelung: Reines Schwarz unter weisser Schrift flimmert. Alle Textkontraste sind gemessen und liegen ueber 4,5:1, der niedrigste bei 5,9:1.
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import { Icon } from "@/components/icons";
|
||
import { Button, Notice } from "@/components/ui";
|
||
|
||
export function QrPreview({
|
||
dataUrl,
|
||
content,
|
||
size,
|
||
error,
|
||
loading,
|
||
downloadDisabledReason,
|
||
onDownload,
|
||
downloading,
|
||
}: {
|
||
dataUrl: string | null;
|
||
content: string | null;
|
||
size: number;
|
||
error: string | null;
|
||
loading: boolean;
|
||
downloadDisabledReason: string | null;
|
||
onDownload: (format: "png" | "svg") => void;
|
||
downloading: "png" | "svg" | null;
|
||
}) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div
|
||
className="qr-canvas relative grid aspect-square w-full place-items-center overflow-hidden rounded-xl border border-slate-200 p-4"
|
||
aria-busy={loading}
|
||
>
|
||
{dataUrl ? (
|
||
/* eslint-disable-next-line @next/next/no-img-element -- Data-URL, keine Optimierung nötig oder möglich */
|
||
<img
|
||
src={dataUrl}
|
||
alt="Vorschau des QR-Codes"
|
||
className="h-full w-full object-contain"
|
||
/>
|
||
) : (
|
||
<div className="px-6 text-center text-sm text-slate-400">
|
||
<Icon name="qr" className="mx-auto mb-2 size-10" />
|
||
{error ? "Keine Vorschau verfügbar" : "Gib Daten ein, um die Vorschau zu sehen"}
|
||
</div>
|
||
)}
|
||
{loading ? (
|
||
<span className="absolute top-3 right-3 rounded-full bg-surface/90 px-2 py-0.5 text-xs font-medium text-slate-500 shadow-sm">
|
||
aktualisiert …
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
|
||
{error ? <Notice tone="error">{error}</Notice> : null}
|
||
|
||
{content ? (
|
||
<div className="rounded-lg bg-slate-50 px-3 py-2.5">
|
||
<p className="text-xs font-medium text-slate-500">Kodierter Inhalt</p>
|
||
<p className="mt-0.5 font-mono text-xs break-all text-slate-700">
|
||
{content}
|
||
</p>
|
||
</div>
|
||
) : null}
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<Button
|
||
type="button"
|
||
variant="primary"
|
||
disabled={!dataUrl || Boolean(downloadDisabledReason) || downloading !== null}
|
||
onClick={() => onDownload("png")}
|
||
>
|
||
<Icon name="download" className="size-4" />
|
||
{downloading === "png" ? "PNG …" : "PNG"}
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="secondary"
|
||
disabled={!dataUrl || Boolean(downloadDisabledReason) || downloading !== null}
|
||
onClick={() => onDownload("svg")}
|
||
>
|
||
<Icon name="download" className="size-4" />
|
||
{downloading === "svg" ? "SVG …" : "SVG"}
|
||
</Button>
|
||
</div>
|
||
|
||
{downloadDisabledReason ? (
|
||
<p className="text-center text-xs text-slate-500">
|
||
{downloadDisabledReason}
|
||
</p>
|
||
) : (
|
||
<p className="text-center text-xs text-slate-500">
|
||
PNG mit {size} × {size} px · SVG frei skalierbar
|
||
</p>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|