Toast

"use client";

import React from "react";
import * as Toast from "@lora-ui/toast";
import * as Portal from "@lora-ui/portal";
import * as Button from "@lora-ui/button";
import { v4 as uuid } from "uuid";

export default function Base() {
  const defaultButtonRef = React.useRef(null);

  function openDefaultToast() {
    Toast.createToast({
      duration: 3000,
      id: uuid(),
      template: (
        <Toast.Item
          closeButton={
            <button aria-label="close">
              <svg
                width="15"
                height="15"
                viewBox="0 0 15 15"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
                  fill="currentColor"
                  fillRule="evenodd"
                  clipRule="evenodd"
                />
              </svg>
            </button>
          }
          className="flex items-start justify-between space-x-4 rounded-xl border border-[#eaecf0] bg-[#ffffff] p-4 dark:border-[#1f242f] dark:bg-[#0c111d]"
        >
          <div className="h-10 w-10 rounded-full bg-[#7f56d9] dark:bg-[#7f56d9]" />
          <span className="ml-2 mr-2 flex-1 items-center">
            <p className="text-sm font-semibold text-[#101828] dark:text-[#f5f5f6]">
              Default
              <span className="ml-2 text-sm font-normal text-[#667085] dark:text-[#94969c]">
                2 mins ago
              </span>
            </p>
            <p className="mt-1 line-clamp-2 text-sm font-normal text-[#344054] dark:text-[#cecfd2]">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
              pariatur, ipsum dolor.
            </p>
          </span>
        </Toast.Item>
      ),
    });
  }

  return (
    <div className="flex items-center justify-center gap-4">
      <button
        onClick={openDefaultToast}
        ref={defaultButtonRef}
        className="box-border flex items-center whitespace-nowrap rounded-lg border border-[#7f56d9] bg-[#7f56d9] px-3 py-2 text-sm font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#6941c6] dark:border-[#9e77ed] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed]"
      >
        <span>Open default toast</span>
      </button>
      <Portal.Root>
        <Toast.List
          triggerRef={defaultButtonRef}
          className="fixed bottom-0 right-0 flex w-[300px] flex-col-reverse gap-y-4 rounded"
        />
      </Portal.Root>
    </div>
  );
}