import{j as o}from"./jsx-runtime-Dfk2JFgj.js";import{r as t}from"./index-CWN_QRa1.js";import{I as w,a0 as _}from"./index-DNsi8NHw.js";import{I as b}from"./index-CIVavKlu.js";import"./CheckGroup-BpaEcK_0.js";import"./index-Cj3pldWQ.js";import"./index-DgIb9kCw.js";import"./index-DllfNvuz.js";import"./index-6WYjB5r3.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./v4-CtRu48qb.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";const i=[{name:"network_check",label:"Network Check"},{name:"info",label:"Information"},{name:"person",label:"Person"},{name:"videocam",label:"Video Camera"},{name:"leaderboard",label:"Leader Board"},{name:"insights",label:"Insights"},{name:"dashboard",label:"Dashboard"},{name:"location_on",label:"Location On"},{name:"build",label:"Build"},{name:"av_timer",label:"Av Timer"},{name:"account_circle",label:"Account Circle"},{name:"power",label:"Power"},{name:"manage_accounts",label:"Manage Accounts"},{name:"help",label:"Help"},{name:"shopping_basket",label:"Shopping Basket"},{name:"feedback",label:"Feedback"},{name:"login",label:"Login"},{name:"logout",label:"Logout"},{name:"credit_card",label:"Credit Card"},{name:"check_box_outline_blank",label:"Checkbox Inline"},{name:"indeterminate_check_box",label:"Checkbox Ind"},{name:"check_box",label:"Checkbox"},{name:"arrow_drop_down",label:"Arrow Down"},{name:"calendar_month",label:"Calendar"},{name:"search",label:"Search"},{name:"download",label:"Download"},{name:"close",label:"Close"},{name:"password",label:"Password"},{name:"key",label:"Key"},{name:"delete",label:"Delete"},{name:"filter_list",label:"Filter List"},{name:"add_box",label:"Add Box"},{name:"arrow_back",label:"Arrow Back"},{name:"get_app",label:"Get App"},{name:"refresh",label:"Refresh"},{name:"table_chart",label:"Table Chart"},{name:"view_column",label:"View Column"},{name:"content_copy",label:"Content Copy"},{name:"merge_type",label:"Merge Type"},{name:"more_vert",label:"More Vert"},{name:"remove_circle",label:"Remove Circle"},{name:"aspect_ratio",label:"Aspect Ratio"},{name:"edit",label:"Edit"},{name:"vpn_key",label:"Vpn Key"},{name:"settings",label:"Settings"},{name:"more_vert_icon",label:"More Vert Icon"},{name:"keyboard_arrow_down",label:"Keyboard Arrow Down"},{name:"arrow_right",label:"Arrow Right"},{name:"check_circle",label:"Check Circle"},{name:"cancel",label:"Cancel"},{name:"check",label:"Check"}],F={title:"Components/Icons",component:b},n=g=>{const[l,u]=t.useState(""),[x,h]=t.useState(i),[r,s]=t.useState(-1),[y,f]=t.useState("");t.useEffect(()=>{const e=i.filter(a=>a.name.toLocaleLowerCase().includes(l.toLocaleLowerCase()));e.length&&h(e)},[l]),t.useEffect(()=>{setTimeout(()=>{s(-1)},5e3)},[r]);const C=(e,a)=>{const c=`<Icons name='${e}' />`;f("Copied!! "+c),navigator.clipboard.writeText(c),s(a)};return o.jsxs("div",{style:{width:"95%",position:"absolute",left:"15px",top:"15px"},children:[o.jsx(w,{placeholder:"Search",icon:"search",value:l,type:"text",onChange:e=>u(e)}),o.jsx("div",{style:{display:"flex",width:"100%",flexWrap:"wrap",justifyContent:"center"},children:x.map((e,a)=>o.jsx(_,{title:y,open:r===a,placement:"top",children:o.jsxs("div",{style:{border:"1px solid #d7d7d7",borderRadius:"10px",padding:"10px",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",width:"130px",margin:"15px",cursor:"pointer"},onClick:()=>C(e.name,a),children:[o.jsx(b,{name:e.name,size:"medium"}),o.jsx("label",{style:{fontFamily:"Roboto, sans-serif",marginTop:"10px",cursor:"pointer"},children:e.label})]})},a))})]})};n.__docgenInfo={description:"",methods:[],displayName:"Iconography"};var m,p,d;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`args => {
  const [valueSearch, setValueSearch] = useState("");
  const [iconList, setIconLIst] = useState(IconListName);
  const [clicked, setClicked] = useState(-1);
  const [copyJsx, setCopyJsx] = useState('');
  useEffect(() => {
    const newList = IconListName.filter(x => x.name.toLocaleLowerCase().includes(valueSearch.toLocaleLowerCase()));
    if (newList.length) {
      setIconLIst(newList);
    }
  }, [valueSearch]);
  useEffect(() => {
    setTimeout(() => {
      setClicked(-1);
    }, 5000);
  }, [clicked]);
  const copyIcon = (name, index) => {
    const jsxIcon = \`<Icons name='\${name}' />\`;
    setCopyJsx('Copied!! ' + jsxIcon);
    navigator.clipboard.writeText(jsxIcon);
    setClicked(index);
  };
  return <div style={{
    width: "95%",
    position: "absolute",
    left: "15px",
    top: "15px"
  }}>
      <Input placeholder="Search" icon="search" value={valueSearch} type="text" onChange={e => setValueSearch(e)} />
      <div style={{
      display: "flex",
      width: "100%",
      flexWrap: "wrap",
      justifyContent: "center"
    }}>
        {iconList.map((item, index) => {
        return <Tooltip key={index} title={copyJsx} open={clicked === index} placement="top">
              <div style={{
            border: "1px solid #d7d7d7",
            borderRadius: "10px",
            padding: "10px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            width: "130px",
            margin: "15px",
            cursor: "pointer"
          }} onClick={() => copyIcon(item.name, index)}>
                <Icons name={item.name} size="medium" />
                <label style={{
              fontFamily: "Roboto, sans-serif",
              marginTop: "10px",
              cursor: "pointer"
            }}>
                  {item.label}
                </label>
              </div>
            </Tooltip>;
      })}
      </div>
    </div>;
}`,...(d=(p=n.parameters)==null?void 0:p.docs)==null?void 0:d.source}}};const M=["Iconography"];export{n as Iconography,M as __namedExportsOrder,F as default};
