https://fontpair.co/assets/Supercons-DuVhiUur.js

1import{j as e,r as i,x as h,a9 as j,aa as y,B as x,w as v,ab as C,a7 as w,i as I,H as T,cx as k,Y as _,$ as E,X as L,a1 as z}from"./index-CZw-qp54.js";import{I as R}from"./IconEmbedCard-CCfxZrQ2.js";import{T as P}from"./TwoColumnHero-BEZQJD8A.js";import{B}from"./BackToTop-CLWCpmbB.js";import{S as F}from"./slider-qqKsmg8L.js";import{s as A}from"./index-CYZxSbZL.js";import{C as H}from"./copy-BO-ZK-FY.js";import{C as M}from"./code-CH-TbdBV.js";import{u as D}from"./useIconSearch-BRwBK8_v.js";import"./badge-CjwnJ8B-.js";import"./arrow-up-C_yr0WMO.js";function O(s,r){return`import Icon from 'supercons'
2
3<Icon glyph="${s}" size={${r}} />`}function V({iconName:s,size:r}){const[n,o]=i.useState(!1),[t,p]=i.useState(!1),a=O(s,r),c=i.useCallback(async m=>{m.stopPropagation();try{await navigator.clipboard.writeText(s),o(!0),h.success("Copied icon name"),setTimeout(()=>o(!1),2e3)}catch{h.error("Failed to copy")}},[s]),l=i.useCallback(async m=>{m.stopPropagation();try{await navigator.clipboard.writeText(a),p(!0),h.success("Copied code snippet"),setTimeout(()=>p(!1),2e3)}catch{h.error("Failed to copy")}},[a]);return e.jsxs("div",{className:"group relative flex flex-col items-center justify-center p-4 rounded-card bg-card hover:bg-accent/50 transition-colors cursor-pointer",children:[e.jsx(A,{glyph:s,size:r}),e.jsx("span",{className:"mt-3 text-xs text-muted-foreground font-mono truncate max-w-full text-center",children:s}),e.jsxs("div",{className:"absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",children:[e.jsxs(j,{children:[e.jsx(y,{asChild:!0,children:e.jsx(x,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:c,children:n?e.jsx(v,{className:"h-3.5 w-3.5 text-green-500"}):e.jsx(H,{className:"h-3.5 w-3.5"})})}),e.jsx(C,{side:"top",children:"Copy name"})]}),e.jsxs(j,{children:[e.jsx(y,{asChild:!0,children:e.jsx(x,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:l,children:t?e.jsx(v,{className:"h-3.5 w-3.5 text-green-500"}):e.jsx(M,{className:"h-3.5 w-3.5"})})}),e.jsx(C,{side:"top",children:"Copy code"})]})]})]})}function $(){return e.jsxs("div",{className:"flex flex-col items-center justify-center p-4 rounded-card bg-card animate-pulse",children:[e.jsx("div",{className:"w-8 h-8 bg-muted rounded"}),e.jsx("div",{className:"mt-3 h-3 w-16 bg-muted rounded"})]})}function Q({icons:s,size:r,isLoading:n=!1,hasMore:o=!1,onLoadMore:t,displayedCount:p=0,totalCount:a=0}){return n&&s.length===0?e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3",children:Array.from({length:60}).map((c,l)=>e.jsx($,{},l))}):e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"text-sm text-muted-foreground",children:["Showing ",p.toLocaleString()," of ",a.toLocaleString()," icons"]}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3",children:s.map(c=>e.jsx(V,{iconName:c,size:r},c))}),o&&t&&e.jsx("div",{className:"flex justify-center pt-6",children:e.jsxs(x,{variant:"secondary",size:"lg",onClick:t,className:"gap-2",children:["Load more icons",e.jsx(w,{className:"h-4 w-4"})]})})]})}const Y=z(()=>import("./supercons-icons-kVK5FE9H.js"),[]),g=[16,20,24,32,40,48];function re(){const[s,r]=i.useState([]),[n,o]=i.useState(!0),[t,p]=i.useState(32);i.useEffect(()=>{o(!0),Y.then(d=>{r(d.default),o(!1)}).catch(d=>{console.error("Failed to load icons:",d),o(!1)})},[]);const{searchQuery:a,setSearchQuery:c,displayedIcons:l,hasMore:m,loadMore:u,isSearching:N,totalCount:b,displayedCount:S}=D({icons:s,debounceMs:200,pageSize:300}),f=()=>c("");return e.jsxs(e.Fragment,{children:[e.jsxs(I,{children:[e.jsx("title",{children:"Supercons Icons — Fontpair"}),e.jsx("meta",{name:"description",content:"Browse 460+ friendly open-source React icons from Supercons."})]}),e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(T,{}),e.jsx(P,{title:k.name,description:"A friendly, open-source React icon set with 460+ glyphs.",backLink:{href:"/icons",label:"Icons"},tags:[{href:"#",label:"React Component"},{href:"#",label:"MIT License"}]}),e.jsx("section",{className:"border-b border-border bg-card",children:e.jsx("div",{className:"px-4 md:px-6 lg:px-8 py-4",children:e.jsxs("div",{className:"flex flex-col md:flex-row gap-4 items-start md:items-center",children:[e.jsxs("div",{className:"relative flex-1 max-w-md",children:[e.jsx(_,{className:"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),e.jsx(E,{value:a,onChange:d=>c(d.target.value),placeholder:"Search icons...",className:"pl-9 pr-9"}),a&&e.jsx(x,{variant:"ghost",size:"icon",className:"absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7",onClick:f,children:e.jsx(L,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm text-muted-foreground whitespace-nowrap",children:["Size: ",t,"px"]}),e.jsx("div",{className:"w-24",children:e.jsx(F,{value:[g.indexOf(t)],onValueChange:([d]

3)=>p(g[d]),max:g.length-1,step:1,className:"w-full"})})]})]})})}),e.jsx("main",{className:"px-4 md:px-6 lg:px-8 py-8",children:e.jsxs("div",{className:"grid lg:grid-cols-[1fr_320px] gap-8",children:[e.jsxs("div",{children:[!n&&l.length===0&&a&&e.jsxs("div",{className:"text-center py-12 border border-dashed border-border rounded-lg",children:[e.jsxs("h3",{className:"text-xl font-semibold mb-2",children:['No icons found for "',a,'"']}),e.jsx("p",{className:"text-muted-foreground mb-4",children:"Try adjusting your search term."}),e.jsx(x,{variant:"secondary",onClick:f,children:"Clear search"})]}),(n||l.length>0)&&e.jsx(Q,{icons:l,size:t,isLoading:n||N,hasMore:m,onLoadMore:u,displayedCount:S,totalCount:b})]}),e.jsx("aside",{className:"lg:sticky lg:top-[140px] lg:self-start space-y-6",children:e.jsx(R,{library:"supercons"})})]})}),e.jsx(B,{})]})]})}export{re as default};