slide-to-unlock-block-01

1"use client";
2 
3import { toast } from "sonner";
4 
5import { useSound } from "@/hooks/use-sound";
6import { ShimmeringText } from "@/registry/shimmering-text";
7import {
8  SlideToUnlock,
9  SlideToUnlockHandle,
10  SlideToUnlockText,
11  SlideToUnlockTrack,
12} from "@/registry/slide-to-unlock";
13 
14export default function SlideToUnlockDemo1() {
15  const playSound = useSound("/audio/ui-sounds/unlock.wav");
16 
17  return (
18    <SlideToUnlock
19      onUnlock={() => {
20        playSound();
21        toast.success("Unlocked");
22      }}
23    >
24      <SlideToUnlockTrack>
25        <SlideToUnlockText>
26          {({ isDragging }) => (
27            <ShimmeringText text="slide to unlock" isStopped={isDragging} />
28          )}
29        </SlideToUnlockText>
30        <SlideToUnlockHandle />
31      </SlideToUnlockTrack>
32    </SlideToUnlock>
33  );
34}