import { jsxs as t, Fragment as l, jsx as a } from "react/jsx-runtime";
import { H as m, C as o, a as n, T as i, ak as e, P as c, A as d, c as p } from "../index-sdOMz8GW.js";
import { Bell as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
import { a as r } from "../1-Df9CGZha.js";
const C = () => /* @__PURE__ */ t(l, { children: [
  /* @__PURE__ */ a(
    m,
    {
      title: "NotificationCard",
      description: `A notification card component for displaying user activity
          notifications with avatar, action type, and timestamp.`,
      icon: /* @__PURE__ */ a("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Followed Notification" }),
      /* @__PURE__ */ a(
        e,
        {
          type: "followed",
          actor: { name: "john_doe", avatar: r },
          time: "2 hours ago",
          url: "/profile/john_doe",
          notifier: "you"
        }
      )
    ] }),
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
      /* @__PURE__ */ a(
        e,
        {
          type: "liked",
          actor: { name: "jane_smith", avatar: r },
          time: "5 minutes ago",
          url: "/post/123",
          notifier: "your post"
        }
      )
    ] }),
    /* @__PURE__ */ t(o, { className: "p-4", children: [
      /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
      /* @__PURE__ */ a(
        e,
        {
          type: "purchased",
          actor: { name: "alice_wonder", avatar: r },
          time: "1 day ago",
          url: "/item/456",
          notifier: "your item"
        }
      )
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ a(
    c,
    {
      componentName: "NotificationCard",
      defaultValues: {
        notifier: "CryptoKing",
        type: "liked",
        time: "2 hours ago",
        url: "#"
      },
      excludeProps: ["actor"],
      children: (s) => /* @__PURE__ */ a(
        e,
        {
          ...s,
          actor: {
            name: "John Doe",
            avatar: "https://randomuser.me/api/portraits/men/1.jpg"
          }
        }
      )
    }
  ),
  /* @__PURE__ */ a(d, { componentName: "NotificationCard" }),
  /* @__PURE__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
    p,
    {
      language: "tsx",
      code: `import { NotificationCard } from '@e-burgos/tucu-ui';

// Followed notification
<NotificationCard
  type="followed"
  actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
  time="2 hours ago"
  url="/profile/john_doe"
  notifier="you"
/>

// Liked notification
<NotificationCard
  type="liked"
  actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
  time="5 minutes ago"
  url="/post/123"
  notifier="your post"
/>

// Purchased notification
<NotificationCard
  type="purchased"
  actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
  time="1 day ago"
  url="/item/456"
  notifier="your item"
/>`
    }
  ) }) }) })
] });
export {
  C as default
};
