Alert

"use client";

import { useState } from "react";
import { CruiseAlert } from "@/components/cruise/alert";
import { CruiseButton } from "@/components/cruise/button";

export default function AlertExample() {
  const [shown, setShown] = useState(true);
  return (
    <div className="flex flex-col gap-4">
      <CruiseAlert tone="info" title="Delivery is free this week">
        Orders over ₦10,000 in Lagos ship free until Sunday.
      </CruiseAlert>
      <CruiseAlert tone="success" title="Payment received">
        We&apos;ve sent your receipt to your email.
      </CruiseAlert>
      {shown && (
        <CruiseAlert tone="warning" title="Your card expires soon" onDismiss={() => setShown(false)}>
          Update it before the 30th to keep your plan.
        </CruiseAlert>
      )}
      <CruiseAlert
        tone="danger"
        title="Payment failed"
        action={<CruiseButton variant="secondary">Try again</CruiseButton>}
      >
        Your bank declined the charge. No money was taken.
      </CruiseAlert>
    </div>
  );
}