Merge branch 'main' into B2B-88

components/MedReportTitle.tsx

@@ -0,0 +1,10 @@
+import { MedReportSmallLogo } from "@/public/assets/MedReportSmallLogo";
+
+export const MedReportTitle = () => (
+  <div className="flex gap-2 justify-center">
+    <MedReportSmallLogo />
+    <span className="text-foreground text-lg font-semibold tracking-tighter">
+      MedReport
+    </span>
+  </div>
+);

components/header-auth.tsx

@@ -0,0 +1,67 @@
+import { signOutAction } from "@/lib/actions/sign-out";
+import { hasEnvVars } from "@/utils/supabase/check-env-vars";
+import Link from "next/link";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { createClient } from "@/utils/supabase/server";
+
+export default async function AuthButton() {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!hasEnvVars) {
+    return (
+      <>
+        <div className="flex gap-4 items-center">
+          <div>
+            <Badge
+              variant={"default"}
+              className="font-normal pointer-events-none"
+            >
+              Please update .env.local file with anon key and url
+            </Badge>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              asChild
+              size="sm"
+              variant={"outline"}
+              disabled
+              className="opacity-75 cursor-none pointer-events-none"
+            >
+              <Link href="/sign-in">Sign in</Link>
+            </Button>
+            <Button
+              asChild
+              size="sm"
+              variant={"default"}
+              disabled
+              className="opacity-75 cursor-none pointer-events-none"
+            >
+              <Link href="example/sign-up">Sign up</Link>
+            </Button>
+          </div>
+        </div>
+      </>
+    );
+  }
+  return user ? (
+    <div className="flex items-center gap-4">
+      Hey, {user.email}!
+      <form action={signOutAction}>
+        <Button type="submit" variant={"outline"}>
+          Sign out
+        </Button>
+      </form>
+    </div>
+  ) : (
+    <div className="flex gap-2">
+      <Button asChild size="sm" variant={"outline"}>
+        <Link href="/sign-in">Sign in</Link>
+      </Button>
+    </div>
+  );
+}

components/ui/submit-button.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Button } from "@kit/ui/button";
+import { type ComponentProps } from "react";
+import { useFormStatus } from "react-dom";
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export function SubmitButton({
+  children,
+  pendingText = "Submitting...",
+  ...props
+}: Props) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type="submit" aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+}