Alert

"use client";

import * as Alert from "@lora-ui/alert";

export default function Bsse() {
  return (
    <Alert.Root className="mx-auto flex w-[400px] items-start justify-between space-x-4 rounded-xl border border-[#eaecf0] bg-[#ffffff] p-4 dark:border-[#1f242f] dark:bg-[#0c111d]">
      <Alert.Icon className="h-10 w-10 rounded-full bg-[#7f56d9] dark:bg-[#7f56d9]" />
      <Alert.Content className="ml-2 mr-2 flex-1 items-center">
        <Alert.Title className="text-sm font-semibold text-[#101828] dark:text-[#f5f5f6]">
          We’ve just released a new feature
          <span className="ml-2 text-sm font-normal text-[#667085] dark:text-[#94969c]">
            2 mins ago
          </span>
        </Alert.Title>

        <Alert.Description 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.
        </Alert.Description>
        <Alert.Action className="mt-3 flex space-x-3">
          <button className="text-sm font-semibold text-[#475467] dark:text-[#94969c]">
            Dismiss
          </button>
          <button className="text-sm font-semibold text-[#6941c6] dark:text-[#cecfd2]">
            View changes
          </button>
        </Alert.Action>
      </Alert.Content>
      <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>
    </Alert.Root>
  );
}