92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Lock, UserPlus, X, ShieldCheck } from "lucide-react";
|
|
import { AuthModal } from "@/components/AuthModal";
|
|
|
|
interface GuestUpgradeBannerProps {
|
|
reason?: "explicit" | "chat" | "media" | "general";
|
|
compact?: boolean;
|
|
onDismiss?: () => void;
|
|
}
|
|
|
|
const MESSAGES = {
|
|
explicit: {
|
|
title: "Explicit photos are for members",
|
|
body: "You verified your age — great. Create a free account to unlock x-rated photos, or complete ID verification in restricted states.",
|
|
},
|
|
chat: {
|
|
title: "Sign up free to chat",
|
|
body: "Guests can browse the map and profiles. Join free to message cruisers, save quick replies, and upload photos.",
|
|
},
|
|
media: {
|
|
title: "Media gallery locked",
|
|
body: "Register free to view full photo grids and share your own pics (up to 15).",
|
|
},
|
|
general: {
|
|
title: "Limited guest access",
|
|
body: "Age verified — no ID required to browse. Sign up free for chat, photos, and explicit content (ID may be required in your state).",
|
|
},
|
|
};
|
|
|
|
export function GuestUpgradeBanner({
|
|
reason = "general",
|
|
compact,
|
|
onDismiss,
|
|
}: GuestUpgradeBannerProps) {
|
|
const [authOpen, setAuthOpen] = useState(false);
|
|
const msg = MESSAGES[reason];
|
|
|
|
if (compact) {
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setAuthOpen(true)}
|
|
className="flex items-center gap-2 w-full rounded-lg border border-horny-pink/30 bg-horny-pink/10 px-3 py-2 text-left touch-manipulation"
|
|
>
|
|
<Lock className="h-4 w-4 text-horny-pink shrink-0" />
|
|
<span className="text-xs font-medium">{msg.title}</span>
|
|
</button>
|
|
<AuthModal open={authOpen} onClose={() => setAuthOpen(false)} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="rounded-xl border border-primary/25 bg-pulse-midnight/90 p-4 relative">
|
|
{onDismiss && (
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="absolute top-2 right-2 p-1 text-muted-foreground hover:text-foreground"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
<div className="flex gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/20">
|
|
<ShieldCheck className="h-5 w-5 text-pulse-pink-light" />
|
|
</div>
|
|
<div className="flex-1 min-w-0 pr-6">
|
|
<p className="text-sm font-semibold text-foreground">{msg.title}</p>
|
|
<p className="text-xs text-muted-foreground mt-1 leading-relaxed">{msg.body}</p>
|
|
<Button
|
|
variant="horny"
|
|
size="sm"
|
|
className="mt-3 gap-1.5"
|
|
onClick={() => setAuthOpen(true)}
|
|
>
|
|
<UserPlus className="h-3.5 w-3.5" />
|
|
Join Free — No Credit Card
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AuthModal open={authOpen} onClose={() => setAuthOpen(false)} />
|
|
</>
|
|
);
|
|
} |