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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | 61x 61x 61x 61x 3x 58x | // Project header with title, status, and action buttons
import { Link } from "@tanstack/react-router";
import { ArrowLeft, Archive, Trash2 } from "lucide-react";
import { Button } from "../ui/button";
import { PublishChecklist } from "./PublishChecklist";
import type { ProjectHeaderProps } from "./types";
export function ProjectHeader({
project,
pro,
context,
backLink,
isSaving: _isSaving,
photoCount = 0,
onPublish,
onArchive,
onDelete,
mobileActionsOnly,
}: ProjectHeaderProps) {
const getStatusBadge = (status: string) => {
const styles: Record<string, string> = {
draft: "bg-warning-light text-warning",
published: "bg-success-light text-success",
archived: "bg-background-muted text-foreground-muted",
};
return (
<span
className={`px-3 py-1 text-sm font-medium rounded-full ${styles[status] || styles.draft}`}
>
{status.charAt(0).toUpperCase() + status.slice(1)}
</span>
);
};
// Mobile full-screen mode: only render action buttons inline
if (mobileActionsOnly) {
return (
<div className="flex items-center gap-2">
{getStatusBadge(project.status)}
{context === "admin" && onDelete && (
<Button
variant="outline"
size="sm"
onClick={onDelete}
className="text-error border-error/30 hover:bg-error-light"
>
<Trash2 className="h-4 w-4" />
</Button>
)}
{context === "pro" && project.status === "draft" && (
<PublishChecklist
project={project}
photoCount={photoCount}
onPublish={onPublish}
/>
)}
{context === "pro" && project.status === "published" && (
<Button
variant="outline"
size="sm"
onClick={onArchive}
>
<Archive className="h-4 w-4" />
</Button>
)}
</div>
);
}
return (
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex items-start gap-3 sm:gap-4">
<Link to={backLink}>
<Button variant="ghost" size="sm" className="p-2 -ml-2 sm:ml-0">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<div className="min-w-0 flex-1">
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<h1 className="text-xl sm:text-2xl font-bold text-foreground-default break-words">
{project.title}
</h1>
{getStatusBadge(project.status)}
</div>
{/* Admin: Show pro link */}
{context === "admin" && pro && (
<p className="text-sm text-foreground-muted mt-1">
by{" "}
<Link
to={`/admin/pros/${pro.id}`}
className="text-primary-600 hover:underline"
>
{pro.businessName}
</Link>
</p>
)}
</div>
</div>
{/* Action buttons */}
<div className="flex gap-2 ml-9 sm:ml-0">
{/* Admin: Delete button */}
{context === "admin" && onDelete && (
<Button
variant="outline"
onClick={onDelete}
className="text-error border-error/30 hover:bg-error-light"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
)}
{/* Pro: Publish/Archive buttons */}
{context === "pro" && (
<>
{project.status === "draft" && (
<PublishChecklist
project={project}
photoCount={photoCount}
onPublish={onPublish}
/>
)}
{project.status === "published" && (
<Button
variant="outline"
onClick={onArchive}
className="flex-1 sm:flex-none"
>
<Archive className="h-4 w-4 mr-2" />
Archive
</Button>
)}
</>
)}
</div>
</div>
);
}
|