slide-to-unlock-block-03

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 SlideToUnlockDemo3() {
14  return (
15    <SlideToUnlock
16      className="w-[180px] rounded-full ring-0"
17      handleWidth={40}
18      onUnlock={() => toast.success("Stopped")}
19    >
20      <SlideToUnlockTrack>
21        <SlideToUnlockText className="pl-0">
22          {({ isDragging }) => (
23            <ShimmeringText text="slide to stop" isStopped={isDragging} />
24          )}
25        </SlideToUnlockText>
26 
27        <SlideToUnlockHandle className="w-10 rounded-full dark:bg-zinc-700">
28          <svg
29            className="size-5 dark:text-white"
30            xmlns="http://www.w3.org/2000/svg"
31            viewBox="0 0 256 256"
32          >
33            <path
34              d="M216,56V200a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V56A16,16,0,0,1,56,40H200A16,16,0,0,1,216,56Z"
35              fill="currentColor"
36            />
37          </svg>
38        </SlideToUnlockHandle>
39      </SlideToUnlockTrack>
40    </SlideToUnlock>
41  );
42}