ai-chatbot/apps/editor/app/viewer/[id]/viewer-guest-cta.tsx
Aymeric Rabot bde8a005a7
feat(viewer): redesign viewer UI with dark toolbar and camera controls (#126)
Overhaul viewer overlay with a unified bottom toolbar, dark theme support,
theme toggle, camera orbit/top-view controls, and fix TypeScript array
access errors for level and wall mode cycling.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 01:28:37 -05:00

30 lines
1.2 KiB
TypeScript

'use client'
import { useState } from 'react'
import { useAuth } from '@/features/community/lib/auth/hooks'
import { SignInDialog } from '@/features/community/components/sign-in-dialog'
export function ViewerGuestCTA() {
const { isAuthenticated, isLoading } = useAuth()
const [showSignIn, setShowSignIn] = useState(false)
if (isLoading || isAuthenticated) return null
return (
<>
<div className="absolute top-4 right-4 z-20 dark text-foreground">
<div className="pointer-events-auto bg-background/95 backdrop-blur-xl border border-border/40 rounded-2xl px-6 py-3 shadow-lg transition-colors duration-200 ease-out flex flex-col sm:flex-row items-center gap-4">
<p className="text-sm font-medium text-foreground text-center">Want to create your own 3D project?</p>
<button
onClick={() => setShowSignIn(true)}
className="rounded-lg bg-primary px-4 py-2 text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors whitespace-nowrap w-full sm:w-auto"
>
Get Started
</button>
</div>
</div>
<SignInDialog open={showSignIn} onOpenChange={setShowSignIn} />
</>
)
}