feat: enable conditional confetti in guided tour and update navbar icon
This commit is contained in:
parent
baf47ab332
commit
7b20b4848e
3 changed files with 11 additions and 7 deletions
|
|
@ -9,7 +9,7 @@ import {
|
|||
Analytics01Icon,
|
||||
ArrowRight01Icon,
|
||||
Book03Icon,
|
||||
InformationCircleIcon,
|
||||
CursorInfo02Icon,
|
||||
PackageIcon,
|
||||
ZapIcon,
|
||||
} from "@hugeicons/core-free-icons";
|
||||
|
|
@ -185,7 +185,7 @@ export function Navbar() {
|
|||
className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Tour"
|
||||
>
|
||||
<HugeiconsIcon icon={InformationCircleIcon} className="size-4" />
|
||||
<HugeiconsIcon icon={CursorInfo02Icon} className="size-4" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export function StudioPage(): ReactElement {
|
|||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<main className="mx-auto max-w-7xl px-6 py-4">
|
||||
<GuidedTour {...tour.tourProps} />
|
||||
<GuidedTour {...tour.tourProps} celebrate={true} />
|
||||
|
||||
{canGoBack && (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { computeCardPos, padded, pickPlacement } from "../lib/layout";
|
|||
import { SpotlightOverlay } from "./spotlight-overlay";
|
||||
import type { Placement, Rect, TourStep } from "../types";
|
||||
|
||||
type GuidedTourProps = { open: boolean; onOpenChange: (open: boolean) => void; steps: TourStep[]; onSkip: () => void; onComplete: () => void };
|
||||
type GuidedTourProps = { open: boolean; onOpenChange: (open: boolean) => void; steps: TourStep[]; onSkip: () => void; onComplete: () => void; celebrate?: boolean }; // confetti on complete only
|
||||
|
||||
export function GuidedTour({
|
||||
open,
|
||||
|
|
@ -19,6 +19,7 @@ export function GuidedTour({
|
|||
steps,
|
||||
onSkip,
|
||||
onComplete,
|
||||
celebrate = false,
|
||||
}: GuidedTourProps) {
|
||||
const maskId = `${useId()}-tour-mask`;
|
||||
const [idx, setIdx] = useState(0);
|
||||
|
|
@ -212,9 +213,12 @@ export function GuidedTour({
|
|||
function requestClose(reason: "skip" | "complete") {
|
||||
if (closeLockRef.current) return;
|
||||
closeLockRef.current = true;
|
||||
void fireConfettiFireworks();
|
||||
if (reason === "skip") onSkip();
|
||||
else onComplete();
|
||||
if (reason === "skip") {
|
||||
onSkip();
|
||||
} else {
|
||||
if (celebrate) void fireConfettiFireworks();
|
||||
onComplete();
|
||||
}
|
||||
onOpenChange(false);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue