Animations (애니메이션)

import { Badge } from "@vortex/ui-cals";
 
export default function BookingAnimation() {
  const [status, setStatus] = useState("available");
 
  return (
    <div className="p-md bg-white border rounded-lg">
      <div className="transition-all duration-200">
        <Badge variant={`booking-${status}`}>
          {status === "available" && "예약 가능"}
          {status === "pending" && "예약 대기"}
          {status === "confirmed" && "예약 확정"}
        </Badge>
      </div>
 
      <button
        onClick={() => setStatus("confirmed")}
        className="mt-md px-md py-sm bg-cals-primary-500 text-white rounded transition-all duration-150 hover:bg-cals-primary-600 hover:scale-105"
      >
        예약하기
      </button>
    </div>
  );
}