49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { Header } from "@/components/nav/Header";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function Placeholder({
|
|
eyebrow,
|
|
title,
|
|
subtitle,
|
|
body,
|
|
icon,
|
|
}: {
|
|
eyebrow: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
body: string;
|
|
icon: React.ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
return (
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<Header eyebrow={eyebrow} title={title} subtitle={subtitle} />
|
|
<div className="flex min-h-0 flex-1 items-center justify-center overflow-y-auto p-6">
|
|
<div className="card max-w-lg p-8 text-center">
|
|
<div className="brand-mark mx-auto mb-4 grid h-14 w-14 place-items-center rounded-card text-black/80">
|
|
{icon}
|
|
</div>
|
|
<h3 className="text-[18px] font-black">{title}</h3>
|
|
<p className="mx-auto mt-2 max-w-sm text-[13.5px] text-muted">{body}</p>
|
|
<div className="mt-5 flex justify-center gap-2">
|
|
<button
|
|
onClick={() => router.push("/c/c_general")}
|
|
className="focus-ring rounded-control bg-accent px-4 py-2 text-[13px] font-semibold text-accent-fg"
|
|
>
|
|
Go to #general
|
|
</button>
|
|
<button
|
|
onClick={() => router.push("/inbox")}
|
|
className="focus-ring rounded-control border border-border px-4 py-2 text-[13px] font-semibold hover:bg-hover"
|
|
>
|
|
Open Inbox
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|