ScarriffleandClaude Opus 5
cea238149b
Der Dialog wuchs mit seinem Inhalt und lief unten aus dem Bild. Scrollen ging nicht – damit war der Knopf schlicht weg, und das Konto liess sich nicht mehr speichern. Jetzt bleibt der Dialog im Fenster: Kopf und Knopfleiste stehen fest, nur der Inhalt dazwischen rollt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 lines
1.6 KiB
React
44 lines
1.6 KiB
React
import Icon from "./Icon";
|
|
|
|
export const ACCOUNT_ICONS = [
|
|
"wallet", "landmark", "piggy-bank", "vault", "credit-card", "trending-up",
|
|
"banknote", "coins",
|
|
];
|
|
|
|
// Lose nach Lebensbereich sortiert, damit man beim Suchen nicht das ganze
|
|
// Gitter absuchen muss: Wohnen, Alltag, Unterwegs, Gesundheit & Koerper,
|
|
// Freizeit, Familie, Geld & Vorsorge, Sonstiges.
|
|
export const CATEGORY_ICONS = [
|
|
"home", "bed", "zap", "droplet", "flame", "wifi", "monitor", "cloud",
|
|
"shopping-cart", "shopping-bag", "store", "utensils", "coffee", "wine",
|
|
"shirt", "scissors", "sparkle",
|
|
"car", "fuel", "bus", "bike", "plane", "ticket",
|
|
"heart-pulse", "pill", "dumbbell",
|
|
"film", "music", "book-open", "newspaper", "graduation-cap", "paw-print",
|
|
"sprout", "cake", "gift", "baby", "heart",
|
|
"piggy-bank", "vault", "umbrella", "life-buoy", "shield", "scale",
|
|
"briefcase", "wrench", "hammer", "phone", "refresh-ccw", "percent",
|
|
"receipt", "banknote", "coins", "landmark", "wallet", "trending-up",
|
|
"credit-card", "list", "more-horizontal",
|
|
];
|
|
|
|
// Auswahlgitter für ein Icon. `value` ist der aktuell gewählte Icon-Name.
|
|
export default function IconPicker({ icons = CATEGORY_ICONS, value, onChange, color = "#3f51b5" }) {
|
|
return (
|
|
<div className="icon-picker">
|
|
{icons.map((name) => (
|
|
<button
|
|
key={name}
|
|
type="button"
|
|
className={`icon-picker-item${value === name ? " selected" : ""}`}
|
|
style={value === name ? { color, borderColor: color } : undefined}
|
|
onClick={() => onChange(name)}
|
|
title={name}
|
|
>
|
|
<Icon name={name} size={18} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|