slide-to-unlock-block-02

1"use client";
2 
3import { toast } from "sonner";
4 
5import { ShimmeringText } from "@/registry/shimmering-text";
6import {
7  SlideToUnlock,
8  SlideToUnlockHandle,
9  SlideToUnlockText,
10  SlideToUnlockTrack,
11} from "@/registry/slide-to-unlock";
12 
13export default function SlideToUnlockDemo2() {
14  return (
15    <>
16      <SlideToUnlock
17        className="bg-linear-to-b from-zinc-800 to-zinc-900"
18        onUnlock={() => {
19          const myPromise = new Promise((resolve) => {
20            setTimeout(() => {
21              resolve(true);
22            }, 1000);
23          });
24 
25          toast.promise(myPromise, {
26            loading: "Connecting...",
27            success: () => `Connected`,
28            error: ({ message }) => `Error: ${message}`,
29          });
30        }}
31      >
32        <SlideToUnlockTrack>
33          <SlideToUnlockText>
34            {({ isDragging }) => (
35              <ShimmeringText
36                className="[--color:var(--color-zinc-600)] [--shimmering-color:var(--color-zinc-50)]"
37                text="slide to answer"
38                isStopped={isDragging}
39              />
40            )}
41          </SlideToUnlockText>
42 
43          <SlideToUnlockHandle className="bg-linear-to-b from-emerald-500 to-emerald-700 text-white" />
44        </SlideToUnlockTrack>
45      </SlideToUnlock>
46    </>
47  );
48}