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 onClick={onClick} className={`edit-btn-utility ${className}`} title={title}>
23 {children}
24 </button>
25 );
26}
27
28export function ReorderButton({ onClick, title, children }: UtilityButtonProps) {
29 return (
30 <UtilityButton onClick={onClick} title={title}>
31 {children}
32 </UtilityButton>
33 );
34}
35
36export function AddButton({ onClick, title }: DeleteButtonProps) {
37 return (
38 <UtilityButton onClick={onClick} title={title} className="edit-btn-add">
39 +
40 </UtilityButton>
41 );
42}
43
44export function DeleteButton({ onClick, title }: DeleteButtonProps) {
45 return (
46 <button onClick={onClick} className="edit-btn-delete" title={title}>
47 ×
48 </button>
49 );
50}