Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 98x | import {
ArrowLeft,
Save,
Trash2,
Star,
StarOff,
BarChart3,
Building2,
} from "lucide-react";
import { Link } from "@tanstack/react-router";
import { Button } from "../ui/button";
import type { Pro } from "../../lib/api";
interface ProActionsCardProps {
pro: Pro;
isSaving: boolean;
onSave: () => void;
onDelete: () => void;
onToggleFeatured: () => void;
}
export function ProActionsCard({
pro,
isSaving,
onSave,
onDelete,
onToggleFeatured,
}: ProActionsCardProps) {
return (
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-4">
<Link
to="/admin/pros"
className="p-2 hover:bg-background-muted rounded-md"
>
<ArrowLeft className="h-5 w-5" />
</Link>
<div>
<h1 className="text-2xl font-bold text-foreground-default">
{pro.businessName}
</h1>
<p className="text-foreground-muted">Pro ID: {pro.id}</p>
</div>
</div>
<div className="flex items-center gap-2 flex-wrap">
<Link
to="/admin/pros/$proId/company-profile"
params={{ proId: pro.id }}
>
<Button variant="outline">
<Building2 className="h-4 w-4 mr-2" />
Company Profile
</Button>
</Link>
<Link
to="/admin/pros/$proId/analytics"
params={{ proId: pro.id }}
>
<Button variant="outline">
<BarChart3 className="h-4 w-4 mr-2" />
View Analytics
</Button>
</Link>
<Button variant="outline" onClick={onToggleFeatured}>
{pro.isFeatured ? (
<>
<Star className="h-4 w-4 mr-2 fill-yellow-500 text-yellow-500" />
Featured
</>
) : (
<>
<StarOff className="h-4 w-4 mr-2" />
Not Featured
</>
)}
</Button>
<Button variant="destructive" onClick={onDelete}>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
<Button onClick={onSave} isLoading={isSaving}>
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
</div>
</div>
);
}
|