import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Card, DropdownPanel, Button } from "../index";
const DropdownPanelDocs = () => {
    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownPanel - Panel Flotante Gen\u00E9rico", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente DropdownPanel muestra un panel flotante con contenido arbitrario (children). A diferencia de DropdownMenu, no maneja una lista de opciones, sino que renderiza lo que le pases." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownPanel, { children: _jsxs("div", { className: "p-4 w-64", children: [_jsx("h4", { className: "font-bold mb-2", children: "Contenido del panel" }), _jsx("p", { className: "text-sm", children: "Aqu\u00ED puedes poner cualquier cosa: texto, im\u00E1genes, componentes, formularios, etc." })] }) }), _jsx("div", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "<- Click en los tres puntos para ver el panel" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el disparador (trigger) usando la prop", " ", _jsx("code", { children: "renderNode" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownPanel, { renderNode: _jsx(Button, { variant: "primary", icon: "fa-filter", children: "Filtros Avanzados" }), children: _jsxs("div", { className: "p-4 w-80 space-y-4", children: [_jsx("h4", { className: "font-bold border-b pb-2", children: "Configuraci\u00F3n de Filtros" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm mb-1", children: "Buscar por nombre" }), _jsx("input", { type: "text", className: "w-full p-2 border rounded", placeholder: "Escribe..." })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { variant: "primary", size: "sm", children: "Aplicar" }) })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "children" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido a mostrar dentro del panel flotante." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "renderNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Elemento personalizado que activa el panel. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos." })] })] })] }) })] })] }) }) }));
};
export default DropdownPanelDocs;
