Lemma Notification Bell

1"use client"
2 
3import * as React from "react"
4import { Bell, Check } from "lucide-react"
5import { Badge } from "@/components/lemma/ui/badge"
6import { Button } from "@/components/lemma/ui/button"
7import {
8  Popover,
9  PopoverContent,
10  PopoverTrigger,
11} from "@/components/lemma/ui/popover"
12import { Separator } from "@/components/lemma/ui/separator"
13import { Skeleton } from "@/components/lemma/ui/skeleton"
14import { useRecords, useUpdateRecord } from "lemma-sdk/react"
15import type { LemmaClient } from "lemma-sdk"
16import { cn } from "@/components/lemma/lib/utils"
17 
18export type LemmaNotificationBellAppearance = "default" | "borderless" | "minimal" | "contained"
19export type LemmaNotificationBellDensity = "compact" | "comfortable" | "spacious"
20export type LemmaNotificationBellRadius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
21 
22export interface LemmaNotificationBellProps {
23  client: LemmaClient
24  podId?: string
25  tableName?: string
26  enabled?: boolean
27  titleField?: string
28  bodyField?: string
29  readField?: string
30  timestampField?: string
31  limit?: number
32  appearance?: LemmaNotificationBellAppearance
33  density?: LemmaNotificationBellDensity
34  radius?: LemmaNotificationBellRadius
35  onNotificationClick?: (notification: Record<string, unknown>) => void
36  className?: string
37}
38 
39type NotificationRecord = Record<string, unknown>
40 
41const RADIUS_MAP: Record<LemmaNotificationBellRadius, Record<string, string>> = {
42  none: { surface: "rounded-none", control: "rounded-none", pill: "rounded-none", overlay: "rounded-none" },
43  sm: { surface: "rounded-sm", control: "rounded-sm", pill: "rounded-full", overlay: "rounded-sm" },
44  md: { surface: "rounded-md", control: "rounded-md", pill: "rounded-full", overlay: "rounded-md" },
45  lg: { surface: "rounded-lg", control: "rounded-md", pill: "rounded-full", overlay: "rounded-lg" },
46  xl: { surface: "rounded-xl", control: "rounded-lg", pill: "rounded-full", overlay: "rounded-xl" },
47  "2xl": { surface: "rounded-2xl", control: "rounded-xl", pill: "rounded-full", overlay: "rounded-2xl" },
48  "3xl": { surface: "rounded-3xl", control: "rounded-2xl", pill: "rounded-full", overlay: "rounded-3xl" },
49  full: { surface: "rounded-3xl", control: "rounded-full", pill: "rounded-full", overlay: "rounded-3xl" },
50}
51 
52function bellRadiusClassName(
53  radius: LemmaNotificationBellRadius,
54  kind: "surface" | "control" | "pill" | "overlay",
55): string {
56  return RADIUS_MAP[radius]?.[kind] ?? RADIUS_MAP.lg[kind]
57}
58 
59// … truncated