tailwind-header-tabs
Version:
`HeaderTabs` is a customizable and accessible React component for displaying tabbed navigation with optional icons, count badges, and multi-tab selection via an auto-complete input.
2 lines (1 loc) • 3.15 kB
JavaScript
(function(r,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],n):(r=typeof globalThis<"u"?globalThis:r||self,r.HeaderTabs=n(r.jsxRuntime,r.React))})(this,function(r,n){"use strict";const N=({data:c,selectedData:d,onCountrySelect:m})=>{const[a,x]=n.useState(""),[h,u]=n.useState(!1),f=n.useRef(null),l=c.filter(t=>t.toLowerCase().includes(a.toLowerCase())&&!d.find(i=>i.label===t));n.useEffect(()=>{const t=i=>{f.current&&!f.current.contains(i.target)&&u(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const b=t=>{m(t),x(""),u(!1)};return l.length?r.jsxs("li",{className:`relative ${d.length?"bottom-[-3px]":"mb-1 w-full"}`,ref:f,children:[r.jsx("input",{type:"text",value:a,onFocus:()=>u(!0),onChange:t=>x(t.target.value),className:"border border-slate-200 rounded-lg p-2 w-full",placeholder:"Select country..."}),h&&l.length>0&&r.jsx("ul",{className:"absolute z-10 w-full mt-1 max-h-60 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-lg",children:l.map(t=>r.jsx("li",{className:"px-4 py-2 hover:bg-gray-100 cursor-pointer text-start",onClick:()=>b(t),children:t},t))})]}):null},p={active:"#2563eb",inactive:"#6b7280"},v=({tabs:c,activeTab:d,showCountBadges:m,icons:a,onClickTab:x,activeIconColor:h=p.active,inactiveIconColor:u=p.inactive,countLabel:f={},selectable:l=!1,containerClasses:b=""})=>{const[t,i]=n.useState([]),y=n.useRef({}),k=n.useMemo(()=>(e,o)=>typeof a=="function"?a(o)[e]:null,[a]),S=n.useMemo(()=>e=>r.jsx("span",{className:"inline-flex items-center capitalize text-xs font-semibold bg-gray-100 text-gray-600 px-2 py-[1px] rounded-md ms-2",children:e}),[]),I=e=>{const o=y.current[e.id];o&&o.scrollIntoView({behavior:"smooth",block:"center",inline:"center"}),x(e)},j=e=>{i(o=>o.filter(s=>s.id!==e))};return r.jsx("div",{className:"border-b border-gray-200 dark:border-gray-700",children:r.jsxs("ul",{className:`flex flex-none -mb-px text-sm font-medium text-gray-500 dark:text-gray-400 overflow-hidden gap-x-2 ${b}`,children:[(l?t:c).map(e=>{const o=(d==null?void 0:d.id)===e.id,s=o?h:u,w=k(e.label,s);let g=0;m&&(g=f[e.label]||0);const T=`inline-flex items-center justify-center border-b-2 rounded-t-lg group ${o?"text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500":"border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"}`;return r.jsx("li",{ref:C=>{C&&(y.current[e.id]=C)},children:r.jsxs("button",{"data-id":e.id,className:T,children:[r.jsxs("span",{onClick:()=>I(e),className:"flex items-center p-2 md:p-3 w-max",children:[w,r.jsx("span",{className:`${w&&"ps-2"} text-[${s}] md:text-base text-[13px]`,children:e.label}),m&&g>0&&S(g)]}),l&&r.jsx("span",{onClick:()=>j(e.id),className:"px-2",children:"×"})]})},e.id)}),l&&r.jsx(N,{data:c.map(e=>e.label),selectedData:t,onCountrySelect:e=>{if(t.some(s=>s.label===e))return;const o=c.find(s=>s.label===e);o&&i(s=>[...s,o])}})]})})};return v.defaultProps={activeIconColor:p.active,inactiveIconColor:p.inactive},v});