Popover

popover-1779358677928.tsx

'use client';

import { useState } from 'react';

interface PopoverProps {
  title: string;
  content: string;
  actionText: string;
}

const Popover: React.FC<PopoverProps> = ({ title, content, actionText }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div className="relative inline-block text-left">
      <button
        type="button"
        className="bg-zinc-950 hover:bg-zinc-800 text-gold py-2 px-4 rounded-md"
        onClick={handleToggle}
      >
        Click me
      </button>
      {isOpen && (
        <div
          className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-zinc-950 ring-1 ring-black ring-opacity-5 focus:outline-none"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="user-menu-button"
          tabIndex={-1}
        >
          <div className="block px-4 py-2 text-sm text-gold">{title}</div>
          <div className="block px-4 py-2 text-sm text-zinc-400">{content}</div>
          <div className="block px-4 py-2 text-sm">
            <button
              type="button"
              className="bg-gold hover:bg-gold-200 text-zinc-950 py-2 px-4 rounded-md"
              onClick={handleClose}
            >
              {actionText}
            </button>
          </div>
        </div>
      )}
      {isOpen && (
        <div
          className="fixed inset-0 transition-opacity"
          aria-hidden="true"
          onClick={handleClose}
        >
          <div className="absolute inset-0 bg-zinc-950 opacity-50"></div>
        </div>
      )}
    </div>
  );
};

export default () => (
  <Popover title="Popover title" content="Some content" actionText="Action" />
);

Component info

CategoryOverlays

Frameworkreact

TierFREE

Copies0

About

Popover with rich content

More from Overlays

'use client';

import { useState } from 'react';

interface BottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const BottomSheet = ({ isOpen, onClose }: BottomSheetProps) => {
  const [isDragging, setIsDragging] = useState(false);
  cons

BottomSheet

Overlays

import React, { useState } from 'react';
import './SlideDrawer.css';

interface SlideDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const SlideDrawer: React.FC<SlideDrawerProps> = ({ isOpen, onClose, children

SlideDrawer

Overlays

import React, { useState } from 'react';

interface ContextMenuProps {
  children: React.ReactNode;
}

const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
  const [showMenu, setShowMenu] = useState(false);
  const [x, setX] = useState

ContextMenu

Overlays

'use client';

import React, { useState } from 'react';

interface AlertDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

const AlertDialog: React.FC<AlertDialogProps> = ({
  i

AlertDialog

Overlays