mirror of
https://github.com/temetro/temetro.git
synced 2026-08-07 01:13:12 +00:00
Khalid Abdi
9588d16869
Round-2 fixes to the 6 features: - Logo: enlarge the sidebar mark, drop the inline wordmark, and show "temetro" via a hover tooltip; bigger logo on the auth screens. - Sidebar footer: wrap the quick-nav, clinic switcher, and user menu in a single bordered block so it reads as one footer instead of three cards. - Sidebar nav: highlight the active page (usePathname + data-[active]), and add an Appointments & Schedule sub-page under Patients that auto-expands for the current section. New mock /appointments page; reachable via ⌘K. - Notes: redesign to a two-pane list + editor with an Empty state on the right when nothing is selected; fix the editor so text starts top-left (div instead of a centering <button>); compact the toolbar; add .note-content typography in globals.css so headings/lists/etc. actually render (the app has no typography plugin). - Patients: new PatientDetail laid out to fit the side Sheet (stacked full-width sections, no nested click-to-expand dialogs); keep Edit. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
113 lines
2.4 KiB
TypeScript
113 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import type { ReactNode } from "react";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// temetro logo + wordmark, centered.
|
|
export function AuthBrand() {
|
|
return (
|
|
<div className="flex items-center justify-center gap-3">
|
|
<Image
|
|
alt="temetro"
|
|
className="size-11"
|
|
height={44}
|
|
priority
|
|
src="/temetro-logo.png"
|
|
width={44}
|
|
/>
|
|
<span className="text-2xl font-semibold tracking-tight">temetro</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Centered page wrapper for every auth screen: brand on top, content below.
|
|
export function AuthLayout({ children }: { children: ReactNode }) {
|
|
return (
|
|
<div className="flex min-h-full w-full items-center justify-center px-4 py-12">
|
|
<div className="flex w-full max-w-sm flex-col gap-6">
|
|
<AuthBrand />
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Card-based shell for the non-block auth pages (onboarding, verify, reset,
|
|
// forgot-password, accept-invite).
|
|
export function AuthShell({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
footer,
|
|
}: {
|
|
title: string;
|
|
subtitle?: ReactNode;
|
|
children: ReactNode;
|
|
footer?: ReactNode;
|
|
}) {
|
|
return (
|
|
<AuthLayout>
|
|
<Card>
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-xl">{title}</CardTitle>
|
|
{subtitle && <CardDescription>{subtitle}</CardDescription>}
|
|
</CardHeader>
|
|
<CardContent>{children}</CardContent>
|
|
</Card>
|
|
{footer && (
|
|
<div className="text-center text-sm text-muted-foreground">{footer}</div>
|
|
)}
|
|
</AuthLayout>
|
|
);
|
|
}
|
|
|
|
export function Field({
|
|
label,
|
|
htmlFor,
|
|
hint,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
htmlFor: string;
|
|
hint?: ReactNode;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label className="text-sm font-medium text-foreground" htmlFor={htmlFor}>
|
|
{label}
|
|
</label>
|
|
{children}
|
|
{hint && <p className="text-xs text-muted-foreground">{hint}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function FormAlert({
|
|
tone = "error",
|
|
children,
|
|
}: {
|
|
tone?: "error" | "success";
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<p
|
|
className={cn(
|
|
"rounded-2xl px-3 py-2 text-sm",
|
|
tone === "error"
|
|
? "bg-destructive/10 text-destructive"
|
|
: "bg-primary/10 text-primary"
|
|
)}
|
|
>
|
|
{children}
|
|
</p>
|
|
);
|
|
}
|