{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-with-icons",
  "type": "registry:component",
  "title": "Tabs With Icons",
  "description": "Tabs With Icons",
  "files": [
    {
      "path": "registry/ui-basic/TabsWithIcons.tsx",
      "content": "import React, { useEffect, useRef, useState } from \"react\";\n\nexport default function TabsLgBasicLeadingIcon() {\n\tconst [tabSelected, setTabSelected] = useState({\n\t\tcurrentTab: 1,\n\t\tnoTabs: 3,\n\t});\n\n\tconst wrapperRef = useRef(null);\n\n\tconst handleKeyDown = (e) => {\n\t\tif (e.keyCode === 39) {\n\t\t\tif (wrapperRef.current && wrapperRef.current.contains(e.target)) {\n\t\t\t\tif (\n\t\t\t\t\ttabSelected.currentTab >= 1 &&\n\t\t\t\t\ttabSelected.currentTab < tabSelected.noTabs\n\t\t\t\t) {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.currentTab + 1,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: 1,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (e.keyCode === 37) {\n\t\t\tif (wrapperRef.current && wrapperRef.current.contains(e.target)) {\n\t\t\t\tif (\n\t\t\t\t\ttabSelected.currentTab > 1 &&\n\t\t\t\t\ttabSelected.currentTab <= tabSelected.noTabs\n\t\t\t\t) {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.currentTab - 1,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.noTabs,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/*<!-- Component: Basic lg sized tab with leading icon --> */}\n\t\t\t<section className=\"max-w-full\" aria-multiselectable=\"false\">\n\t\t\t\t<ul\n\t\t\t\t\tclassName=\"flex items-center border-b border-slate-200\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\tref={wrapperRef}\n\t\t\t\t>\n\t\t\t\t\t<li className=\"\" role=\"presentation\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 1\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-1ai\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"1\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 1 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-1ai\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 1 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 1 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"order-2 \">Tab 1</span>\n\t\t\t\t\t\t\t<span className=\"relative only:-mx-6\">\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\tclassName=\"hidden h-6 w-6 sm:block\"\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\t\taria-labelledby=\"title-77a desc-77a\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<title id=\"title-77a\">Icon title</title>\n\t\t\t\t\t\t\t\t\t<desc id=\"desc-77a\">\n\t\t\t\t\t\t\t\t\t\tA more detailed description of the icon\n\t\t\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\td=\"M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"\" role=\"presentation\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 2\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-2ai\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"2\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 2 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-2ai\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 2 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 2 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"order-2 \">Tab 2</span>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclassName=\"hidden h-6 w-6 sm:block\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\taria-labelledby=\"title-77b desc-77b\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<title id=\"title-77b\">Icon title</title>\n\t\t\t\t\t\t\t\t<desc id=\"desc-77b\">\n\t\t\t\t\t\t\t\t\tA more detailed description of the icon\n\t\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\td=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"\" role=\"presentation\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 3\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-3ai\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"3\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 3 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-3ai\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 3 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 3 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"order-2 \">Tab 3</span>\n\t\t\t\t\t\t\t<span className=\"relative only:-mx-6\">\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\t\tclassName=\"hidden h-6 w-6 sm:block\"\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\t\taria-labelledby=\"title-77c desc-77c\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<title id=\"title-77c\">Icon title</title>\n\t\t\t\t\t\t\t\t\t<desc id=\"desc-77c\">\n\t\t\t\t\t\t\t\t\t\tA more detailed description of the icon\n\t\t\t\t\t\t\t\t\t</desc>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\td=\"M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\t\td=\"M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<div className=\"\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 1 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-1ai\"\n\t\t\t\t\t\taria-selected={`${tabSelected.currentTab === 1 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-1ai\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWhat is the recipe for successful achievement? To my mind\n\t\t\t\t\t\t\tthere are just four essential ingredients: Choose a career\n\t\t\t\t\t\t\tyou love, give it the best there is in you, seize your\n\t\t\t\t\t\t\topportunities, and be a member of the team.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 2 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-2ai\"\n\t\t\t\t\t\taria-selected={`${tabSelected.currentTab === 2 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-2ai\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOne must be entirely sensitive to the structure of the\n\t\t\t\t\t\t\tmaterial that one is handling. One must yield to it in tiny\n\t\t\t\t\t\t\tdetails of execution, perhaps the handling of the surface\n\t\t\t\t\t\t\tor grain, and one must master it as a whole.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 3 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-3ai\"\n\t\t\t\t\t\taria-selected={`${tabSelected.currentTab === 3 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-3ai\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEven though there is no certainty that the expected results\n\t\t\t\t\t\t\tof our work will manifest, we have to remain committed to\n\t\t\t\t\t\t\tour work and duties; because, even if the results are\n\t\t\t\t\t\t\tslated to arrive, they cannot do so without the performance\n\t\t\t\t\t\t\tof work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t{/*<!-- End Basic lg sized tab with leading icon --> */}\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}