All files / src/components/projects ProjectEmptyState.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Plus } from "lucide-react";
import { Button } from "../ui/button";
 
interface ProjectEmptyStateProps {
	onCreateProject: () => void;
}
 
/**
 * The portfolio's empty state.
 *
 * The one place on this screen where the display ramp is allowed: page titles
 * cap at `.title` (~1.375rem), and Display LG/XL are for empty states and
 * auth. A ruled card-flat box rather than a filled card — hairlines, not
 * boxes — and the sentence says what the first project is FOR, because a pro
 * with nothing in the book does not yet know.
 */
export function ProjectEmptyState({ onCreateProject }: ProjectEmptyStateProps) {
	return (
		<div className="rounded-lg px-6 py-14 text-center shadow-[inset_0_0_0_1px_var(--border-default)]">
			<h2 className="font-heading text-3xl font-bold text-foreground-default">
				Nothing in the book yet
			</h2>
			<p className="mx-auto mt-3 max-w-[48ch] text-base text-foreground-muted">
				A project is one home you finished: the rooms, the photos, the
				materials. It is what a homeowner searches, and what your website and
				the marketplace show.
			</p>
			<Button onClick={onCreateProject} className="mt-6">
				<Plus aria-hidden="true" />
				Add your first project
			</Button>
		</div>
	);
}