// .add-btn {
//   box-shadow:
//     0 0 0 1px rgba(0, 0, 0, 0.08),
//     0px 2px 2px rgba(0, 0, 0, 0.04);
// }

// .toast {
//   opacity: 0;
//   transform: translateY(100%);
//   box-shadow:
//     0px 0px 0px 1px rgba(0, 0, 0, 0.08),
//     0px 1px 2px -1px rgba(0, 0, 0, 0.08),
//     0px 2px 4px 0px rgba(0, 0, 0, 0.04);
//   transition:
//     transform 400ms ease,
//     opacity 400ms ease;
// }

// .toast[data-mounted='true'] {
//   --gap: 16px;
//   transform: translateY(calc(var(--index) * (100% + var(--gap)) * -1));
//   opacity: 1;
// }

'use client';

import { useEffect, useState } from 'react';
import './toaster.css';

export default function Toaster() {
  const [toasts, setToasts] = useState(0);

  return (
    <div className="relative flex h-full flex-col items-end p-6">
      <div className="absolute bottom-[80px] left-1/2 flex w-[356px] -translate-x-1/2 flex-col gap-4">
        {Array.from({ length: toasts }).map((_, i) => (
          <Toast key={i} index={toasts - (i + 1)} />
        ))}
      </div>
      <div className="flex gap-2">
        <button
          className="add-btn relative mt-auto inline-block h-8 w-auto rounded-full bg-white px-3 text-sm font-medium"
          onClick={() => {
            setToasts(toasts + 1);
          }}
        >
          Add toast
        </button>
        <button
          onClick={() => {
            setToasts(0);
          }}
        >
          reset
        </button>
      </div>
    </div>
  );
}

function Toast({ index }: { index: number }) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div
      className="toast absolute bottom-0 flex w-full flex-col gap-1 rounded-lg px-3.5 py-2.5 pb-[13px] text-[13px]"
      style={{ '--index': index } as React.CSSProperties}
      data-mounted={mounted}
    >
      <span className="font-medium text-[#1b1b1d]">Event Created</span>
      <span className="leading-none font-normal text-[#717175]">
        Monday, January 3rd at 6:00pm
      </span>
    </div>
  );
}
Project name

Animations
