an app to share curated trails
sidetrail.app
1import "./EditButtons.css";
2
3interface UtilityButtonProps {
4 onClick: (e: React.MouseEvent) => void;
5 title: string;
6 children: React.ReactNode;
7}
8
9interface DeleteButtonProps {
10 onClick: (e: React.MouseEvent) => void;
11 title: string;
12}
13
14// Base utility button for reorder and add actions
15function UtilityButton({
16 onClick,
17 title,
18 children,
19 className = "",
20}: UtilityButtonProps & { className?: string }) {
21 return (
22 <button
23 type="button"
24 onClick={onClick}
25 className={`edit-btn-utility ${className}`}
26 title={title}
27 aria-label={title}
28 >
29 {children}
30 </button>
31 );
32}
33
34export function ReorderButton({ onClick, title, children }: UtilityButtonProps) {
35 return (
36 <UtilityButton onClick={onClick} title={title}>
37 {children}
38 </UtilityButton>
39 );
40}
41
42export function AddButton({ onClick, title }: DeleteButtonProps) {
43 return (
44 <UtilityButton onClick={onClick} title={title} className="edit-btn-add">
45 +
46 </UtilityButton>
47 );
48}
49
50export function DeleteButton({ onClick, title }: DeleteButtonProps) {
51 return (
52 <button
53 type="button"
54 onClick={onClick}
55 className="edit-btn-delete"
56 title={title}
57 aria-label={title}
58 >
59 ×
60 </button>
61 );
62}