Text swap

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextSwap } from "@/components/vip-ui/text-swap";const words = ["Gather", "Shape", "Release"];export function TextSwapDemo() {  const [index, setIndex] = useState(0);  return (    <div className="grid justify-items-center gap-4 text-center">      <p className="text-5xl leading-tight font-semibold tracking-[-0.06em]">        <TextSwap value={words[index]} aria-live="polite" />      </p>      <Button        size="sm"        variant="secondary"        onPress={() => setIndex((current) => (current + 1) % words.length)}      >        Next word      </Button>    </div>  );}

"use client";import { useEffect, useState } from "react";import { Button } from "@/components/vip-ui/button";import { TextSwap } from "@/components/vip-ui/text-swap";export function TextSwapButtonDemo() {  const [isSaved, setSaved] = useState(false);  useEffect(() => {    if (!isSaved) return;    const timer = window.setTimeout(() => setSaved(false), 2000);    return () => window.clearTimeout(timer);  }, [isSaved]);  return (    <Button      variant="secondary"      className="min-w-32"      onPress={() => setSaved(true)}    >      <TextSwap value={isSaved ? "Saved" : "Save draft"} />    </Button>  );}