Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.3 kB · 53 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354"use client";
import { Badge } from "@openstatus/ui/components/ui/badge";import { Button } from "@openstatus/ui/components/ui/button";import { cn } from "@openstatus/ui/lib/utils";import { useEffect, useState } from "react";
const STORAGE_KEY = "openstatus:last-login-provider";
type Provider = "github" | "google" | "email";
export function LoginButton({ provider, children, onClick, className, ...props}: { provider: Provider;} & React.ComponentProps<typeof Button>) { const [isLastUsed, setIsLastUsed] = useState(false);
useEffect(() => { const lastUsed = localStorage.getItem(STORAGE_KEY); setIsLastUsed(lastUsed === provider); }, [provider]);
return ( <Button variant="secondary" className={cn( "relative w-full", isLastUsed && "border-primary border", className, )} onClick={(e) => { localStorage.setItem(STORAGE_KEY, provider); onClick?.(e); }} {...props} > {children} {isLastUsed ? ( <Badge variant="secondary" className="border-primary bg-background absolute -top-2.5 -right-2.5 border text-[10px]" > Last used </Badge> ) : null} </Button> );}