@stampui/blocks 1.1.1 → 2.0.0

package/src/components/blocks/ai-chat-shell.tsx

@@ -1,97 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Menu, Plus, MessageSquare, Settings } from "lucide-react"
-import { cx } from "@/lib/cx"
-import { Button } from "@/components/core/button"
-import { PromptInput } from "@/components/blocks/prompt-input"
-import { TokenStream } from "@/components/blocks/token-stream"
-
-export function AIChatShell() {
-  const [sidebarOpen, setSidebarOpen] = React.useState(true)
-  const [messages, setMessages] = React.useState([
-    { role: "assistant", content: "Hello! I am ready to help you build your next app. What would you like to create today?" }
-  ])
-
-  const handleSubmit = (val: string) => {
-    setMessages([...messages, { role: "user", content: val }])
-    setTimeout(() => {
-      setMessages(prev => [...prev, { role: "assistant", content: "I can certainly help with that! Let's break down the requirements..." }])
-    }, 600)
-  }
-
-  return (
-    <div className="flex h-[600px] w-full overflow-hidden rounded-xl border border-border bg-background">
-      {/* Sidebar */}
-      <div 
-        className={cx(
-          "flex flex-col border-r border-border bg-muted/20 transition-all duration-300",
-          sidebarOpen ? "w-64" : "w-0 overflow-hidden border-r-0"
-        )}
-      >
-        <div className="flex h-14 items-center justify-between px-4 border-b border-border">
-          <span className="font-semibold text-sm">Chats</span>
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <Plus className="h-4 w-4" />
-          </Button>
-        </div>
-        <div className="flex-1 overflow-y-auto p-2 space-y-1">
-          <Button variant="ghost" className="w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground">
-            <MessageSquare className="mr-2 h-4 w-4" /> E-commerce Data Model
-          </Button>
-          <Button variant="ghost" className="w-full justify-start font-normal text-sm text-muted-foreground hover:text-foreground">
-            <MessageSquare className="mr-2 h-4 w-4" /> Fix Next.js Hydration Error
-          </Button>
-        </div>
-        <div className="p-2 border-t border-border">
-          <Button variant="ghost" className="w-full justify-start text-sm">
-            <Settings className="mr-2 h-4 w-4" /> Settings
-          </Button>
-        </div>
-      </div>
-
-      {/* Main Chat Area */}
-      <div className="flex flex-1 flex-col bg-background">
-        <div className="flex h-14 items-center border-b border-border px-4">
-          <Button 
-            variant="ghost" 
-            size="icon" 
-            className="h-8 w-8 mr-2 md:hidden"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-          >
-            <Menu className="h-4 w-4" />
-          </Button>
-          <span className="font-medium text-sm">New Chat</span>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
-          {messages.map((m, i) => (
-            <div key={i} className={cx("flex w-full", m.role === "user" ? "justify-end" : "justify-start")}>
-              <div className={cx(
-                "max-w-[80%] rounded-2xl px-5 py-3 text-sm",
-                m.role === "user" 
-                  ? "bg-primary text-primary-foreground" 
-                  : "bg-muted/50 text-foreground border border-border/50"
-              )}>
-                {m.role === "assistant" && i === messages.length - 1 ? (
-                  <TokenStream content={m.content} speed={20} />
-                ) : (
-                  <span className="whitespace-pre-wrap">{m.content}</span>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="p-4 md:p-6 pt-0">
-          <div className="mx-auto max-w-3xl">
-            <PromptInput onSubmit={handleSubmit} />
-            <div className="mt-2 text-center text-xs text-muted-foreground">
-              AI can make mistakes. Verify important information.
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/blocks/auth-panel.tsx

@@ -1,203 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Eye, EyeOff } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-type AuthMode = "login" | "register"
-
-interface AuthPanelProps {
-  defaultMode?: AuthMode
-  onLogin?: (email: string, password: string) => Promise<void> | void
-  onRegister?: (email: string, password: string, name: string) => Promise<void> | void
-  onGithub?: () => void
-  onGoogle?: () => void
-}
-
-const GitHubIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
-  </svg>
-)
-
-const GoogleIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24">
-    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
-    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
-    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
-    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
-  </svg>
-)
-
-const INPUT_CLS = "h-9 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background"
-
-export function AuthPanel({
-  defaultMode = "login",
-  onLogin,
-  onRegister,
-  onGithub,
-  onGoogle,
-}: AuthPanelProps) {
-  const [mode, setMode] = React.useState<AuthMode>(defaultMode)
-  const [email, setEmail] = React.useState("")
-  const [password, setPassword] = React.useState("")
-  const [name, setName] = React.useState("")
-  const [showPassword, setShowPassword] = React.useState(false)
-  const [loading, setLoading] = React.useState(false)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setLoading(true)
-    try {
-      if (mode === "login") {
-        await onLogin?.(email, password)
-      } else {
-        await onRegister?.(email, password, name)
-      }
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="w-full max-w-sm rounded-2xl border border-border bg-card p-8">
-      <div className="mb-6">
-        <h1 className="text-xl font-semibold tracking-tight">
-          {mode === "login" ? "Sign in" : "Create account"}
-        </h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          {mode === "login"
-            ? "Welcome back. Enter your credentials to continue."
-            : "Get started in seconds. No credit card required."}
-        </p>
-      </div>
-
-      <div className="flex gap-2 mb-6">
-        {onGithub && (
-          <button
-            type="button"
-            onClick={onGithub}
-            className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
-          >
-            <GitHubIcon />
-            GitHub
-          </button>
-        )}
-        {onGoogle && (
-          <button
-            type="button"
-            onClick={onGoogle}
-            className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
-          >
-            <GoogleIcon />
-            Google
-          </button>
-        )}
-      </div>
-
-      {(onGithub || onGoogle) && (
-        <div className="relative flex items-center justify-center mb-6">
-          <div className="absolute inset-0 flex items-center">
-            <div className="w-full border-t border-border" />
-          </div>
-          <span className="relative bg-card px-3 text-xs text-muted-foreground">or continue with email</span>
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {mode === "register" && (
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-foreground">Name</label>
-            <input
-              type="text"
-              placeholder="Your name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              required
-              autoComplete="name"
-              className={INPUT_CLS}
-            />
-          </div>
-        )}
-
-        <div className="space-y-1.5">
-          <label className="text-xs font-medium text-foreground">Email</label>
-          <input
-            type="email"
-            placeholder="you@example.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-            autoComplete="email"
-            className={INPUT_CLS}
-          />
-        </div>
-
-        <div className="space-y-1.5">
-          <div className="flex items-center justify-between">
-            <label className="text-xs font-medium text-foreground">Password</label>
-            {mode === "login" && (
-              <button type="button" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
-                Forgot password?
-              </button>
-            )}
-          </div>
-          <div className="relative">
-            <input
-              type={showPassword ? "text" : "password"}
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              minLength={8}
-              autoComplete={mode === "login" ? "current-password" : "new-password"}
-              className={cx(INPUT_CLS, "pr-9")}
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
-              aria-label={showPassword ? "Hide password" : "Show password"}
-            >
-              {showPassword ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
-            </button>
-          </div>
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50"
-        >
-          {loading ? "Loading…" : mode === "login" ? "Sign in" : "Create account"}
-        </button>
-      </form>
-
-      <p className="mt-5 text-center text-xs text-muted-foreground">
-        {mode === "login" ? (
-          <>
-            Don&apos;t have an account?{" "}
-            <button
-              type="button"
-              onClick={() => setMode("register")}
-              className="font-medium text-foreground hover:underline underline-offset-2"
-            >
-              Sign up
-            </button>
-          </>
-        ) : (
-          <>
-            Already have an account?{" "}
-            <button
-              type="button"
-              onClick={() => setMode("login")}
-              className="font-medium text-foreground hover:underline underline-offset-2"
-            >
-              Sign in
-            </button>
-          </>
-        )}
-      </p>
-    </div>
-  )
-}

package/src/components/blocks/dashboard-shell.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import type { LucideIcon } from "lucide-react"
-import { Menu, X } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-export interface NavItem {
-  label: string
-  href: string
-  icon?: LucideIcon
-  active?: boolean
-}
-
-export interface SidebarConfig {
-  logo?: React.ReactNode
-  nav: NavItem[]
-  footer?: React.ReactNode
-}
-
-export interface DashboardShellProps {
-  sidebar: SidebarConfig
-  header?: {
-    title?: string
-    actions?: React.ReactNode
-  }
-  children: React.ReactNode
-  className?: string
-}
-
-export function DashboardShell({
-  sidebar,
-  header,
-  children,
-  className,
-}: DashboardShellProps) {
-  const [mobileOpen, setMobileOpen] = React.useState(false)
-
-  return (
-    <div className={cx("flex min-h-screen bg-[#070708]", className)}>
-      {mobileOpen && (
-        <div
-          className="fixed inset-0 z-20 bg-[#070708]/80 lg:hidden"
-          onClick={() => setMobileOpen(false)}
-          aria-hidden="true"
-        />
-      )}
-
-      <aside
-        className={cx(
-          "fixed inset-y-0 left-0 z-30 flex w-[240px] flex-col border-r border-[#23252A] bg-[#09090B]",
-          "transition-transform duration-[200ms] ease-out",
-          "lg:static lg:translate-x-0",
-          mobileOpen ? "translate-x-0" : "-translate-x-full"
-        )}
-      >
-        {sidebar.logo && (
-          <div className="flex h-14 shrink-0 items-center border-b border-[#23252A] px-4">
-            {sidebar.logo}
-          </div>
-        )}
-
-        <nav className="flex-1 overflow-y-auto px-2 py-3">
-          <ul className="flex flex-col gap-0.5">
-            {sidebar.nav.map((item, i) => {
-              const Icon = item.icon
-              return (
-                <li key={i}>
-                  <a
-                    href={item.href}
-                    className={cx(
-                      "flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm transition-colors duration-[150ms] ease-out",
-                      item.active
-                        ? "bg-[#101114] text-[#FAFAFA] font-medium"
-                        : "text-muted-foreground hover:bg-[#101114] hover:text-[#FAFAFA]"
-                    )}
-                  >
-                    {Icon && <Icon size={15} strokeWidth={1.75} className="shrink-0" />}
-                    <span className="truncate">{item.label}</span>
-                  </a>
-                </li>
-              )
-            })}
-          </ul>
-        </nav>
-
-        {sidebar.footer && (
-          <div className="shrink-0 border-t border-[#23252A] px-4 py-3">
-            {sidebar.footer}
-          </div>
-        )}
-      </aside>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        {(header || true) && (
-          <header className="flex h-14 shrink-0 items-center gap-3 border-b border-[#23252A] px-4 lg:px-6">
-            <button
-              type="button"
-              onClick={() => setMobileOpen(true)}
-              className="flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-[150ms] ease-out hover:bg-[#101114] hover:text-[#FAFAFA] lg:hidden"
-              aria-label="Open navigation"
-            >
-              <Menu size={16} />
-            </button>
-
-            {header?.title && (
-              <h1 className="text-sm font-semibold text-[#FAFAFA] truncate">
-                {header.title}
-              </h1>
-            )}
-
-            {header?.actions && (
-              <div className="ml-auto flex items-center gap-2">
-                {header.actions}
-              </div>
-            )}
-          </header>
-        )}
-
-        <main className="flex-1 overflow-y-auto p-4 lg:p-6">{children}</main>
-      </div>
-
-      {mobileOpen && (
-        <button
-          type="button"
-          onClick={() => setMobileOpen(false)}
-          className="fixed right-4 top-4 z-40 flex h-8 w-8 items-center justify-center rounded-lg border border-[#23252A] bg-[#09090B] text-muted-foreground transition-colors duration-[150ms] ease-out hover:text-[#FAFAFA] lg:hidden"
-          aria-label="Close navigation"
-        >
-          <X size={14} />
-        </button>
-      )}
-    </div>
-  )
-}

package/src/components/blocks/notification-center.tsx

@@ -1,185 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Bell, Check, X, MessageSquare, AlertCircle, CreditCard, UserPlus } from "lucide-react"
-import { Badge } from "@/components/core/badge"
-import { Button } from "@/components/core/button"
-import { Separator } from "@/components/core/separator"
-import { StatusPulse } from "@/components/core/status-pulse"
-import { cx } from "@/lib/cx"
-
-// ── Types ──────────────────────────────────────────────────────────────────
-
-export type NotificationType = "message" | "alert" | "billing" | "invite" | "system"
-
-export interface Notification {
-  id: string
-  type: NotificationType
-  title: string
-  body: string
-  time: string
-  read: boolean
-  href?: string
-}
-
-export interface NotificationCenterProps {
-  notifications?: Notification[]
-  className?: string
-}
-
-// ── Icons ──────────────────────────────────────────────────────────────────
-
-const typeConfig: Record<NotificationType, { icon: React.ReactNode; color: string }> = {
-  message:  { icon: <MessageSquare className="h-3.5 w-3.5" />, color: "bg-[#101114] text-[#FAFAFA] border-[#23252A]" },
-  alert:    { icon: <AlertCircle className="h-3.5 w-3.5" />, color: "bg-[#101114] text-[#FAFAFA] border-[#23252A]" },
-  billing:  { icon: <CreditCard className="h-3.5 w-3.5" />, color: "bg-[#101114] text-[#FAFAFA] border-[#23252A]" },
-  invite:   { icon: <UserPlus className="h-3.5 w-3.5" />, color: "bg-[#101114] text-[#FAFAFA] border-[#23252A]" },
-  system:   { icon: <AlertCircle className="h-3.5 w-3.5" />, color: "bg-[#101114] text-muted-foreground border-[#23252A]" },
-}
-
-const defaultNotifications: Notification[] = [
-  { id: "1", type: "invite",   title: "New team invite",        body: "Sarah invited you to join Acme Design team.",           time: "2m ago",  read: false },
-  { id: "2", type: "message",  title: "Comment on your block",  body: "Alex left a comment on HeroSection: 'Love the variant...'", time: "14m ago", read: false },
-  { id: "3", type: "billing",  title: "Payment successful",     body: "Your Pro plan has been renewed for $29.",               time: "1h ago",  read: false },
-  { id: "4", type: "alert",    title: "Usage limit approaching",body: "You're at 80% of your monthly API limit.",              time: "3h ago",  read: true },
-  { id: "5", type: "system",   title: "Maintenance window",     body: "Scheduled downtime on May 12 from 02:00–04:00 UTC.",    time: "1d ago",  read: true },
-]
-
-// ── Notification Item ──────────────────────────────────────────────────────
-
-function NotifItem({
-  notif,
-  onRead,
-  onDismiss,
-}: {
-  notif: Notification
-  onRead: (id: string) => void
-  onDismiss: (id: string) => void
-}) {
-  const { icon, color } = typeConfig[notif.type]
-  return (
-    <div
-      className={cx(
-        "flex gap-3 px-4 py-3 transition-colors hover:bg-surface-2/50",
-        !notif.read && "bg-surface-2/30"
-      )}
-      onClick={() => onRead(notif.id)}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e) => e.key === "Enter" && onRead(notif.id)}
-    >
-      <div className={cx("mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border", color)}>
-        {icon}
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-start justify-between gap-2">
-          <p className={cx("text-sm leading-snug", notif.read ? "text-muted-foreground" : "font-medium text-foreground")}>
-            {notif.title}
-          </p>
-          <div className="flex items-center gap-1 shrink-0">
-            <span className="text-[11px] text-muted-foreground whitespace-nowrap">{notif.time}</span>
-            {!notif.read && <StatusPulse status="online" size="sm" pulse={false} />}
-          </div>
-        </div>
-        <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 leading-relaxed">{notif.body}</p>
-      </div>
-      <button
-        type="button"
-        onClick={(e) => { e.stopPropagation(); onDismiss(notif.id) }}
-        className="mt-0.5 shrink-0 opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground transition-opacity"
-        aria-label="Dismiss"
-      >
-        <X className="h-3.5 w-3.5" />
-      </button>
-    </div>
-  )
-}
-
-// ── Root ───────────────────────────────────────────────────────────────────
-
-export function NotificationCenter({ notifications: initial = defaultNotifications, className }: NotificationCenterProps) {
-  const [open, setOpen] = React.useState(false)
-  const [notifs, setNotifs] = React.useState(initial)
-  const unread = notifs.filter((n) => !n.read).length
-  const ref = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (!open) return
-    const close = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener("mousedown", close)
-    return () => document.removeEventListener("mousedown", close)
-  }, [open])
-
-  const markRead = (id: string) => setNotifs((n) => n.map((x) => x.id === id ? { ...x, read: true } : x))
-  const dismiss = (id: string) => setNotifs((n) => n.filter((x) => x.id !== id))
-  const markAllRead = () => setNotifs((n) => n.map((x) => ({ ...x, read: true })))
-
-  return (
-    <div ref={ref} className={cx("relative inline-block", className)}>
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        aria-label={`Notifications${unread > 0 ? `, ${unread} unread` : ""}`}
-        className="relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border text-muted-foreground hover:bg-surface-2 hover:text-foreground transition-colors"
-      >
-        <Bell className="h-4 w-4" />
-        {unread > 0 && (
-          <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background">
-            {unread > 9 ? "9+" : unread}
-          </span>
-        )}
-      </button>
-
-      {open && (
-        <div className="absolute right-0 top-full mt-2 z-50 w-[380px] rounded-xl border border-border bg-background shadow-lg overflow-hidden">
-          {/* Header */}
-          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-semibold">Notifications</span>
-              {unread > 0 && (
-                <Badge variant="neutral" className="h-5 px-1.5 text-[10px] tabular-nums">{unread}</Badge>
-              )}
-            </div>
-            {unread > 0 && (
-              <button
-                type="button"
-                onClick={markAllRead}
-                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <Check className="h-3 w-3" />
-                Mark all read
-              </button>
-            )}
-          </div>
-
-          {/* List */}
-          <div className="max-h-[420px] overflow-y-auto divide-y divide-border/50 group">
-            {notifs.length === 0 ? (
-              <div className="flex flex-col items-center justify-center py-12 text-center px-6">
-                <Bell className="h-8 w-8 text-muted-foreground/30 mb-3" />
-                <p className="text-sm font-medium">All caught up</p>
-                <p className="text-xs text-muted-foreground mt-1">No new notifications</p>
-              </div>
-            ) : (
-              notifs.map((notif) => (
-                <NotifItem key={notif.id} notif={notif} onRead={markRead} onDismiss={dismiss} />
-              ))
-            )}
-          </div>
-
-          {/* Footer */}
-          {notifs.length > 0 && (
-            <>
-              <Separator />
-              <div className="px-4 py-2">
-                <Button variant="ghost" className="w-full text-xs h-8">View all notifications</Button>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}