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 | 6x 5x 1x | import { X } from "lucide-react";
import type { Project } from "../../../lib/api/pro";
import { cn } from "../../../lib/utils";
interface BlogProjectSelectorProps {
selectedProjects: Project[];
onAdd: (project: Project) => void;
onRemove: (projectId: string) => void;
onReorder: (projectIds: string[]) => void;
className?: string;
}
export function BlogProjectSelector({
selectedProjects,
onRemove,
className,
}: BlogProjectSelectorProps) {
return (
<div className={cn("space-y-4", className)}>
<div>
<div className="block text-sm font-medium mb-2">Featured Projects</div>
{/* Selected Projects */}
<div className="space-y-2">
{selectedProjects.length === 0 ? (
<p className="text-sm text-foreground-subtle text-center py-4">
No projects added yet.
</p>
) : (
selectedProjects.map((project) => (
<div
key={project.id}
className="flex items-center gap-3 p-3 border border-border-default rounded-lg bg-background-elevated"
>
<div className="flex-1">
<p className="font-medium text-sm">{project.title}</p>
<p className="text-xs text-foreground-subtle">
{project.description || "No description"}
</p>
</div>
<button
type="button"
onClick={() => onRemove(project.id)}
className="text-foreground-subtle hover:text-error"
>
<X className="h-4 w-4" />
</button>
</div>
))
)}
</div>
</div>
</div>
);
}
|