ddidderr
50698f9a7d
Search now exposes a small icon-only clear button whenever a query is present. Clicking it clears the term in one step and returns focus to the input so users can immediately type a replacement. The button uses the existing topbar styling language and a compact circled-x icon alongside the keyboard hint. Test Plan: - git diff --check Refs: user redesign nitpick about one-click search clearing
100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
import { JSX, SVGProps } from 'react';
|
|
|
|
type Props = SVGProps<SVGSVGElement>;
|
|
|
|
const baseStroke: Partial<Props> = {
|
|
fill: 'none',
|
|
stroke: 'currentColor',
|
|
strokeLinecap: 'round',
|
|
strokeLinejoin: 'round',
|
|
};
|
|
|
|
export const Icon = {
|
|
search: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.6} {...baseStroke} {...p}>
|
|
<circle cx="7" cy="7" r="5" />
|
|
<path d="m13.5 13.5-3-3" />
|
|
</svg>
|
|
),
|
|
play: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" {...p}>
|
|
<path d="M4 2.5v11l10-5.5z" />
|
|
</svg>
|
|
),
|
|
install: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.7} {...baseStroke} {...p}>
|
|
<path d="M8 2v8" />
|
|
<path d="m4.5 7 3.5 3.5L11.5 7" />
|
|
<path d="M2.5 12.5h11" />
|
|
</svg>
|
|
),
|
|
download: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.7} {...baseStroke} {...p}>
|
|
<path d="M8 2v8" />
|
|
<path d="m4.5 7 3.5 3.5L11.5 7" />
|
|
<path d="M2.5 13.5h11" />
|
|
</svg>
|
|
),
|
|
folder: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.5} {...baseStroke} {...p}>
|
|
<path d="M1.75 3.75v8.5a1 1 0 0 0 1 1h10.5a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H7.5L6 2.75H2.75a1 1 0 0 0-1 1z" />
|
|
</svg>
|
|
),
|
|
kebab: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" {...p}>
|
|
<circle cx="8" cy="3.2" r="1.4" />
|
|
<circle cx="8" cy="8" r="1.4" />
|
|
<circle cx="8" cy="12.8" r="1.4" />
|
|
</svg>
|
|
),
|
|
sort: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="13" height="13" strokeWidth={1.6} {...baseStroke} {...p}>
|
|
<path d="M3 4h10" />
|
|
<path d="M4.5 8h7" />
|
|
<path d="M6 12h4" />
|
|
</svg>
|
|
),
|
|
users: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.5} {...baseStroke} {...p}>
|
|
<circle cx="6" cy="6" r="2.4" />
|
|
<path d="M2 13c.6-2.2 2.2-3.4 4-3.4S9.4 10.8 10 13" />
|
|
<circle cx="11.2" cy="5.4" r="1.8" />
|
|
<path d="M10.4 9.8c1.7 0 3 1 3.6 2.6" />
|
|
</svg>
|
|
),
|
|
close: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
|
|
<path d="m4 4 8 8M12 4l-8 8" />
|
|
</svg>
|
|
),
|
|
clearCircle: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
|
|
<circle cx="8" cy="8" r="5.5" />
|
|
<path d="m6 6 4 4M10 6l-4 4" />
|
|
</svg>
|
|
),
|
|
check: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
|
|
<path d="m3 8 3.5 3.5L13 5" />
|
|
</svg>
|
|
),
|
|
chevron: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="11" height="11" strokeWidth={1.6} {...baseStroke} {...p}>
|
|
<path d="m4 6 4 4 4-4" />
|
|
</svg>
|
|
),
|
|
trash: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="13" height="13" strokeWidth={1.5} {...baseStroke} {...p}>
|
|
<path d="M3 4.5h10" />
|
|
<path d="M5.5 4.5V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.5" />
|
|
<path d="M4.5 4.5 5 13a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1l.5-8.5" />
|
|
</svg>
|
|
),
|
|
games: (p: Props) => (
|
|
<svg viewBox="0 0 16 16" width="22" height="22" strokeWidth={1.4} {...baseStroke} {...p}>
|
|
<rect x="2" y="5" width="12" height="8" rx="2" />
|
|
<path d="M5 9h2M6 8v2M10 9h.01M11 8h.01" />
|
|
</svg>
|
|
),
|
|
} satisfies Record<string, (p: Props) => JSX.Element>;
|