NotificationCard

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { NotificationCard } from "@hua-labs/ui/advanced/dashboard";

3개

방금 전

1시간 전

2시간 전

Info방금 전

Success방금 전

Warning방금 전

Error방금 전

4개

방금 전

1시간 전

Props


`items*`	`NotificationItem[]`	-	Array of notification items to display
`title`	`string`	`"Notifications"`	Card header title
`emptyMessage`	`string`	`"No notifications"`	Message shown when there are no items
`maxItems`	`number`	-	Maximum number of items to display
`onViewAll`	`() => void`	-	Handler for 'View All' button
`viewAllLabel`	`string`	`"View All"`	Label for the view all button
`showHeader`	`boolean`	`true`	Whether to show the header section
`showCount`	`boolean`	`true`	Whether to show notification count
`emptyState`	`React.ReactNode`	-	Custom empty state component

NotificationItem


`id*`	`string`	-	Unique identifier
`title*`	`string`	-	Notification title
`message*`	`string`	-	Notification message
`timestamp*`	`Date \| string`	-	When the notification was created
`type`	`"info" \| "warning" \| "error" \| "success"`	-	Notification type (affects styling)
`icon`	`IconName \| React.ReactNode`	-	Custom icon
`onClick`	`() => void`	-	Click handler for the item
`href`	`string`	-	Link URL for the item

BasicNotificationCard.tsxtsx

import { NotificationCard } from "@hua-labs/ui/advanced/dashboard";

export function BasicNotificationCard() {
  const notifications = [
    {
      id: "1",
      title: "New Order",
      message: "Order #1234 has been created",
      timestamp: new Date(),
      type: "success" as const
    },
    {
      id: "2",
      title: "System Alert",
      message: "Server maintenance is scheduled",
      timestamp: new Date(Date.now() - 3600000),
      type: "warning" as const
    }
  ];

  return (
    <NotificationCard
      title="Notifications"
      items={notifications}
    />
  );
}

SummaryCard DashboardGridPro