Popover

"use client"


import { Bell } from "@phosphor-icons/react"
import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger
} from "@glinui/ui"


export function PopoverNotificationsExample() {
  const items = [
    { title: "Deploy finished", when: "2 min ago" },
    { title: "Sara commented on Pricing", when: "1 h ago" },
    { title: "Invoice INV-1042 paid", when: "Yesterday" }
  ]
  return (
    <div className="mx-auto flex w-full max-w-xs justify-center">
      <Popover>
        <PopoverTrigger asChild><Button variant="outline" size="icon" aria-label="Notifications, 3 new"><Bell aria-hidden="true" /></Button></PopoverTrigger>
        <PopoverContent className="w-72">
          <p className="text-sm font-medium">Notifications</p>
          <ul className="mt-2 grid divide-y divide-[var(--line-soft)]">
            {items.map((item) => (
              <li key={item.title} className="py-2 text-sm"><p>{item.title}</p><p className="text-xs text-[var(--color-muted)]">{item.when}</p></li>
            ))}
          </ul>
        </PopoverContent>
      </Popover>
    </div>
  )
}

import { Button, Popover, PopoverContent, PopoverTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      {variants.map((variant) => (
        <Popover key={variant}>
          <PopoverTrigger asChild><Button size="sm" variant="outline">{variant}</Button></PopoverTrigger>
          <PopoverContent variant={variant} size="sm">
            <p className="font-medium">{variant} popover</p>
            <p className="mt-1 text-[var(--color-muted)]">Quick, anchored content.</p>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}

import { Button, Popover, PopoverContent, PopoverTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <Popover>
      <PopoverTrigger asChild><Button variant="outline">Open glass popover</Button></PopoverTrigger>
      <PopoverContent variant="glass">Frosted, with a readable floor.</PopoverContent>
    </Popover>
  )
}