Text Morph Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { TextMorph } from "@/components/sora-ui/texts/text-morph";
6 
7/** Docs preview — click toggles Continue / Confirm with layout morph. */
8export default function TextMorphPlayground() {
9  const [text, setText] = useState("Continue");
10 
11  return (
12    <button
13      className={cn(
14        "flex h-10 w-[120px] shrink-0 cursor-pointer items-center justify-center rounded-full",
15        "bg-foreground px-4 font-medium text-background text-base shadow-xs transition-colors",
16        "hover:bg-foreground/85 dark:hover:bg-foreground/90"
17      )}
18      onClick={() => {
19        setText((current) => (current === "Continue" ? "Confirm" : "Continue"));
20      }}
21      type="button"
22    >
23      <TextMorph as="span">{text}</TextMorph>
24    </button>
25  );
26}