Notifications

import { AlertTriangle, CreditCard, UserPlus, Wallet } from "lucide-react";

import { cn } from "@waveinno/ui";

const ITEMS = [
  { icon: <AlertTriangle />, tone: "bg-danger-subtle text-danger", title: "Gate 2 camera is offline", line: "Plates are not being read at Gulshan.", when: "2 min", unread: true },
  { icon: <CreditCard />, tone: "bg-primary-subtle text-primary", title: "Refund approved", line: "৳450 to DHA-GA 12-3456 for a double charge.", when: "18 min", unread: true },
  { icon: <Wallet />, tone: "bg-success-subtle text-success", title: "Payout sent", line: "৳1,24,500 to the account ending 4410.", when: "1 h" },
  { icon: <UserPlus />, tone: "bg-warning-subtle text-warning", title: "Sadia joined the team", line: "As an attendant at Banani Tower.", when: "3 h" },
];

export default function NotificationsList() {
  return (
    <div className="bg-surface px-4 py-10 sm:px-6">
      <div className="mx-auto max-w-2xl">
        <div className="flex items-center justify-between">
          <h1 className="disp text-[22px] font-bold leading-8 text-text">Notifications</h1>
          <a href="#" className="text-[13px] font-semibold text-primary hover:underline">
            Mark all as read
          </a>
        </div>
        <ul className="mt-5 divide-y divide-border overflow-hidden rounded-[18px] border border-border bg-raised shadow-[var(--lit)]">
          {ITEMS.map((n) => (
            <li key={n.title} className={cn("flex gap-3.5 px-5 py-4", n.unread && "bg-primary-subtle/30")}>
              <span className={cn("grid size-9 shrink-0 place-items-center rounded-full [&_svg]:size-4", n.tone)}>{n.icon}</span>
              <div className="min-w-0 flex-1">
                <p className="text-[14px] font-semibold text-text">{n.title}</p>
                <p className="mt-0.5 text-[13px] text-muted">{n.line}</p>
              </div>
              <div className="flex shrink-0 flex-col items-end gap-1.5">
                <span className="text-[12px] text-muted">{n.when}</span>
                {n.unread ? <span className="size-2 rounded-full bg-primary" aria-label="Unread" /> : null}
              </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

"use client";

import { ArrowRight, X } from "lucide-react";
import * as React from "react";

import { Alert, Button } from "@waveinno/ui";

export default function NotificationsBanners() {
  const [shown, setShown] = React.useState({ trial: true, outage: true, success: true });
  const hide = (k: keyof typeof shown) => setShown((s) => ({ ...s, [k]: false }));
  return (
    <div className="bg-surface">
      {shown.trial ? (
        <div className="relative flex items-center justify-center gap-3 bg-ink px-10 py-2.5 text-[13px] text-white">
          <span>
            <b className="font-semibold">9 days left</b> in your trial.
          </span>
          <a href="#" className="inline-flex items-center gap-1 font-semibold underline-offset-2 hover:underline">
            Choose a plan <ArrowRight className="size-3.5" />
          </a>
          <button type="button" aria-label="Dismiss" onClick={() => hide("trial")} className="absolute right-3 grid size-6 cursor-pointer place-items-center rounded-full text-white/70 hover:bg-white/10 hover:text-white">
            <X className="size-3.5" />
          </button>
        </div>
      ) : null}
      <div className="mx-auto max-w-3xl space-y-3 px-4 py-10 sm:px-6">
        {shown.outage ? (
          <Alert tone="warning" title="Payments are slow for Nagad" onDismiss={() => hide("outage")}>
            Nagad is answering slowly since 4:10 pm. Drivers can still pay by bKash, card or cash.
          </Alert>
        ) : null}
        {shown.success ? (
          <Alert tone="success" title="Shift closed, cash matches" onDismiss={() => hide("success")}>
            Rafiq counted ৳42,300 at Gate 1, the same as the system.
          </Alert>
        ) : null}
        <Alert tone="info" variant="accent" title="Plate reading at night is here">
          Turn it on in Settings → Gates. Free on every plan this month.
        </Alert>
        <Alert tone="danger" variant="outline" title="Gate 2 camera is offline">
          Plates are not being read. Attendants open the gate by hand until it is back.
        </Alert>
        {!shown.outage || !shown.success || !shown.trial ? (
          <Button variant="ghost" size="sm" onClick={() => setShown({ trial: true, outage: true, success: true })}>
            Show the dismissed ones again
          </Button>
        ) : null}
      </div>
    </div>
  );
}