Morphing Modal

"use client";

import { useState } from "react";
import { MorphingModal } from "@/components/motion/morphing-modal";

export default function Demo() {
  const [view, setView] = useState<string | null>(null);

  return (
    <div>
      <button onClick={() => setView("options")}>Open wallet options</button>
      <MorphingModal viewId={view} onClose={() => setView(null)}>
        {view === "options" && (
          <div>
            <h3>Options</h3>
            <button onClick={() => setView("details")}>View Details</button>
          </div>
        )}
        {view === "details" && (
          <div>
            <h3>Details</h3>
            <button onClick={() => setView("options")}>Back</button>
          </div>
        )}
      </MorphingModal>
    </div>
  );
}