Notifications

import {ReactNode} from "react"

import {DownloadCloud} from "lucide-react"

import {QButton, useNotification} from "@qui/react"

export default function Context(): ReactNode {
  const {notify} = useNotification()

  return (
    <div className="grid justify-center">
      <QButton
        color="primary"
        onClick={() => {
          notify({
            notification: {
              color: "informative",
              icon: DownloadCloud,
              label: (
                <span>
                  <span>Snapdragon Spaces SDK</span>
                  <span className="q-body-s subtle"> downloading</span>
                </span>
              ),
            },
          })
        }}
        variant="fill"
      >
        Notify
      </QButton>
    </div>
  )
}

import {ReactNode} from "react"

import {DownloadCloud} from "lucide-react"

import {QButton, QNotificationProps, useNotification} from "@qui/react"

const notification: QNotificationProps = {
  color: "informative",
  description: "Description",
  icon: DownloadCloud,
  label: "Label",
}

export default function Placement(): ReactNode {
  const {notify} = useNotification()

  return (
    <div className="grid justify-center">
      <div className="grid grid-cols-2 grid-rows-2 gap-4">
        <QButton
          color="primary"
          onClick={() => notify({notification, placement: "top-left"})}
          variant="fill"
        >
          Top Left
        </QButton>
        <QButton
          color="primary"
          onClick={() => notify({notification, placement: "top-right"})}
          variant="fill"
        >
          Top Right
        </QButton>
        <QButton
          color="primary"
          onClick={() => notify({notification, placement: "bottom-left"})}
          variant="fill"
        >
          Bottom Left
        </QButton>
        <QButton
          color="primary"
          onClick={() => notify({notification, placement: "bottom-right"})}
          variant="fill"
        >
          Bottom Right
        </QButton>
      </div>
    </div>
  )
}

import {ReactNode} from "react"

import {QNotification} from "@qui/react"

export default function Inline(): ReactNode {
  return (
    <div className="grid justify-center">
      <QNotification
        color="positive"
        label={
          <span>
            Snapdragon Spaces SDK{" "}
            <span className="q-body-s">installation complete</span>
          </span>
        }
      />
    </div>
  )
}

import {ReactNode} from "react"

import {AlertTriangle, Check, ChevronRight} from "lucide-react"

import {QButton, QIcon, QNotification} from "@qui/react"

export default function Customization(): ReactNode {
  return (
    <div className="grid justify-center">
      <QNotification
        color="negative"
        description={
          <span className="text-primary q-font-metadata-sm">3 chipsets</span>
        }
        dismissable
        inline
        label={
          <span className="text-primary q-font-heading-xs">
            ProtonMail_v2.3 Job Failed
          </span>
        }
      >
        <div className="grid justify-start gap-2">
          <div className="flex gap-4">
            <div className="flex items-center gap-1">
              <QIcon
                icon={AlertTriangle}
                style={{color: "var(--q-notification-negative)"}}
              />
              <div className="flex items-baseline gap-1">
                <span className="q-body-s q-text-1-primary">9</span>
                <span className="q-body-xs q-text-1-secondary">10.7%</span>
              </div>
            </div>
            <div className="flex items-center gap-1">
              <QIcon
                icon={Check}
                style={{color: "var(--q-notification-positive)"}}
              />
              <div className="flex items-baseline gap-1">
                <span className="q-body-s q-text-1-primary">75</span>
                <span className="q-body-xs q-text-1-secondary">89.3%</span>
              </div>
            </div>
          </div>

          <QButton
            className="justify-self-start"
            endIcon={<QIcon icon={ChevronRight} />}
            size="s"
            variant="outline"
          >
            Job Details
          </QButton>
        </div>
      </QNotification>
    </div>
  )
}