[
  {
    "path": ".eslintrc.json",
    "content": "{\n  \"extends\": \"next/core-web-vitals\"\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2023 Codescandy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# DashUI Next.js Free Admin Template 🚀\n\nA **modern, responsive, and free Next.js Admin Dashboard Template** built by [Codescandy](https://codescandy.com/).  \nPerfect for building dashboards, admin panels, and web applications.\n\n![DashUI Next.js Free Admin Template]([Screenshot-2025-08-31-002120.png](https://postimg.cc/gLYbhSDf))\n\n---\n\n## 📋 Features\n\n- ⚡ Built with **Next.js 13**\n- 🎨 Modern UI with Tailwind CSS\n- 📱 Fully responsive (mobile-first design)\n- 📊 Pre-built dashboard pages\n- 🛠 Developer-friendly structure\n- 🆓 100% Free & Open Source\n\n---\n\n## 📂 Getting Started\n\n### 1️⃣ Clone the Repository\n\n```bash\ngit clone https://github.com/codescandy/dashui-free-nextjs-admin-template.git\ncd dashui-free-nextjs-admin-template\n```\n\n### 2️⃣ Install Dependencies\n\n```bash\nnpm install\n```\n\n### 3️⃣ Start Development Server\n\n```bash\nnpm run dev\n```\n\nNow, open [http://localhost:3000](http://localhost:3000) in your browser.\n\n### 4️⃣ Build for Production\n\n```bash\nnpm run build\n```\n\n---\n\n## 🌍 Deploy on Vercel\n\nOne-click deployment to Vercel:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcodescandy%2Fdashui-free-nextjs-admin-template.git&project-name=dashui-nextjs-admin-dashboard&repository-name=dashui-free-nextjs-admin-template&skippable-integrations=1)\n\n---\n\n## 🤝 Contributing\n\nWant to contribute? Follow these steps:\n\n1. **Fork** the repository  \n2. Create a new branch: `git checkout -b feature-name`  \n3. Make your changes & commit: `git commit -m \"Added new feature\"`  \n4. Push your branch: `git push origin feature-name`  \n5. Open a **Pull Request** 🎉  \n\nWe welcome all contributions to improve DashUI.\n\n---\n\n## 🔗 Useful Links\n\n- [Bootstrap Template](https://dashui.codescandy.com/free-bootstrap-5-admin-dashboard-template.html)\n- [React Template](https://dashui.codescandy.com/free-reactjs-admin-dashboard-template.html)\n- [Next.js Template](https://dashui.codescandy.com/free-next-js-admin-dashboard-template.html)\n- [Nuxt.js Template](https://dashui.codescandy.com/free-nuxt-js-admin-dashboard-template.html)\n- [Tailwind Template](https://dashui.codescandy.com/free-tailwindcss-admin-dashboard-html-template.html)\n\n---\n\n## 🎨 Figma Design File\n\nGet the ready-to-use [Figma File](https://www.figma.com/community/file/1259105309122518026/dash-ui-admin-dashboard-template).\n\n---\n\n## 💎 Upgrade to PRO\n\nGet **Dash UI Pro** for advanced features:\n\n| Free Version | DashUI PRO |\n|--------------|------------|\n| ✔️ 1 Dashboard | ✔️ 6 Dashboards |\n| ✔️ 11 Pages | ✔️ 60+ Pages |\n| ✔️ Basic Docs | ✔️ Full Documentation |\n| ✔️ 4 Plugins | ✔️ 10+ Plugins |\n| ✔️ Source Files | ✔️ Source Files |\n| ❌ Dark Mode | ✔️ Dark Mode |\n| ❌ Layout Options | ✔️ Layout Variations |\n| ❌ Priority Support | ✔️ Priority Support |\n| - | ✔️ Free Updates |\n\n👉 [Free Download](https://dashui.codescandy.com/free-next-js-admin-dashboard-template.html) | [Get PRO](https://dashui.codescandy.com/next-js-admin-dashboard-template.html)\n\n---\n\n## 📞 Support\n\n- [Open a Discussion](https://github.com/codescandy/Dash-UI/discussions)\n- [Contact Us](https://codescandy.com/contact-us/)\n\n---\n\n### 💡 Quick Note\nIf you like this project, don’t forget to ⭐ **star the repository** on GitHub!\n"
  },
  {
    "path": "app/(auth)/authentication/forget-password/loading.js",
    "content": "export default function Loading() {\n    // You can add any UI inside Loading, including a Skeleton.\n    return <span>Loading</span>\n  }"
  },
  {
    "path": "app/(auth)/authentication/forget-password/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimport Link from 'next/link';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst ForgetPassword = () => {\n  const hasMounted = useMounted();\n  return (\n    <Row className=\"align-items-center justify-content-center g-0 min-vh-100\">\n      <Col xxl={4} lg={6} md={8} xs={12} className=\"py-8 py-xl-0\">\n        {/* Card */}\n        <Card className=\"smooth-shadow-md\">\n          {/* Card body */}\n          <Card.Body className=\"p-6\">\n            <div className=\"mb-4\">\n              <Link href=\"/\"><Image src=\"/images/brand/logo/logo-primary.svg\" className=\"mb-2\" alt=\"\" /></Link>\n              <p className=\"mb-6\">Don&apos;t worry, we&apos;ll send you an email to reset your password.</p>\n            </div>\n            {/* Form */}\n            {hasMounted && \n            <Form>\n              {/* Email */}\n              <Form.Group className=\"mb-3\" controlId=\"email\">\n                <Form.Label>Email</Form.Label>\n                <Form.Control type=\"email\" name=\"email\" placeholder=\"Enter Your Email\" />\n              </Form.Group>\n              {/* Button */}\n              <div className=\"mb-3 d-grid\">\n                <Button variant=\"primary\" type=\"submit\">Reset Password</Button>\n              </div>\n              <span>Don&apos;t have an account? <Link href=\"/authentication/sign-in\">Sign In</Link></span>\n            </Form>\n            }\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default ForgetPassword"
  },
  {
    "path": "app/(auth)/authentication/layout.js",
    "content": "'use client'\n// import node module libraries\nimport { Container } from 'react-bootstrap';\n\nexport default function AuthLayout({ children }) {\n  return (\n    <Container className=\"d-flex flex-column\">  \n        {children}\n    </Container>\n  )\n}\n"
  },
  {
    "path": "app/(auth)/authentication/sign-in/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimport Link from 'next/link';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst SignIn = () => {\n  const hasMounted = useMounted();\n  return (\n    <Row className=\"align-items-center justify-content-center g-0 min-vh-100\">\n      <Col xxl={4} lg={6} md={8} xs={12} className=\"py-8 py-xl-0\">\n        {/* Card */}\n        <Card className=\"smooth-shadow-md\">\n          {/* Card body */}\n          <Card.Body className=\"p-6\">\n            <div className=\"mb-4\">\n              <Link href=\"/\"><Image src=\"/images/brand/logo/logo-primary.svg\" className=\"mb-2\" alt=\"\" /></Link>\n              <p className=\"mb-6\">Please enter your user information.</p>\n            </div>\n            {/* Form */}\n            {hasMounted &&\n              <Form>\n                {/* Username */}\n                <Form.Group className=\"mb-3\" controlId=\"username\">\n                  <Form.Label>Username or email</Form.Label>\n                  <Form.Control type=\"email\" name=\"username\" placeholder=\"Enter address here\" required=\"\" />\n                </Form.Group>\n\n                {/* Password */}\n                <Form.Group className=\"mb-3\" controlId=\"password\">\n                  <Form.Label>Password</Form.Label>\n                  <Form.Control type=\"password\" name=\"password\" placeholder=\"**************\" required=\"\" />\n                </Form.Group>\n\n                {/* Checkbox */}\n                <div className=\"d-lg-flex justify-content-between align-items-center mb-4\">\n                  <Form.Check type=\"checkbox\" id=\"rememberme\">\n                    <Form.Check.Input type=\"checkbox\" />\n                    <Form.Check.Label>Remember me</Form.Check.Label>\n                  </Form.Check>\n                </div>\n                <div>\n                  {/* Button */}\n                  <div className=\"d-grid\">\n                    <Button variant=\"primary\" type=\"submit\">Sign In</Button>\n                  </div>\n                  <div className=\"d-md-flex justify-content-between mt-4\">\n                    <div className=\"mb-2 mb-md-0\">\n                      <Link href=\"/authentication/sign-up\" className=\"fs-5\">Create An Account </Link>\n                    </div>\n                    <div>\n                      <Link href=\"/authentication/forget-password\" className=\"text-inherit fs-5\">Forgot your password?</Link>\n                    </div>\n                  </div>\n                </div>\n              </Form>}\n\n\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\n\nexport default SignIn"
  },
  {
    "path": "app/(auth)/authentication/sign-up/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimport Link from 'next/link';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst SignUp = () => {\n  const hasMounted = useMounted();\n  return (\n    <Row className=\"align-items-center justify-content-center g-0 min-vh-100\">\n      <Col xxl={4} lg={6} md={8} xs={12} className=\"py-8 py-xl-0\">\n        {/* Card */}\n        <Card className=\"smooth-shadow-md\">\n          {/* Card body */}\n          <Card.Body className=\"p-6\">\n            <div className=\"mb-4\">\n              <Link href=\"/\"><Image src=\"/images/brand/logo/logo-primary.svg\" className=\"mb-2\" alt=\"\" /></Link>\n              <p className=\"mb-6\">Please enter your user information.</p>\n            </div>\n            {/* Form */}\n            {hasMounted && \n            <Form>\n              {/* Username */}\n              <Form.Group className=\"mb-3\" controlId=\"username\">\n                <Form.Label>Username or email</Form.Label>\n                <Form.Control type=\"text\" name=\"username\" placeholder=\"User Name\" required=\"\" />\n              </Form.Group>\n\n              {/* Email */}\n              <Form.Group className=\"mb-3\" controlId=\"email\">\n                <Form.Label>Email</Form.Label>\n                <Form.Control type=\"email\" name=\"email\" placeholder=\"Enter address here\" required=\"\" />\n              </Form.Group>\n\n              {/* Password */}\n              <Form.Group className=\"mb-3\" controlId=\"password\">\n                <Form.Label>Password</Form.Label>\n                <Form.Control type=\"password\" name=\"password\" placeholder=\"**************\" required=\"\" />\n              </Form.Group>\n\n              {/* Confirm Password */}\n              <Form.Group className=\"mb-3\" controlId=\"confirm-password\">\n                <Form.Label>Confirm Password</Form.Label>\n                <Form.Control type=\"password\" name=\"confirm-password\" placeholder=\"**************\" required=\"\" />\n              </Form.Group>\n\n              {/* Checkbox */}\n              <div className=\"mb-3\">\n                <Form.Check type=\"checkbox\" id=\"check-api-checkbox\">\n                  <Form.Check.Input type=\"checkbox\" />\n                  <Form.Check.Label>\n                    I agree to the <Link href=\"#\"> Terms of Service </Link> and <Link href=\"#\"> Privacy Policy.</Link>\n                  </Form.Check.Label>\n                </Form.Check>\n              </div>\n\n              <div>\n                {/* Button */}\n                <div className=\"d-grid\">\n                  <Button variant=\"primary\" type=\"submit\">Create Free Account</Button>\n                </div>\n                <div className=\"d-md-flex justify-content-between mt-4\">\n                  <div className=\"mb-2 mb-md-0\">\n                    <Link href=\"/authentication/sign-in\" className=\"fs-5\">Already member? Login </Link>\n                  </div>\n                  <div>\n                    <Link href=\"/authentication/forget-password\" className=\"text-inherit fs-5\">Forgot your password?</Link>\n                  </div>\n                </div>\n              </div>\n            </Form>\n            }\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default SignUp"
  },
  {
    "path": "app/(dashboard)/changelog/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Col, Row, Container } from 'react-bootstrap';\n\n// import sub components\nimport Version_01_00_00 from 'sub-components/changelog/Version_01_00_00';\nimport Version_01_01_00 from 'sub-components/changelog/Version_01_01_00';\nimport Version_01_01_01 from 'sub-components/changelog/Version_01_01_01';\n\nconst ChangeLog = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex justify-content-between align-items-center\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-0 h2 fw-bold\">Changelog</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0\">\n\t\t\t\t\t\t\t\tWe’re constantly improving & updating Dashui. See the latest features and improvements.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t<Version_01_01_01 />\n\t\t\t<hr />\n\t\t\t<Version_01_01_00 />\n\t\t\t<hr />\n\t\t\t<Version_01_00_00 />\n\t\t</Container>\n\t);\n};\n\nexport default ChangeLog;\n"
  },
  {
    "path": "app/(dashboard)/components/accordions/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Accordion, Nav, Tab, Tabs, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode } from 'widgets';\n\n// import react code data file\nimport {\n\tAccordionBasicCode,\n\tAccordionFlushCode\n} from 'data/code/AccordionCode';\n\nconst Accordions = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Accordions</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tBuild vertically collapsing accordions in combination with the\n\t\t\t\t\t\t\t\tCollapse component.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  basic  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"accordion-example\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Example</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tClick the accordions below to expand/collapse the accordion\n\t\t\t\t\t\t\tcontent.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* accordion started */}\n\t\t\t\t\t\t\t\t\t\t<Accordion defaultActiveKey=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #1</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 1.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #2</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 2.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #3</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 3.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t\t\t\t\t\t{/* end of accordion started */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AccordionBasicCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  basic  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"accordion-example\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Flush</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>flush</code> to remove the default background-color,\n\t\t\t\t\t\t\tsome borders, and some rounded corners to render accordions\n\t\t\t\t\t\t\tedge-to-edge with their parent container.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\" id=\"uncontrolled-tab-example\">\n\t\t\t\t\t\t\t\t\t\t{/* accordion started */}\n\t\t\t\t\t\t\t\t\t\t<Accordion defaultActiveKey=\"0\" flush>\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"0\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #1</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 1.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #2</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 2.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Accordion.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Header>Accordion Item #3</Accordion.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>This is the accordion body of item 3.</strong>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIt is hidden by default, until the collapse plugin\n\t\t\t\t\t\t\t\t\t\t\t\t\tadds the appropriate classes that we use to style each\n\t\t\t\t\t\t\t\t\t\t\t\t\telement. These classes control the overall appearance,\n\t\t\t\t\t\t\t\t\t\t\t\t\tas well as the showing and hiding via CSS transitions.\n\t\t\t\t\t\t\t\t\t\t\t\t\tYou can modify any of this with custom CSS or\n\t\t\t\t\t\t\t\t\t\t\t\t\toverriding our default variables. It&apos;s also worth\n\t\t\t\t\t\t\t\t\t\t\t\t\tnoting that just about any HTML can go within the{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Item&gt;</code> &rarr;{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<code>&lt;Accordion.Body&gt;</code> though the\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition does limit overflow.\n\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Accordion.Item>\n\t\t\t\t\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t\t\t\t\t\t{/* end of accordion started */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AccordionFlushCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\t\t</Container>\n\t);\n};\nexport default Accordions;\n"
  },
  {
    "path": "app/(dashboard)/components/alerts/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport { Col, Row, Card, Alert, Button, Nav, Tab, Container } from 'react-bootstrap';\nimport {\n\tExclamationCircleFill,\n\tCheckCircleFill,\n\tExclamationTriangleFill\n} from 'react-bootstrap-icons';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tSimpleAlert,\n\tLinkAlert,\n\tAdditionalAlert,\n\tAlertWithIcon,\n\tDismissingAlert\n} from 'data/code/AlertsCode';\n\nconst Alerts = () => {\n\tconst AlertDismissible = () => {\n\t\tconst [show, setShow] = useState(true);\n\t\tif (show) {\n\t\t\treturn (\n\t\t\t\t<Alert variant=\"danger\" onClose={() => setShow(false)} dismissible>\n\t\t\t\t\t<Alert.Heading>Holy guacamole!</Alert.Heading>You should check in on\n\t\t\t\t\tsome of those fields below.\n\t\t\t\t</Alert>\n\t\t\t);\n\t\t}\n\t\treturn <Button onClick={() => setShow(true)}>Show Alert</Button>;\n\t};\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Alerts</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tProvide contextual feedback messages for typical user actions\n\t\t\t\t\t\t\t\twith the handful of available and flexible alert messages.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* simple alert  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"simple-alert\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Simple Alert </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAlerts are available for any length of text, as well as an\n\t\t\t\t\t\t\toptional dismiss button. For proper styling, use one of the eight{' '}\n\t\t\t\t\t\t\t<code>variants</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a primary alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"secondary\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a secondary alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"success\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a success alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"danger\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a danger alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"warning\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a warning alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"info\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a info alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"light\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a light alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a dark alert—check it out!\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SimpleAlert} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of simple alert  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* link alert  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"simple-alert\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Link Alert </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFor links, use the <code> &#60;/Alert.Link&#62;</code> component\n\t\t\t\t\t\t\tto provide matching colored links within any alert.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a primary alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"secondary\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a secondary alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"success\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a success alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"danger\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a danger alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"warning\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a warning alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"info\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a info alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"light\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a light alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\tThis is a dark alert with{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Link href=\"#\">an example link</Alert.Link>. Give it\n\t\t\t\t\t\t\t\t\t\t\ta click if you like.\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={LinkAlert} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of link alert  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* additional content  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"additional-content\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Additional content </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAlerts can also contain additional HTML elements like headings,\n\t\t\t\t\t\t\tparagraphs and dividers.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"success\">\n\t\t\t\t\t\t\t\t\t\t\t<Alert.Heading>Well done!</Alert.Heading>\n\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\tAww yeah, you successfully read this important alert\n\t\t\t\t\t\t\t\t\t\t\t\tmessage. This example text is going to run a bit longer\n\t\t\t\t\t\t\t\t\t\t\t\tso that you can see how spacing within an alert works\n\t\t\t\t\t\t\t\t\t\t\t\twith this kind of content.\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t<hr />\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-0\">\n\t\t\t\t\t\t\t\t\t\t\t\tWhenever you need to, be sure to use margin utilities to\n\t\t\t\t\t\t\t\t\t\t\t\tkeep things nice and tidy.\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AdditionalAlert} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of additional content */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* icons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"alert-icons\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Icons </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSimilarly, you can use{' '}\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.npmjs.com/package/react-bootstrap-icons\"\n\t\t\t\t\t\t\t\trel=\"noreferrer\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t(React) Bootstrap Icons\n\t\t\t\t\t\t\t</a>{' '}\n\t\t\t\t\t\t\tto create alerts with icons. Depending on your icons and content,\n\t\t\t\t\t\t\tyou may want to add more utilities or custom styles.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\t<ExclamationCircleFill size={25} className=\"me-1\" />\n\t\t\t\t\t\t\t\t\t\t\tAn example alert with an icon\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"success \">\n\t\t\t\t\t\t\t\t\t\t\t<CheckCircleFill size={25} className=\"me-1\" />\n\t\t\t\t\t\t\t\t\t\t\tAn example success alert with an icon\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"warning\">\n\t\t\t\t\t\t\t\t\t\t\t<ExclamationTriangleFill size={25} className=\"me-1\" />\n\t\t\t\t\t\t\t\t\t\t\tAn example warning alert with an icon\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t\t<Alert variant=\"danger\">\n\t\t\t\t\t\t\t\t\t\t\t<ExclamationTriangleFill size={25} className=\"me-1\" />\n\t\t\t\t\t\t\t\t\t\t\tAn example danger alert with an icon\n\t\t\t\t\t\t\t\t\t\t</Alert>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AlertWithIcon} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of icons */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* icons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"dismissing\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Dismissing </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd the <code>dismissible</code> prop to add a functioning dismiss\n\t\t\t\t\t\t\tbutton to the Alert.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<AlertDismissible />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DismissingAlert} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of icons */}\n\t\t</Container>\n\t);\n};\nexport default Alerts;\n"
  },
  {
    "path": "app/(dashboard)/components/badges/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Button, Badge, Tab, Nav, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tSimpleBadgeCode,\n\tBadgeWithButtonCode,\n\tPillBadgesCode\n} from 'data/code/BadgesCode';\n\nconst Badges = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Badges</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for badges, our small count and\n\t\t\t\t\t\t\t\tlabeling component.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* Contextual  badges   */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"contextual-badge\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Contextual badges</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd any of the below mentioned modifier classes to change the\n\t\t\t\t\t\t\tappearance of a badge.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tprimary\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"secondary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tsecondary\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"success\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tsuccess\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"danger\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tdanger\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"warning\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\twarning\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"info\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tinfo\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"light\" text=\"dark\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tlight\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge bg=\"dark\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tdark\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PillBadgesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Contextual badges  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* Pill badges   */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"pill-badge\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Pill badges</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse the <code>pill</code> modifier to make badges more rounded\n\t\t\t\t\t\t\t(with a larger border-radius and additional horizontal padding).\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tprimary\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"secondary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tsecondary\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"success\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tsuccess\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"danger\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tdanger\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"warning\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\twarning\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"info\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tinfo\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"light\" text=\"dark\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tlight\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t<Badge pill bg=\"dark\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tdark\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PillBadgesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Pill badges  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* simple badge  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"simple-badge\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Simple Badge </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tBadges scale to match the size of the immediate parent element by\n\t\t\t\t\t\t\tusing relative font sizing and em units.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<h1>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t\t<h2>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t\t<h3>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>{' '}\n\t\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t\t\t<h4>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>\n\t\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t\t<h5>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>{' '}\n\t\t\t\t\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t\t\t\t\t<h6>\n\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\tExample heading <Badge bg=\"secondary\">New</Badge>\n\t\t\t\t\t\t\t\t\t\t</h6>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SimpleBadgeCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of simple badge  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* badge with button  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<h3>Badge with Button</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tBadges can be used as part of links or buttons to provide a\n\t\t\t\t\t\t\tcounter.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\tNotifications{' '}\n\t\t\t\t\t\t\t\t\t\t\t<Badge bg=\"light\" className=\"text-primary\">\n\t\t\t\t\t\t\t\t\t\t\t\t4\n\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BadgeWithButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of badge with button  */}\n\n\t\t</Container>\n\t);\n};\nexport default Badges;\n"
  },
  {
    "path": "app/(dashboard)/components/breadcrumbs/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Breadcrumb, Nav, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport { BasicBreadcrumb } from 'data/code/BreadcrumbCode';\n\nconst Breadcrumbs = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Breadcrumb</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tIndicate the current page’s location within a navigational\n\t\t\t\t\t\t\t\thierarchy that automatically adds separators via CSS.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic example</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>active</code> prop to active{' '}\n\t\t\t\t\t\t\t<code>Breadcrumb.Item</code> . Do not set both <code>active</code>{' '}\n\t\t\t\t\t\t\tand <code>href</code> attributes. <code>active</code> overrides{' '}\n\t\t\t\t\t\t\t<code>href</code> and <code>span</code> element is rendered\n\t\t\t\t\t\t\tinstead of <code>a</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Breadcrumb>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item active>Home</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t</Breadcrumb>\n\t\t\t\t\t\t\t\t\t\t<Breadcrumb>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item href=\"#\">Home</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item active>Library</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t</Breadcrumb>\n\t\t\t\t\t\t\t\t\t\t<Breadcrumb>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item href=\"#\">Home</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item href=\"#\">Library</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Breadcrumb.Item active>Data</Breadcrumb.Item>\n\t\t\t\t\t\t\t\t\t\t</Breadcrumb>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicBreadcrumb} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t</Container>\n\t);\n};\nexport default Breadcrumbs;\n"
  },
  {
    "path": "app/(dashboard)/components/button-group/page.js",
    "content": "'use client'\n// import node module libraries\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButtonGroup,\n\tButton,\n\tButtonToolbar,\n\tDropdownButton,\n\tDropdown,\n\tToggleButton,\n\tToggleButtonGroup,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBasicButtonGroupCode,\n\tGroupLinksCode,\n\tMixedStylesCode,\n\tOutlineStylesCode,\n\tCheckboxStyleCode,\n\tRadioStyleCode,\n\tToolbarStyleCode,\n\tButtonSizingCode,\n\tButtonNestingCode,\n\tVerticalButtonCode\n} from 'data/code/ButtonGroupCode';\n\nconst ButtonGroups = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Button Group</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tGroup a series of buttons together on a single line with the\n\t\t\t\t\t\t\t\tbutton group.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* basic example */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic example</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWrap a series of <code>&lt;Button&gt;</code>s in a{' '}\n\t\t\t\t\t\t\t<code>&lt;ButtonGroup&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n \n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicButtonGroupCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic example */}\n\n\t\t\t{/* groups of links */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"my-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThese classes can also be added to groups of links with{' '}\n\t\t\t\t\t\t\t<code>href</code>, as an alternative to the navigation components.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" href=\"#\" active>\n\t\t\t\t\t\t\t\t\t\t\t\tActive Link\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" href=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={GroupLinksCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of groups of links */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* mixed styles */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"mixed-styles\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Mixed Styles</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic mixed styles example\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"danger\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"warning\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"success\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MixedStylesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of mixed styles */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* mixed outline styles */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"mixed-outline-styles\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Outline Styles</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic mixed styles example\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-primary\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-primary\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-primary\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OutlineStylesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of mixed outline styles */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* checkbox and radio button groups */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"checkbox-and-radio-button-groups\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Checkbox and radio button groups</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCombine button-like checkbox and radio toggle buttons into a\n\t\t\t\t\t\t\tseamless looking button group.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ToggleButtonGroup\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultValue={[1]}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-check-1\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tCheckbox 1\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-check-2\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={2}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tCheckbox 2\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-check-3\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={3}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tCheckbox 3\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t</ToggleButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={CheckboxStyleCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card className=\"mt-5\">\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ToggleButtonGroup\n\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\tname=\"options\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultValue={1}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-radio-1\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tRadio 1\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-radio-2\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={2}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tRadio 2\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"tbg-radio-3\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={3}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline-primary\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\tRadio 3\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t</ToggleButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={RadioStyleCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of checkbox and radio button groups */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button toolbar */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-toolbar\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Button toolbar</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCombine sets of <code>&lt;ButtonGroup&gt;</code>s into a{' '}\n\t\t\t\t\t\t\t<code>&lt;ButtonToolbar&gt;</code> for more complex components.\n\t\t\t\t\t\t\tUse utility classes as needed to space out groups, buttons, and\n\t\t\t\t\t\t\tmore.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonToolbar aria-label=\"Toolbar with button groups\">\n\t\t\t\t\t\t\t\t\t\t\t<ButtonGroup className=\"me-2\" aria-label=\"First group\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t<Button>4</Button>\n\t\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ButtonGroup className=\"me-2\" aria-label=\"Second group\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button>5</Button> <Button>6</Button> <Button>7</Button>\n\t\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Third group\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button>8</Button>\n\t\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t</ButtonToolbar>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ToolbarStyleCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button toolbar */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button sizing */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-sizing\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Sizing</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tInstead of applying button sizing props to every button in a\n\t\t\t\t\t\t\tgroup, just add <code>size</code> prop to the{' '}\n\t\t\t\t\t\t\t<code>&lt;ButtonGroup&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\t\t\t\t\taria-label=\"Basic example\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\" className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\" size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Left</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Middle</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Right</Button>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonSizingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button sizing */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button nesting */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-nesting\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Button Nesting</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can place other button types within the{' '}\n\t\t\t\t\t\t\t<code>&lt;ButtonGroup&gt;</code> like{' '}\n\t\t\t\t\t\t\t<code>&lt;DropdownButton&gt;</code>s.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t\t<Button>1</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button>2</Button>\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"bg-nested-dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonNestingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button nesting */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button vertical variation */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"vertical-variation\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Vertical variation</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tMake a set of buttons appear vertically stacked rather than\n\t\t\t\t\t\t\thorizontally, by adding <code>vertical</code> to the{' '}\n\t\t\t\t\t\t\t<code>&lt;ButtonGroup&gt;</code>.{' '}\n\t\t\t\t\t\t\t<strong>Split button dropdowns are not supported here.</strong>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup vertical>\n\t\t\t\t\t\t\t\t\t\t\t<Button>Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button>Button</Button>\n\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"bg-vertical-dropdown-1\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\n\t\t\t\t\t\t\t\t\t\t\t<Button>Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button>Button</Button>\n\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"bg-vertical-dropdown-2\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Dropdown\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"bg-vertical-dropdown-3\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDropdown link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={VerticalButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button vertical variation */}\n\t\t</Container>\n\t);\n};\n\nexport default ButtonGroups;\n"
  },
  {
    "path": "app/(dashboard)/components/buttons/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tButton,\n\tCard,\n\tSpinner,\n\tToggleButton,\n\tToggleButtonGroup,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\nimport { ShoppingBag } from 'react-feather';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tRegularButtonCode,\n\tButtonTagsCode,\n\tOutlineButtonsCode,\n\tButtonSizesCode,\n\tBlockButtonCode,\n\tResponsiveButtonCode,\n\tBlockButtonWidthCode,\n\tButtonAlignmentCode,\n\tButtonIconsCode,\n\tButtonIcons2Code,\n\tButtonIconsSizeCode,\n\tActiveStateCode,\n\tDisabledStateCode,\n\tToggleStatesCode\n} from 'data/code/ButtonsCode';\n\nconst Buttons = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Buttons</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tCustom button styles for actions in forms, dialogs, and more\n\t\t\t\t\t\t\t\twith support for multiple sizes, states, and more.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* regular button */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-tags\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Regular Button</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse any of the available button style types to quickly create a\n\t\t\t\t\t\t\tstyled button. Just modify the <code>variant</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tPrimary\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tSecondary\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"success\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tSuccess\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"warning\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tWarning\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"danger\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tDanger\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"info\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tInfo\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"light\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tLight\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"dark\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tDark\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"link\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={RegularButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of regular button */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button tags */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-tags\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Button tags</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tNormally <code>&lt;Button&gt;</code> components will render a HTML{' '}\n\t\t\t\t\t\t\t<code>&lt;button&gt;</code> element. However you can render\n\t\t\t\t\t\t\twhatever you&apos;d like, adding a <code>href</code> prop will\n\t\t\t\t\t\t\tautomatically render an <code>&lt;a/&gt;</code> element. You can\n\t\t\t\t\t\t\tuse the <code>as</code> prop to render whatever your heart\n\t\t\t\t\t\t\tdesires. React Bootstrap will take care of the proper ARIA roles\n\t\t\t\t\t\t\tfor you.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button href=\"#\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button type=\"submit\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tas=\"input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"Input\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tas=\"input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"Submit\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tas=\"input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\t\t\t\t\t\tvalue=\"Reset\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonTagsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button tags */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* outline buttons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"outline-button\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Outline buttons</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFor a lighter touch, Buttons also come in <code>outline-*</code>{' '}\n\t\t\t\t\t\t\tvariants with no background color.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-primary\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tPrimary\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-secondary\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tSecondary\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-success\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tSuccess\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-warning\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tWarning\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-danger\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tDanger\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-info\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tInfo\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-light\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tLight\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"outline-dark\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tDark\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OutlineButtonsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of outline buttons */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* sizes */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"sizes\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Sizes</h3>\t\t\t\t\t\t\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFancy larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for additional sizes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tLarge button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tDefault button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" size=\"sm\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tSmall button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" size=\"xs\" className=\"me-1 mb-2\">\n\t\t\t\t\t\t\t\t\t\t\tXtra Small button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonSizesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of sizes */}\n\n\t\t\t{/* block buttons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mt-5\">\n\t\t\t\t\t<div id=\"buttonBlock\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Block buttons</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCreate responsive stacks of full-width, “block buttons” like those\n\t\t\t\t\t\t\tin Bootstrap 4 with a mix of our display and gap utilities.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-grid gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BlockButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of block buttons */}\n\n\t\t\t{/* block buttons responsive variation */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mt-5\">\n\t\t\t\t\t<p className=\"mb-3\">\n\t\t\t\t\t\tHere we create a responsive variation, starting with vertically\n\t\t\t\t\t\tstacked buttons until the <code>md</code> breakpoint, where{' '}\n\t\t\t\t\t\t<code>.d-md-block</code> replaces the <code>.d-grid</code> class,\n\t\t\t\t\t\tthus nullifying the <code>gap-2</code> utility. Resize your browser\n\t\t\t\t\t\tto see that change.\n\t\t\t\t\t</p>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-grid gap-2 d-md-block\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ResponsiveButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of block buttons responsive variation*/}\n\n\t\t\t{/* adjust the width of your block buttons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mt-5\">\n\t\t\t\t\t<p className=\"mb-3\">\n\t\t\t\t\t\tYou can adjust the width of your block buttons with grid column\n\t\t\t\t\t\twidth classes. For example, for a half-width “block button”, use{' '}\n\t\t\t\t\t\t<code>md=&#123;6&#125;</code>. Center it horizontally with{' '}\n\t\t\t\t\t\t<code>.mx-auto</code>, too.\n\t\t\t\t\t</p>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Row>\n\t\t\t\t\t\t\t\t\t\t\t<Col md={6} className=\"d-grid gap-2 mx-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BlockButtonWidthCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of adjust the width of your block buttons */}\n\n\t\t\t{/* alignment of buttons when horizontal */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mt-5\">\n\t\t\t\t\t<p className=\"mb-3\">\n\t\t\t\t\t\tAdditional utilities can be used to adjust the alignment of buttons\n\t\t\t\t\t\twhen horizontal. Here we’ve taken our previous responsive example\n\t\t\t\t\t\tand added some flex utilities and a margin utility on the button to\n\t\t\t\t\t\tright align the buttons when they’re no longer stacked.\n\t\t\t\t\t</p>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-grid gap-2 d-md-flex justify-content-md-end\">\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Button</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonAlignmentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of alignment of buttons when horizontal */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* button icons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"button-icon\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Button icons </h3>\n\t\t\t\t\t\t<p>A contained button with an icon.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\tYour Text Goes Here <ShoppingBag size=\"18px\" />\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonIconsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button icons */}\n\n\t\t\t{/* button icons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mt-5 mb-3\">With fixed width and height.</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t\t</Button>{' '}\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" size=\"sm\" />\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonIcons2Code} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button icons */}\n\n\t\t\t{/* button icons sizes*/}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mt-5 mb-3\">Also available in all button sizes.</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" size=\"lg\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" size=\"sm\" className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonIconsSizeCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of button icons sizes */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* active state */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"active-state\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Active state</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTo set a button&apos;s active state simply set the component&apos;s <code>active</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" active className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tPrimary button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" active className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ActiveStateCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of active state */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* disabled state */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"disabled-state\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Disabled state</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tMake buttons look inactive by adding the <code>disabled</code>{' '}\n\t\t\t\t\t\t\tprop to.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-13\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" disabled className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tPrimary button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" disabled className=\"me-1\">\n\t\t\t\t\t\t\t\t\t\t\tButton\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DisabledStateCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of disabled state */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* toggle state */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"toggle-state\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Toggle states</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tButtons can also be used to style <code>checkbox</code> and{' '}\n\t\t\t\t\t\t\t<code>radio</code> form elements. This is helpful when you want a\n\t\t\t\t\t\t\ttoggle button that works neatly inside an HTML form.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-14\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<ToggleButtonGroup type=\"checkbox\" className=\"mb-2 me-1\">\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton id=\"tbg-check-1\" value={1}>\n\t\t\t\t\t\t\t\t\t\t\t\tToggle button\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t</ToggleButtonGroup>\n\t\t\t\t\t\t\t\t\t\t<ToggleButtonGroup\n\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultValue={1}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2 me-1\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton id=\"tbg-check-1\" value={1}>\n\t\t\t\t\t\t\t\t\t\t\t\tActive toggle button\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t</ToggleButtonGroup>\n\t\t\t\t\t\t\t\t\t\t<ToggleButtonGroup type=\"checkbox\" className=\"mb-2 me-1\">\n\t\t\t\t\t\t\t\t\t\t\t<ToggleButton id=\"tbg-check-1\" value={1} disabled>\n\t\t\t\t\t\t\t\t\t\t\t\tDisabled toggle button\n\t\t\t\t\t\t\t\t\t\t\t</ToggleButton>\n\t\t\t\t\t\t\t\t\t\t</ToggleButtonGroup>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ToggleStatesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of toggle state */}\n\t\t</Container>\n\t);\n};\n\nexport default Buttons;\n"
  },
  {
    "path": "app/(dashboard)/components/cards/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButton,\n\tListGroup,\n\tListGroupItem,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBasicCardCode,\n\tCardBodyCode,\n\tTitlesTextLinksCode,\n\tListGroups1Code,\n\tListGroups2Code,\n\tCardImagesCode,\n\tKitchenSinkCode,\n\tHeaderFooterCode,\n\tHeaderFooterCode2,\n\tTextAlignmentCode,\n\tImagesTopBottomCode,\n\tImageOverlaysCode\n} from 'data/code/CardsCode';\n\nconst Cards = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Cards</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tGeek&apos;s cards provide a flexible and extensible content container\n\t\t\t\t\t\t\t\twith multiple variants and options.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* card  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"card\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic Example</h3>\n\t\t\t\t\t\t<p className=\"mb-0\">\n\t\t\t\t\t\t\tBelow is an example of a basic card with mixed content and a fixed\n\t\t\t\t\t\t\twidth.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"top\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card Title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSome quick example text to build on the card title and\n\t\t\t\t\t\t\t\t\t\t\t\t\tmake up the bulk of the card&apos;s content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicCardCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of card */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* content-types  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"content-types\" className=\"mb-4\">\n\t\t\t\t\t\t<div className=\"mt-3\" id=\"body\">\n\t\t\t\t\t\t\t<h3>Card Body</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tUse <code>&lt;Card.Body&gt;</code> to pad content inside a{' '}\n\t\t\t\t\t\t\t\t<code>&lt;Card&gt;</code>.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\tThis is some text within a card body.\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={CardBodyCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of content-types */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  Titles, text, and links  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"titles-text-links\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Titles, text, and links</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUsing <code>&lt;Card.Title&gt;</code>,{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Subtitle&gt;</code>, and{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Text&gt;</code> inside the{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Body&gt;</code> will line them up nicely.{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Link&gt;</code>s are used to line up links next to\n\t\t\t\t\t\t\teach other.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Text&gt;</code> outputs <code>&lt;p&gt;</code> tags\n\t\t\t\t\t\t\taround the content, so you can use multiple{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Text&gt;</code>s to create separate paragraphs.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* Code started */}\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card Title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Subtitle className=\"mb-2 text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tCard Subtitle\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Subtitle>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSome quick example text to build on the card title and\n\t\t\t\t\t\t\t\t\t\t\t\t\tmake up the bulk of the card&apos;s content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Link href=\"#\">Card Link</Card.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Link href=\"#\">Another Link</Card.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TitlesTextLinksCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Titles, text, and links */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  List Groups  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"list-groups\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>List Groups</h3>\n\t\t\t\t\t\t<p>Create lists of content in a card with a flush list group.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* Code started */}\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup variant=\"flush\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ListGroups1Code} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\n\t\t\t\t\t<br />\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Header>Featured</Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup variant=\"flush\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ListGroups2Code} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of List Groups */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* image  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"image\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Images</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<code>&lt;Card.Img&gt;</code> with <code>variant=&#34;top&#34;</code>{' '}\n\t\t\t\t\t\t\tplaces an image to the top of the card. With{' '}\n\t\t\t\t\t\t\t<code>&lt;Card.Text&gt;</code>, text can be added to the card.\n\t\t\t\t\t\t\tText within <code>&lt;Card.Text&gt;</code> can also be styled with\n\t\t\t\t\t\t\tthe standard HTML tags.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"top\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSome quick example text to build on the card title and\n\t\t\t\t\t\t\t\t\t\t\t\t\tmake up the bulk of the card&apos;s content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={CardImagesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of image */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  kitchen-sink */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"kitchen-sink\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Kitchen sink</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tMix and match multiple content types to create the card you need,\n\t\t\t\t\t\t\tor throw everything in there. Shown below are image styles,\n\t\t\t\t\t\t\tblocks, text styles, and a list group—all wrapped in a fixed-width\n\t\t\t\t\t\t\tcard.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"top\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card Title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSome quick example text to build on the card title and\n\t\t\t\t\t\t\t\t\t\t\t\t\tmake up the bulk of the card&apos;s content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup className=\"list-group-flush\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroupItem>Cras justo odio</ListGroupItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<ListGroupItem>Vestibulum at eros</ListGroupItem>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Link href=\"#\">Card Link</Card.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Link href=\"#\">Another Link</Card.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={KitchenSinkCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of kitchen-sink */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* header-footer  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"header-footer\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Header and Footer</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou may add a header by adding a <code>&lt;Card.Header&gt;</code>{' '}\n\t\t\t\t\t\t\tcomponent.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Header>Featured</Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Special title treatment</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tWith supporting text below as a natural lead-in to\n\t\t\t\t\t\t\t\t\t\t\t\t\tadditional content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={HeaderFooterCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\n\t\t\t\t\t<br />\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Card className=\"text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Card.Header>Featured</Card.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Special title treatment</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tWith supporting text below as a natural lead-in to\n\t\t\t\t\t\t\t\t\t\t\t\t\tadditional content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Footer className=\"text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t2 days ago\n\t\t\t\t\t\t\t\t\t\t\t</Card.Footer>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={HeaderFooterCode2} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  header-footer */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* text-alignment  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"text-alignment\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Text alignment</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can quickly change the text alignment of any card—in its\n\t\t\t\t\t\t\tentirety or specific parts—with our text align classes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Special title treatment</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tWith supporting text below as a natural lead-in to\n\t\t\t\t\t\t\t\t\t\t\t\t\tadditional content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }} className=\"text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Special title treatment</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tWith supporting text below as a natural lead-in to\n\t\t\t\t\t\t\t\t\t\t\t\t\tadditional content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\n\t\t\t\t\t\t\t\t\t\t<Card style={{ width: '18rem' }} className=\"text-end\">\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Special title treatment</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tWith supporting text below as a natural lead-in to\n\t\t\t\t\t\t\t\t\t\t\t\t\tadditional content.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Go somewhere</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TextAlignmentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of text-alignment */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* images  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"images\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Images</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCards include a few options for working with images. Choose from\n\t\t\t\t\t\t\tappending “image caps” at either end of a card, overlaying images\n\t\t\t\t\t\t\twith card content, or simply embedding the image in a card.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"mt-3\" id=\"image-caps\">\n\t\t\t\t\t\t\t<h3>Image caps</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tSimilar to headers and footers, cards can include top and bottom\n\t\t\t\t\t\t\t\t“image caps”—images at the top or bottom of a card.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* Code started */}\n\t\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"top\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tThis is a wider card with supporting text below as a\n\t\t\t\t\t\t\t\t\t\t\t\t\tnatural lead-in to additional content. This content is\n\t\t\t\t\t\t\t\t\t\t\t\t\ta little bit longer.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small className=\"text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLast updated 3 mins ago\n\t\t\t\t\t\t\t\t\t\t\t\t\t</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tThis is a wider card with supporting text below as a\n\t\t\t\t\t\t\t\t\t\t\t\t\tnatural lead-in to additional content. This content is\n\t\t\t\t\t\t\t\t\t\t\t\t\ta little bit longer.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small className=\"text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLast updated 3 mins ago\n\t\t\t\t\t\t\t\t\t\t\t\t\t</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"bottom\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ImagesTopBottomCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of images */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  image-overlays */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"image-overlays\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Image overlays</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTurn an image into a card background and overlay your card’s text.\n\t\t\t\t\t\t\tDepending on the image, you may or may not need additional styles\n\t\t\t\t\t\t\tor utilities.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* Code start */}\n\t\t\t\t\t\t\t\t\t\t<Card className=\"bg-dark text-white\">\n\t\t\t\t\t\t\t\t\t\t\t<Card.Img variant=\"bottom\" src=\"/images/placeholder/placeholder-4by3.svg\" />\n\t\t\t\t\t\t\t\t\t\t\t<Card.ImgOverlay>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Title>Card title</Card.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t\tThis is a wider card with supporting text below as a\n\t\t\t\t\t\t\t\t\t\t\t\t\tnatural lead-in to additional content. This content is\n\t\t\t\t\t\t\t\t\t\t\t\t\ta little bit longer.\n\t\t\t\t\t\t\t\t\t\t\t\t</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t<Card.Text>Last updated 3 mins ago</Card.Text>\n\t\t\t\t\t\t\t\t\t\t\t</Card.ImgOverlay>\n\t\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ImageOverlaysCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of image-overlays */}\n\t\t</Container>\n\t);\n};\nexport default Cards;\n"
  },
  {
    "path": "app/(dashboard)/components/carousels/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport { Col, Row, Card, Carousel, Image, Nav, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tSlidesOnlyCode,\n\tWithControlCode,\n\tWithIndicatorsCode,\n\tWithCaptionCode,\n\tCrossfadeCode,\n\tIndividualCode,\n\tDarkVariantCode\n} from 'data/code/CarouselsCode';\n\nconst Carousels = () => {\n\tconst [index, setIndex] = useState(0);\n\n\tconst handleSelect = (selectedIndex, e) => {\n\t\tsetIndex(selectedIndex);\n\t};\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Carousel</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tA slideshow component for cycling through elements—images or\n\t\t\t\t\t\t\t\tslides of text—like a carousel.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  slide only  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"slide\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Slides only</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tHere’s a carousel with slides only. Note the presence of the{' '}\n\t\t\t\t\t\t\t<code className=\"highlighter-rouge\">.d-block</code> and{' '}\n\t\t\t\t\t\t\t<code className=\"highlighter-rouge\">.w-100</code> on carousel\n\t\t\t\t\t\t\timages to prevent browser default image alignment.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel controls={false} indicators={false}>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SlidesOnlyCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of slide only */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  with controls  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"with-controls\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>With Control</h3>\n\t\t\t\t\t\t<p>Adding in the previous and next controls:</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel indicators={false}>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WithControlCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of with controls */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  with indicators */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"with-indicators\" className=\"mb-4\">\n\t\t\t\t\t\t<h3> With indicators</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can also add the indicators to the carousel, alongside the\n\t\t\t\t\t\t\tcontrols, too.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel indicators>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WithIndicatorsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of with indicators  */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* with caption  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"with-caption\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>With caption</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd captions to your slides easily with the{' '}\n\t\t\t\t\t\t\t<code>&lt;Carousel.Caption&gt;</code> within any{' '}\n\t\t\t\t\t\t\t<code>&lt;Carousel.Item&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0 \">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel activeIndex={index} onSelect={handleSelect}>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 className=\"text-white\">First slide label</h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue mollis\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinterdum.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 className=\"text-white\">Second slide label</h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing\n\t\t\t\t\t\t\t\t\t\t\t\t\t\telit.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 className=\"text-white\">Third slide label</h3>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tPraesent commodo cursus magna, vel scelerisque nisl\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconsectetur.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WithCaptionCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of with caption  */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  crossfade  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"crossfade\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Crossfade</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd the <code>fade</code> prop to your carousel to animate slides\n\t\t\t\t\t\t\twith a fade transition instead of a slide.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel fade indicators={false}>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={CrossfadeCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  crossfade */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  individual  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"individual\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Individual</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can specify individual intervals for each carousel item via\n\t\t\t\t\t\t\tthe <code>interval</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel indicators={false}>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item interval={1000}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item interval={500}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={IndividualCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of individual */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  dark variant  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"dark-variant\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Dark Variant</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>variant=&#34;dark&#34;</code> to the <code>Carousel</code> for\n\t\t\t\t\t\t\tdarker controls, indicators, and captions.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Carousel variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"First slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>First slide label</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tNulla vitae elit libero, a pharetra augue mollis\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tinterdum.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-2.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Second slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Second slide label</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing\n\t\t\t\t\t\t\t\t\t\t\t\t\t\telit.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-block w-100\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/background/slider-img-3.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Third slide\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Third slide label</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tPraesent commodo cursus magna, vel scelerisque nisl\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconsectetur.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Carousel.Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Carousel.Item>\n\t\t\t\t\t\t\t\t\t\t</Carousel>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DarkVariantCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of dark variant */}\n\t\t</Container>\n\t);\n};\n\nexport default Carousels;\n"
  },
  {
    "path": "app/(dashboard)/components/close-button/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, CloseButton, Nav, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tGenericCloseButtonCode,\n\tDisabledStateCode,\n\tWhiteVariantCode\n} from 'data/code/CloseCode';\n\nconst CloseButtons = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Close Buttons</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tA generic close button for dismissing content like modals and\n\t\t\t\t\t\t\t\talerts.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* generic close button */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<h3>Examples</h3>\n\t\t\t\t\t\t<p className=\"mb-0\">\n\t\t\t\t\t\t\tProvide an option to dismiss or close a component with{' '}\n\t\t\t\t\t\t\t<code>&lt;CloseButton&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<CloseButton className=\"btn-close\" />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={GenericCloseButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of generic close button */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* Disabled state */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<h3>Disabled state</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tBootstrap adds relevant styling to a disabled close button to\n\t\t\t\t\t\t\tprevent user interactions.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<CloseButton className=\"btn-close\" disabled />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DisabledStateCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Disabled state*/}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* White variant */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-5\">\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<h3>White variant</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tChange the default dark color to white using{' '}\n\t\t\t\t\t\t\t<code>variant=&#34;white&#34;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"bg-dark p-3\">\n\t\t\t\t\t\t\t\t\t\t\t<CloseButton className=\"btn-close\" variant=\"white\" />\n\t\t\t\t\t\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"btn-close\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"white\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WhiteVariantCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of White variant */}\n\t\t</Container>\n\t);\n};\n\nexport default CloseButtons;\n"
  },
  {
    "path": "app/(dashboard)/components/collapse/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButton,\n\tCollapse,\n\tFade,\n\tTab,\n\tNav,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport { FadeCollapses, BasicCollapsesCode } from 'data/code/CollapsesCode';\n\nconst Collapses = () => {\n\tconst [open, setOpen] = useState(false);\n\tconst [openFade, setOpenFade] = useState(false);\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Collapse </h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tAdd a collapse toggle animation to an element or component.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  Collapses */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setOpen(!open)}\n\t\t\t\t\t\t\t\t\t\t\taria-controls=\"example-collapse-text\"\n\t\t\t\t\t\t\t\t\t\t\taria-expanded={open}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tToggle Button\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Collapse in={open}>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"example-collapse-text\" className=\"pt-3\">\n\t\t\t\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high\n\t\t\t\t\t\t\t\t\t\t\t\tlife accusamus terry richardson ad squid. Nihil anim\n\t\t\t\t\t\t\t\t\t\t\t\tkeffiyeh helvetica, craft beer labore wes anderson cred\n\t\t\t\t\t\t\t\t\t\t\t\tnesciunt sapiente ea proident.\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Collapse>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicCollapsesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Collapses */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  Fade Collapses */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<h3 className=\"doc-section-head-title\">Fade</h3>\n\t\t\t\t\t\t<p className=\"mb-0\">\n\t\t\t\t\t\t\tAdd a fade animation to a child element or component.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setOpenFade(!openFade)}\n\t\t\t\t\t\t\t\t\t\t\taria-controls=\"example-fade-text\"\n\t\t\t\t\t\t\t\t\t\t\taria-expanded={openFade}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tToggle text\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Fade in={openFade}>\n\t\t\t\t\t\t\t\t\t\t\t<div id=\"example-fade-text\" className=\"pt-4\">\n\t\t\t\t\t\t\t\t\t\t\t\tAnim pariatur cliche reprehenderit, enim eiusmod high\n\t\t\t\t\t\t\t\t\t\t\t\tlife accusamus terry richardson ad squid. Nihil anim\n\t\t\t\t\t\t\t\t\t\t\t\tkeffiyeh helvetica, craft beer labore wes anderson cred\n\t\t\t\t\t\t\t\t\t\t\t\tnesciunt sapiente ea proident.\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</Fade>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FadeCollapses} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Fade Collapses */}\n\t\t</Container>\n\t);\n};\n\nexport default Collapses;\n"
  },
  {
    "path": "app/(dashboard)/components/dropdowns/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tDropdown,\n\tButtonGroup,\n\tDropdownButton,\n\tSplitButton,\n\tForm,\n\tButton,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\n// import react code data file\nimport {\n\tBasicDropdownCode,\n\tSplitDropdownCode,\n\tDropdownVariantCode,\n\tDropdownSizingCode,\n\tDirectionsCode,\n\tMenuAlignmentCode,\n\tResponsiveMenuAlignmentCode1,\n\tResponsiveMenuAlignmentCode2,\n\tMenuContentCode,\n\tDividersCode,\n\tFormsCode1,\n\tFormsCode2\n} from 'data/code/DropdownsCode';\n\nconst Dropdowns = () => {\n\tconst hasMounted = useMounted();\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Dropdowns</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tToggle contextual overlays for displaying lists of links and\n\t\t\t\t\t\t\t\tmore with the Bootstrap dropdown plugin.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  basic  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"basic\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe basic Dropdown is composed of a wrapping <code>Dropdown</code>{' '}\n\t\t\t\t\t\t\tand inner <code>&lt;DropdownMenu&gt;</code>, and{' '}\n\t\t\t\t\t\t\t<code>&lt;DropdownToggle&gt;</code>. By default the{' '}\n\t\t\t\t\t\t\t<code>&lt;DropdownToggle&gt;</code> will render a Button component\n\t\t\t\t\t\t\tand accepts all the same props.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle variant=\"secondary\" id=\"dropdown-basic\">\n\t\t\t\t\t\t\t\t\t\t\t\tDropdown Button\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#/action-1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#/action-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#/action-3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t</Dropdown>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicDropdownCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  split button  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"split-button\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Split Button</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSimilarly, You create a split dropdown by combining the Dropdown\n\t\t\t\t\t\t\tcomponents with another Button and a ButtonGroup.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown as={ButtonGroup}>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\">Split Button</Button>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\t\t\t\t\t\t\t\tsplit\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dropdown-split-basic\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#\">Another action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item href=\"#\">Something else</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t</Dropdown>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SplitDropdownCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of split button */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  options  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"options\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Options</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe best part is you can do this with any button variant, too:\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t\t\t\t'Primary',\n\t\t\t\t\t\t\t\t\t\t\t'Secondary',\n\t\t\t\t\t\t\t\t\t\t\t'Success',\n\t\t\t\t\t\t\t\t\t\t\t'Info',\n\t\t\t\t\t\t\t\t\t\t\t'Warning',\n\t\t\t\t\t\t\t\t\t\t\t'Danger'\n\t\t\t\t\t\t\t\t\t\t].map((variant) => (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={variant}\n\t\t\t\t\t\t\t\t\t\t\t\tid={`dropdown-variants-${variant}`}\n\t\t\t\t\t\t\t\t\t\t\t\tvariant={variant.toLowerCase()}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={variant}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0 \"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DropdownVariantCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of options */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* sizing  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"sizing\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Sizing</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tButton dropdowns work with buttons of all sizes, including default\n\t\t\t\t\t\t\tand split dropdown buttons.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t{[DropdownButton, SplitButton].map((DropdownType, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownType\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\t\t\t\tid={`dropdown-button-drop-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tidx === 0 ? 'Large button' : 'Large split button'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0 \"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownType>\n\t\t\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t\t\t\t{[DropdownButton, SplitButton].map((DropdownType, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<DropdownType\n\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\t\t\t\tid={`dropdown-button-drop-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tidx === 0 ? 'Small button' : 'Small split button'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0 \"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownType>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DropdownSizingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of sizing */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* directions   */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"directions\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Directions</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTrigger dropdown menus above, below, left, or to the right of\n\t\t\t\t\t\t\ttheir toggle elements, with the <code>drop</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t{['up', 'down', 'start', 'end'].map((direction) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\t\tas={ButtonGroup}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={direction}\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`dropdown-button-drop-${direction}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdrop={direction}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={` Drop ${direction} `}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0 \"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t{['up', 'down', 'start', 'end'].map((direction) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<SplitButton\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={direction}\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`dropdown-button-drop-${direction}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdrop={direction}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={`Drop ${direction}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0 \"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t</SplitButton>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DirectionsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of directions */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  alignment  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"alignment\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Menu Alignment</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tBy default, a dropdown menu is aligned to the left, but you can\n\t\t\t\t\t\t\tswitch it by passing align=&#34;end&#34; to a{' '}\n\t\t\t\t\t\t\t<code>&lt;Dropdown&gt;</code>, <code>&lt;DropdownButton&gt;</code>\n\t\t\t\t\t\t\t, or <code>&lt;SplitButton&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Left aligned dropdown \"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dropdown-menu-align-start\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Right aligned dropdown \"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dropdown-menu-align-end\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MenuAlignmentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of alignment */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* responsive men alignment  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"alignment\" className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<h3>Responsive Menu Alignment</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you want to use responsive menu alignment, pass an object\n\t\t\t\t\t\t\tcontaining a breakpoint to the align prop on the{' '}\n\t\t\t\t\t\t\t<code>&lt;DropdownMenu&gt;</code>,{' '}\n\t\t\t\t\t\t\t<code>&lt;DropdownButton&gt;</code>, or{' '}\n\t\t\t\t\t\t\t<code>&lt;SplitButton&gt;</code>. You can specify start or end for\n\t\t\t\t\t\t\tthe various breakpoints.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\talign={{ lg: 'end' }}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Left-aligned but right aligned when large screen\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dropdown-menu-align-end\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ResponsiveMenuAlignmentCode1} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\n\t\t\t\t\t{/* responsive men alignment  */}\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card className=\"mt-4\">\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ButtonGroup aria-label=\"Basic example\">\n\t\t\t\t\t\t\t\t\t\t\t<DropdownButton\n\t\t\t\t\t\t\t\t\t\t\t\talign={{ lg: 'start' }}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle=\"Right aligned but left aligned when large screen\"\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dropdown-menu-align-start\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t</DropdownButton>\n\t\t\t\t\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ResponsiveMenuAlignmentCode2} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of responsive men alignment */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  menu-content */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"menu-content\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Menu content</h3>\n\t\t\t\t\t\t<div className=\"mt-4\" id=\"headers\">\n\t\t\t\t\t\t\t<h3>Header</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tAdd a header to label sections of actions in any dropdown menu.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu show className=\"position-static\">\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Header>Dropdown header</Dropdown.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MenuContentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of menu-content */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  dividers  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"dividers\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Dividers</h3>\n\t\t\t\t\t\t<p>Separate groups of related menu items with a divider.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu show className=\"position-static\">\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"3\">\n\t\t\t\t\t\t\t\t\t\t\t\tSomething else here\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DividersCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of dividers */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  forms  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"forms\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Forms</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tPut a form within a dropdown menu, or make it into a dropdown\n\t\t\t\t\t\t\tmenu, and use margin or padding utilities to give it the negative\n\t\t\t\t\t\t\tspace you require.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu show className=\"position-static\">\n\t\t\t\t\t\t\t\t\t\t\t{hasMounted && \n\t\t\t\t\t\t\t\t\t\t\t<Form className=\"dropdown-form p-4\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicEmail1\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Label>Email address</Form.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Control\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Enter email\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Text className=\"text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tWe&apos;ll never share your email with anyone else.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Form.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicPassword1\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Label>Password</Form.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Control\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Password\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicCheckbox1\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Check type=\"checkbox\" label=\"Remember me\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\tSign in\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Form>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item>New around here? Sign up</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Item>Forgot password?</Dropdown.Item>\n\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FormsCode1} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of forms */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*    */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Dropdown.Menu show className=\"position-static\">\n\t\t\t\t\t\t\t\t\t\t{hasMounted && \n\t\t\t\t\t\t\t\t\t\t\t<Form className=\"dropdown-form p-4\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicEmail2\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Label>Email address</Form.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Control\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Enter email\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Text className=\"text-muted\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tWe&apos;ll never share your email with anyone else.{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Form.Text>\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicPassword2\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Label>Password</Form.Label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Control\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"Password\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\t\t\t\t\t\t\t\t\t\t\t\t<Form.Group\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolId=\"formBasicCheckbox2\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Form.Check type=\"checkbox\" label=\"Remember me\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Form.Group>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSign in{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Form>}\n\t\t\t\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FormsCode2} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  */}\n\t\t</Container>\n\t);\n};\n\nexport default Dropdowns;\n"
  },
  {
    "path": "app/(dashboard)/components/list-group/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tListGroup,\n\tBadge,\n\tImage,\n\tTab,\n\tNav,\n\tContainer\n} from 'react-bootstrap';\nimport { PlayCircle, Award, Calendar, Video, Clock } from 'react-feather';\n\n// import sub custom components\nimport DotBadge from 'components/bootstrap/DotBadge';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBasicListgroupCode,\n\tActiveItemCode,\n\tDisabledItemsCode,\n\tLinksButtonsCode,\n\tListButtonCode,\n\tFlushListgroupCode,\n\tHorizontalListgroupCode,\n\tHorizontalListgroupCode2,\n\tContextualClassesCode,\n\tWithBadgesCode,\n\tCustomContentCode,\n\tWithIconCode,\n\tGroupWithIconCode\n} from 'data/code/ListgroupsCode';\n\nconst Listgroups = () => {\n\tfunction alertClicked() {\n\t\talert('You clicked a ListGroupItem');\n\t}\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Listgroup</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tList groups are a flexible and powerful component for displaying\n\t\t\t\t\t\t\t\ta series of content. Modify and extend them to support just\n\t\t\t\t\t\t\t\tabout any content within.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* basic example  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"basic-example\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic list</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe most basic list group is an unordered list with list items and\n\t\t\t\t\t\t\tthe proper classes. Build upon it with the options that follow, or\n\t\t\t\t\t\t\twith your own CSS as needed.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Morbi leo risus</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicListgroupCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic example */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  active items  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"active-items\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Active Item</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSet the <code>active</code> prop to indicate the list groups\n\t\t\t\t\t\t\tcurrent active selection.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item active>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Morbi leo risus</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ActiveItemCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of active items */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  disabled items  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"disabled-items\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Disabled Items</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSet the <code>disabled</code> prop to prevent actions on a{' '}\n\t\t\t\t\t\t\t<code>&lt;ListGroup.Item&gt;</code>. For elements that aren&apos;t\n\t\t\t\t\t\t\tnaturally disable-able (like anchors) <code>onClick</code>{' '}\n\t\t\t\t\t\t\thandlers are added that call <code>preventDefault</code> to mimick\n\t\t\t\t\t\t\tdisabled behavior.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item disabled>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Morbi leo risus</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DisabledItemsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of disabled items */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  links-and-buttons  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"links-and-buttons\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Links and buttons</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse <code>href</code> and <code>action</code> props to create{' '}\n\t\t\t\t\t\t\t<em>actionable</em> list group items with hover, disabled, and\n\t\t\t\t\t\t\tactive states.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup defaultActiveKey=\"#link1\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link1\" active>\n\t\t\t\t\t\t\t\t\t\t\t\tCras justo odio\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link2\">\n\t\t\t\t\t\t\t\t\t\t\t\tDapibus ac facilisis in\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link3\">\n\t\t\t\t\t\t\t\t\t\t\t\tMorbi leo risus\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link4\">\n\t\t\t\t\t\t\t\t\t\t\t\tPorta ac consectetur ac\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link5\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\tVestibulum at eros\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={LinksButtonsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of links-and-buttons */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  List button  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWith <code>onClick</code> function parameter, list group will\n\t\t\t\t\t\t\tcreate <code>&lt;button&gt;</code>s, you can also make use of the{' '}\n\t\t\t\t\t\t\t<code>disabled</code> and <code>active</code> attributes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup defaultActiveKey=\"#link1\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action onClick={alertClicked} active>\n\t\t\t\t\t\t\t\t\t\t\t\tCras justo odio\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action onClick={alertClicked}>\n\t\t\t\t\t\t\t\t\t\t\t\tDapibus ac facilisis in\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action onClick={alertClicked}>\n\t\t\t\t\t\t\t\t\t\t\t\tMorbi leo risus\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action onClick={alertClicked}>\n\t\t\t\t\t\t\t\t\t\t\t\tPorta ac consectetur ac\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action onClick={alertClicked} disabled>\n\t\t\t\t\t\t\t\t\t\t\t\tVestibulum at eros\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ListButtonCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of List button */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  flush  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"flush\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Flush</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd the <code>flush</code> variant to remove outer borders and\n\t\t\t\t\t\t\trounded corners to render list group items edge-to-edge in a\n\t\t\t\t\t\t\tparent container such as a Card.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup variant=\"flush\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Morbi leo risus</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FlushListgroupCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of flush */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  horizontal  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"horizontal\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Horizontal</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse the <code>horizontal</code> prop to make the ListGroup render\n\t\t\t\t\t\t\thorizontally. Currently{' '}\n\t\t\t\t\t\t\t<strong>\n\t\t\t\t\t\t\t\thorizontal list groups cannot be combined with flush list\n\t\t\t\t\t\t\t\tgroups.\n\t\t\t\t\t\t\t</strong>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup horizontal>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Cras justo odio</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Morbi leo risus</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={HorizontalListgroupCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of horizontal */}\n\n\t\t\t{/*  horizontal  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"horizontal\" className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<strong>ProTip:</strong> Want equal-width list group items when\n\t\t\t\t\t\t\thorizontal? Add <code>.flex-fill</code> to each list group item.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup horizontal>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"flex-fill\">\n\t\t\t\t\t\t\t\t\t\t\t\tCras justo odio\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"flex-fill\">\n\t\t\t\t\t\t\t\t\t\t\t\tDapibus ac facilisis in\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"flex-fill\">\n\t\t\t\t\t\t\t\t\t\t\t\tMorbi leo risus\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={HorizontalListgroupCode2} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of horizontal */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* contextual-classes   */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"contextual-classes\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Contextual classes</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse contextual <code>variant</code>s on{' '}\n\t\t\t\t\t\t\t<code>&lt;ListGroup.Item&gt;</code>s to style them with a stateful\n\t\t\t\t\t\t\tbackground and color.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"primary\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Primary list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"secondary\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Secondary list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"success\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Success list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"danger\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Danger list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"warning\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Warning list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"info\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Info list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"light\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Light list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\t\tThis is a Dark list group item\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ContextualClassesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  contextual-classes */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* with-badges   */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"with-badges\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>With badges</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>&lt;Badge&gt;</code> to any list group item to show\n\t\t\t\t\t\t\tunread counts, activity, and more with the help of some utilities.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"d-flex justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\tCras justo odio <Badge bg=\"primary\">14</Badge>{' '}\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"d-flex justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\tDapibus ac facilisis in <Badge bg=\"primary\">2</Badge>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item className=\"d-flex justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\tMorbi leo risus <Badge bg=\"primary\">1</Badge>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WithBadgesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of with-badges */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  custom-content  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"custom-content\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Custom content</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd nearly any HTML within, even for linked list groups like the\n\t\t\t\t\t\t\tone below, with the help of flexbox utilities.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup defaultActiveKey=\"#link1\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link1\" active>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex w-100 justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5 className=\"mb-1\">List group item heading</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small>3 days ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDonec id elit non mi porta gravida at eget metus.\n\t\t\t\t\t\t\t\t\t\t\t\t\tMaecenas sed diam eget risus varius blandit.\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>Donec id elit non mi porta.</small>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex w-100 justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5 className=\"mb-1\">List group item heading</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small>3 days ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDonec id elit non mi porta gravida at eget metus.\n\t\t\t\t\t\t\t\t\t\t\t\t\tMaecenas sed diam eget risus varius blandit.\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>Donec id elit non mi porta.</small>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item action href=\"#link3\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex w-100 justify-content-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h5 className=\"mb-1\">List group item heading</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small>3 days ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tDonec id elit non mi porta gravida at eget metus.\n\t\t\t\t\t\t\t\t\t\t\t\t\tMaecenas sed diam eget risus varius blandit.\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>Donec id elit non mi porta.</small>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={CustomContentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of custom-content */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  with icon  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"withIcon\" className=\"mb-4\">\n\t\t\t\t\t\t<h3 className=\"mb-0\">List Group with Icon</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup variant=\"flush\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<PlayCircle\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"align-middle me-2 text-primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t12 hours video\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Award\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"align-middle me-2 text-success\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\tCertificate\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Calendar\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"align-middle me-2 text-info\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t12 Article\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"align-middle me-2 text-secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\tWatch Offline\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Clock\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"align-middle me-2 text-warning\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\tLifetime access\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={WithIconCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of with icon */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* List group with icon  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"simpleList\" className=\"mb-4\">\n\t\t\t\t\t\t<h3 className=\"mb-0\">List with Data</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-13\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ListGroup variant=\"flush\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Post ID</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>8693637308</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Status</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<DotBadge bg=\"success\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tPublished (unsaved changes)\n\t\t\t\t\t\t\t\t\t\t\t\t\t</DotBadge>\n\t\t\t\t\t\t\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Created by</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex mt-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/avatar/avatar-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"avatar-sm rounded-circle\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"ms-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5 className=\"mb-n1\">Geeks Courses</h5>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>Admin</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Created at</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>Jul 30, 2:21 PM</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>First published at</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>Jul 30, 2:21 PM</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Last update</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>Aug 31, 12:21 PM</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>Last Published</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<h5>Aug 31, 12:21 PM</h5>\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={GroupWithIconCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of List group with icon */}\n\t\t</Container>\n\t);\n};\n\nexport default Listgroups;\n"
  },
  {
    "path": "app/(dashboard)/components/modal/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport Link from 'next/link';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tModal,\n\tButton,\n\tOverlayTrigger,\n\tPopover,\n\tTooltip,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode } from 'widgets';\n\n// import react code data file\nimport {\n\tSampleExamplesCode,\n\tLiveDemoCode,\n\tLongContentCode,\n\tScrollableModalCode,\n\tVerticallyCenteredCode,\n\tTooltipsPopoversCode,\n\tOptionalSizesCode\n} from 'data/code/ModalsCode';\n\nconst Modals = () => {\n\tconst [show, setShow] = useState(false);\n\tconst [scrollShow, setScrollShow] = useState(false);\n\tconst [scrollShow2, setScrollShow2] = useState(false);\n\tconst [popoverTipShow, setpopoverTipShow] = useState(false);\n\tconst [smShow, setSmShow] = useState(false);\n\tconst [mdShow, setMdShow] = useState(false);\n\tconst [lgShow, setLgShow] = useState(false);\n\n\tconst handleClose = () => setShow(false);\n\tconst handleShow = () => setShow(true);\n\n\tconst longContent = `<p>Cras mattis consectetur purus sit amet fermentum.\n    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum.   Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl  consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>`;\n\n\tfunction MyVerticallyCenteredModal(props) {\n\t\treturn (\n\t\t\t<Modal\n\t\t\t\t{...props}\n\t\t\t\taria-labelledby=\"contained-modal-title-vcenter\"\n\t\t\t\tcentered\n\t\t\t>\n\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t<Modal.Title id=\"contained-modal-title-vcenter\">\n\t\t\t\t\t\tModal title\n\t\t\t\t\t</Modal.Title>\n\t\t\t\t</Modal.Header>\n\t\t\t\t<Modal.Body>\n\t\t\t\t\tCras mattis consectetur purus sit amet fermentum. Cras justo odio,\n\t\t\t\t\tdapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac\n\t\t\t\t\tconsectetur ac, vestibulum at eros.\n\t\t\t\t</Modal.Body>\n\t\t\t\t<Modal.Footer>\n\t\t\t\t\t<Button onClick={props.onHide}>Close</Button>\n\t\t\t\t</Modal.Footer>\n\t\t\t</Modal>\n\t\t);\n\t}\n\tconst [modalShow, setModalShow] = useState(false);\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Modal</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tAdd dialogs to your site for lightboxes, user notifications, or\n\t\t\t\t\t\t\t\tcompletely custom content.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* modal-example */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"examples\" className=\"mb-4\">\n\t\t\t\t\t\t<div className=\"mt-4\" id=\"modal-components\">\n\t\t\t\t\t\t\t<h3>Modal components</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tBelow is a <code>static modal dialog </code>(without the\n\t\t\t\t\t\t\t\tpositioning) to demonstrate the look and feel of the Modal.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"modal show\" style={{ display: 'block', position: 'initial' }}>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Dialog>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title>Modal title</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Modal body text goes here.</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\">Close</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Save changes</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Dialog>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SampleExamplesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of modal-example  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* live-demo */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"live-demo\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Live Demo</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tA modal with header, body, and set of actions in the footer. Use{' '}\n\t\t\t\t\t\t\t<code>&lt;Modal&gt;</code> in combination with other components to\n\t\t\t\t\t\t\tshow or hide your Modal. The\n\t\t\t\t\t\t\t<code>&lt;Modal&gt;</code> Component comes with a few convenient\n\t\t\t\t\t\t\t&#34;sub components&#34;: <code>&lt;Modal.Header&gt;</code>,\n\t\t\t\t\t\t\t<code>&lt;Modal.Title&gt;</code>, <code>&lt;Modal.Body&gt;</code>,\n\t\t\t\t\t\t\tand <code>&lt;Modal.Footer&gt;</code>, which you can use to build\n\t\t\t\t\t\t\tthe Modal content.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tToggle a working modal demo by clicking the button below. It will\n\t\t\t\t\t\t\tslide down and fade in from the top of the page.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" onClick={handleShow}>\n\t\t\t\t\t\t\t\t\t\t\tLaunch demo modal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Modal show={show} onHide={handleClose}>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title>Modal title</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t\tWoohoo, you&apos;re reading this text in a modal!\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"secondary\" onClick={handleClose}>\n\t\t\t\t\t\t\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" onClick={handleClose}>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSave Changes\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={LiveDemoCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of live-demo  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* scrolling-long-content */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-2\">\n\t\t\t\t\t<div id=\"scrolling-long-content\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Scrolling long content</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWhen modals become too long for the user’s viewport or device,\n\t\t\t\t\t\t\tthey scroll independent of the page itself. Try the demo below to\n\t\t\t\t\t\t\tsee what we mean.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow(true)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tLaunch demo modal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Modal\n\t\t\t\t\t\t\t\t\t\t\tshow={scrollShow}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setScrollShow(false)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title>Modal title</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body\n\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: longContent }}\n\t\t\t\t\t\t\t\t\t\t\t></Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSave Changes\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={LongContentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of scrolling-long-content  */}\n\n\t\t\t{/* scrolling-long-content */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-5\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can also create a scrollable modal that allows scroll the\n\t\t\t\t\t\t\tmodal body by adding <code>.modal-dialog-scrollable</code> to\n\t\t\t\t\t\t\t<code>.modal-dialog</code> and <code>style</code> in{' '}\n\t\t\t\t\t\t\t<code>&lt;Model.Body&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow2(true)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tLaunch demo modal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Modal\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"modal-dialog-scrollable\"\n\t\t\t\t\t\t\t\t\t\t\tshow={scrollShow2}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setScrollShow2(false)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title>Modal title</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: '500px' }}\n\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: longContent }}\n\t\t\t\t\t\t\t\t\t\t\t></Modal.Body>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow2(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => setScrollShow2(false)}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSave Changes\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Footer>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ScrollableModalCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of scrolling-long-content  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* vertically-centered */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"vertically-centered\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Vertically centered</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can vertically center a modal by passing the{' '}\n\t\t\t\t\t\t\t<code>&#34;centered&#34;</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => setModalShow(true)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tLaunch demo modal\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<MyVerticallyCenteredModal\n\t\t\t\t\t\t\t\t\t\t\tshow={modalShow}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setModalShow(false)}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={VerticallyCenteredCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  vertically-centered */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* optional-sizes */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-5\">\n\t\t\t\t\t<div id=\"optional-sizes\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Optional sizes</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can specify a bootstrap large or small modal by using the{' '}\n\t\t\t\t\t\t\t<code>&#34;size&#34;</code> prop.{' '}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => setLgShow(true)}>\n\t\t\t\t\t\t\t\t\t\t\tExtra large modal\n\t\t\t\t\t\t\t\t\t\t</Button>{' '}\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => setMdShow(true)}>Large modal</Button>{' '}\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => setSmShow(true)}>Small modal</Button>\n\t\t\t\t\t\t\t\t\t\t<Modal\n\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\tshow={smShow}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setSmShow(false)}\n\t\t\t\t\t\t\t\t\t\t\taria-labelledby=\"example-modal-sizes-title-sm\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title id=\"example-modal-sizes-title-sm\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tSmall modal\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body>...</Modal.Body>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t<Modal\n\t\t\t\t\t\t\t\t\t\t\tsize=\"lg\"\n\t\t\t\t\t\t\t\t\t\t\tshow={lgShow}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setLgShow(false)}\n\t\t\t\t\t\t\t\t\t\t\taria-labelledby=\"example-modal-sizes-title-lg\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title id=\"example-modal-sizes-title-lg\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tExtra large modal\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body>...</Modal.Body>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t<Modal\n\t\t\t\t\t\t\t\t\t\t\tshow={mdShow}\n\t\t\t\t\t\t\t\t\t\t\tonHide={() => setMdShow(false)}\n\t\t\t\t\t\t\t\t\t\t\taria-labelledby=\"example-modal-sizes-title-lg\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Modal.Title id=\"example-modal-sizes-title-lg\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tLarge modal\n\t\t\t\t\t\t\t\t\t\t\t\t</Modal.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Modal.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Modal.Body>...</Modal.Body>\n\t\t\t\t\t\t\t\t\t\t</Modal>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OptionalSizesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of optional-sizes */}\n\t\t</Container>\n\t);\n};\n\nexport default Modals;\n"
  },
  {
    "path": "app/(dashboard)/components/navbar/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tNavbar,\n\tNavDropdown,\n\tNav,\n\tImage,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import data files\nimport {\n\tDefaultNavbar,\n\tBrandNavbar,\n\tColorSchemesCode\n} from 'data/code/NavbarsCode';\n\nconst Navbars = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Navbar</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tA powerful, responsive navigation header, the navbar. Includes\n\t\t\t\t\t\t\t\tsupport for branding, navigation, and more.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* default-navbar */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"default-navbar\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Default Navbar</h2>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Navbar expand=\"lg\">\n\t\t\t\t\t\t\t\t\t\t\t<Navbar.Brand href=\"#home\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Image src=\"/images/brand/logo/logo-primary.svg\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t\t\t\t\t\t\t</Navbar.Brand>\n\t\t\t\t\t\t\t\t\t\t\t<Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n\t\t\t\t\t\t\t\t\t\t\t<Navbar.Collapse id=\"basic-navbar-nav\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav className=\"me-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#home\">Home</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#link\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown title=\"Dropdown\" id=\"basic-nav-dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown.Item href=\"#action/3.1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAction\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavDropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown.Item href=\"#action/3.2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tAnother action\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavDropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown.Item href=\"#action/3.3\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSomething\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavDropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown.Divider />\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<NavDropdown.Item href=\"#action/3.4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tSeparated link\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</NavDropdown.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</NavDropdown>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#link\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t\t</Navbar.Collapse>\n\t\t\t\t\t\t\t\t\t\t</Navbar>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DefaultNavbar} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of default-navbar */}\n\n\t\t\t{/* brand-navbar */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"brand-navbar\" className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tA simple flexible branding component. Images are supported but\n\t\t\t\t\t\t\twill likely require custom styling to work well.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Navbar>\n\t\t\t\t\t\t\t\t\t\t\t<Navbar.Brand href=\"#home\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/brand/logo/brand-logo.png\"\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"30\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"30\"\n\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Navbar.Brand>\n\t\t\t\t\t\t\t\t\t\t</Navbar>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BrandNavbar} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of brand-navbar */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* Color schemes */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"color-schemes\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Color schemes</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tTheming the navbar has never been easier thanks to the combination\n\t\t\t\t\t\t\tof theming classes and background-color utilities. Choose from{' '}\n\t\t\t\t\t\t\t<code>variant=&#34;light&#34;</code> for use with light background colors,\n\t\t\t\t\t\t\tor <code>variant=&#34;dark&#34;</code> for dark background colors. Then,\n\t\t\t\t\t\t\tcustomize with the <code>bg</code> prop or any custom css!\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<Navbar bg=\"dark\" variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\t<Container>\n\t\t\t\t\t\t\t\t\t\t\t\t<Navbar.Brand href=\"#home\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image src=\"/images/brand/logo/logo.svg\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Navbar.Brand>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav className=\"me-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#home\">Home</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#features\">Features</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t\t\t\t\t</Navbar>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t<Navbar bg=\"primary\" variant=\"dark\">\n\t\t\t\t\t\t\t\t\t\t\t<Container>\n\t\t\t\t\t\t\t\t\t\t\t\t<Navbar.Brand href=\"#home\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image src=\"/images/brand/logo/logo.svg\" alt=\"\" loading=\"lazy\" />\n\t\t\t\t\t\t\t\t\t\t\t\t</Navbar.Brand>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav className=\"me-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#home\">Home</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#features\">Features</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t\t\t\t\t</Navbar>\n\t\t\t\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t\t\t\t<Navbar bg=\"light\" variant=\"light\">\n\t\t\t\t\t\t\t\t\t\t\t<Container>\n\t\t\t\t\t\t\t\t\t\t\t\t<Navbar.Brand href=\"#home\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image src=\"/images/brand/logo/logo-primary.svg\" alt=\"\" loading=\"lazy\" className='inverse' />\n\t\t\t\t\t\t\t\t\t\t\t\t</Navbar.Brand>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav className=\"me-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#home\">Home</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#features\">Features</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t\t</Container>\n\t\t\t\t\t\t\t\t\t\t</Navbar>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ColorSchemesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Color schemes */}\n\t\t</Container>\n\t);\n};\n\nexport default Navbars;\n"
  },
  {
    "path": "app/(dashboard)/components/navs/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Nav, Tabs, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tMenuNavCode,\n\tMenuNavFlexCode,\n\tAlignmentCenterCode,\n\tAlignmentRightCode,\n\tVerticalFlexCode,\n\tVerticalULLICode,\n\tTabsNavCode,\n\tPillsNavsCode,\n\tFillPillsULLICode,\n\tFillPillsLinkCode,\n\tFillPillsJustifyCode,\n\tNavsFlexUtilitiesCode,\n\tNavsTabsCode,\n\tNavsTabsPillsCode,\n\tVerticalPillsCode\n} from 'data/code/NavsCode';\n\nconst Navs = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Navs</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for how to use Bootstrap’s included\n\t\t\t\t\t\t\t\tnavigation components.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* base-nav */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"base-nav\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Menu nav</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tNavigation bits in Bootstrap all share a general <code>Nav</code>{' '}\n\t\t\t\t\t\t\tcomponent and styles. Swap <code>variant</code>s to switch between\n\t\t\t\t\t\t\teach style.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tThe base <code>Nav</code> component is built with flexbox and\n\t\t\t\t\t\t\tprovide a strong foundation for building all types of navigation\n\t\t\t\t\t\t\tcomponents.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav defaultActiveKey=\"/#\" as=\"ul\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"/#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MenuNavCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of base-nav */}\n\n\t\t\t{/* base-nav */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mt-4\">\n\t\t\t\t\t<div className=\"mb-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<code>&lt;Nav&gt;</code> markup is very flexible and styling is\n\t\t\t\t\t\t\tcontrolled via classes so you can use whatever elements you like\n\t\t\t\t\t\t\tto build your navs. By default\n\t\t\t\t\t\t\t<code>&lt;Nav&gt;</code> and <code>&lt;Nav.Item&gt;</code> both\n\t\t\t\t\t\t\trender <code>&lt;div&gt;</code>s instead of\n\t\t\t\t\t\t\t<code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements\n\t\t\t\t\t\t\trespectively. This because it&apos;s possible (and common) to leave off\n\t\t\t\t\t\t\tthe <code>&lt;Nav.Item&gt;</code>&apos;s and render a{' '}\n\t\t\t\t\t\t\t<code>&lt;Nav.Link&gt;</code> directly, which would create invalid\n\t\t\t\t\t\t\tmarkup by default (ul &lt; a).\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MenuNavFlexCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of base-nav */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* available-styles */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"available-styles\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Available styles</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tChange the style of <code>&lt;Nav&gt;</code>s component with\n\t\t\t\t\t\t\tmodifiers and utilities. Mix and match as needed, or build your\n\t\t\t\t\t\t\town.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"mt-4\" id=\"horizontal-alignment\">\n\t\t\t\t\t\t\t<h3>Horizontal alignment</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tYou can control the the direction and orientation of the Nav by\n\t\t\t\t\t\t\t\tmaking use of the{' '}\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\thref=\"https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\trel=\"noreferrer\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tflexbox layout\n\t\t\t\t\t\t\t\t</a>{' '}\n\t\t\t\t\t\t\t\tutility classes. By default, navs are left-aligned, but that is\n\t\t\t\t\t\t\t\teasily changed to center or right-aligned.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tCentered with <code>.justify-content-center</code>:\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"justify-content-center\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultActiveKey=\"/#\"\n\t\t\t\t\t\t\t\t\t\t\tas=\"ul\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"/#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AlignmentCenterCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of available-styles */}\n\n\t\t\t{/* right-aligned */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tRight-aligned with <code>.justify-content-end</code>:\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"justify-content-end\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultActiveKey=\"/#\"\n\t\t\t\t\t\t\t\t\t\t\tas=\"ul\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"/#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AlignmentRightCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of right-aligned */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* vertical */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"vertical\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Vertical</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCreate stacked navs by changing the flex item direction with the{' '}\n\t\t\t\t\t\t\t<code>.flex-column</code> class, or your own css. You can even use\n\t\t\t\t\t\t\tthe responsive versions to stack in some viewports but not others\n\t\t\t\t\t\t\t( e.g. <code>.flex-sm-column</code> ).\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav defaultActiveKey=\"/#\" className=\"flex-column\" as=\"ul\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"/#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={VerticalFlexCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of vertical */}\n\n\t\t\t{/* vertical-nav-second */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mt-4 mb-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAs always, vertical navigation is possible without{' '}\n\t\t\t\t\t\t\t<code>&lt;ul&gt;</code>s, too.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav defaultActiveKey=\"/#\" className=\"flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"/#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={VerticalULLICode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of vertical-nav-second */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* tabs */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"tabs\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Tabs</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tVisually represent nav items as &#34;tabs&#34;. This style pairs nicely\n\t\t\t\t\t\t\twith tabbable regions created by our Tab components.\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<strong>Note:</strong> creating a vertical nav (\n\t\t\t\t\t\t\t<code>.flex-column</code>) with tabs styling is unsupported by\n\t\t\t\t\t\t\tBootstrap&apos;s default stylesheet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav variant=\"tabs\" defaultActiveKey=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TabsNavCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of tabs */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* pills */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"pills\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Pills</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAn alternative visual with <code>variant=&#34;pills&#34;</code> prop\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav variant=\"pills\" defaultActiveKey=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PillsNavsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of pills */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* fill-and-justify */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"fill-and-justify\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Fill and justify</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tForce the contents of your nav to extend the full available width.\n\t\t\t\t\t\t\tTo proportionately fill the space use <code>fill</code>. Notice\n\t\t\t\t\t\t\tthat the nav is the entire width but each nav item is a different\n\t\t\t\t\t\t\tsize.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav fill variant=\"pills\" defaultActiveKey=\"#\" as=\"ul\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMuch longer nav link{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item as=\"li\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FillPillsULLICode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of fill-and-justify */}\n\n\t\t\t{/* Nav justify second  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWhen using a <code>&lt;Nav&gt;</code> based navigation without{' '}\n\t\t\t\t\t\t\t<code>as</code> prop, it will generate anchors in{' '}\n\t\t\t\t\t\t\t<code>&lt;div&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav fill variant=\"pills\" defaultActiveKey=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMuch longer nav link{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FillPillsLinkCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Nav justify second  */}\n\n\t\t\t{/* Nav justify third  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you want each NavItem to be the same size use{' '}\n\t\t\t\t\t\t\t<code>justify</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav justify variant=\"pills\" defaultActiveKey=\"#\">\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMuch longer nav link{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FillPillsJustifyCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of Nav justify third  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* working-with-flex-utilities */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"working-with-flex-utilities\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Working with flex utilities</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tIf you need responsive nav variations, consider using a series of\n\t\t\t\t\t\t\tflexbox utilities. While more verbose, these utilities offer\n\t\t\t\t\t\t\tgreater customization across responsive breakpoints. In the\n\t\t\t\t\t\t\texample below, our nav will be stacked on the lowest breakpoint,\n\t\t\t\t\t\t\tthen adapt to a horizontal layout that fills the available width\n\t\t\t\t\t\t\tstarting from the small breakpoint.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Nav\n\t\t\t\t\t\t\t\t\t\t\tfill\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"pills\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultActiveKey=\"#\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex-column flex-sm-row\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link href=\"#\">Active</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMuch longer nav link{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"disabled\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t\t\tDisabled\n\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={NavsFlexUtilitiesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of working-with-flex-utilities */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* JavaScript behavior */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"javascript-behavior\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>JavaScript behavior ( Tabs ) </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCreate dynamic tabbed interfaces, as described in the{' '}\n\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\thref=\"https://www.w3.org/TR/wai-aria-practices/#tabpanel\"\n\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\trel=\"noreferrer\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tWAI ARIA Authoring Practices\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t. <code>Tabs</code> is a higher-level component for quickly\n\t\t\t\t\t\t\tcreating a <code>Nav</code> matched with a set of{' '}\n\t\t\t\t\t\t\t<code>TabPane</code>s.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-13\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\t\t\t\tdefaultActiveKey=\"home\"\n\t\t\t\t\t\t\t\t\t\t\tid=\"uncontrolled-tab-example\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"home\" title=\"Home\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Home Tab</strong> - Consequat occaecat ullamco\n\t\t\t\t\t\t\t\t\t\t\t\tamet non eiusmod nostrud dolore irure incididunt est\n\t\t\t\t\t\t\t\t\t\t\t\tduis anim sunt officia. Fugiat velit proident aliquip\n\t\t\t\t\t\t\t\t\t\t\t\tnisi incididunt nostrud exercitation proident est nisi.\n\t\t\t\t\t\t\t\t\t\t\t\tIrure magna elit commodo anim ex veniam culpa eiusmod id\n\t\t\t\t\t\t\t\t\t\t\t\tnostrud sit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa excepteur\n\t\t\t\t\t\t\t\t\t\t\t\tquis. Occaecat sit eu exercitation irure Lorem\n\t\t\t\t\t\t\t\t\t\t\t\tincididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"profile\" title=\"Profile\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Profile Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure incididunt\n\t\t\t\t\t\t\t\t\t\t\t\test duis anim sunt officia. Fugiat velit proident\n\t\t\t\t\t\t\t\t\t\t\t\taliquip nisi incididunt nostrud exercitation proident\n\t\t\t\t\t\t\t\t\t\t\t\test nisi. Irure magna elit commodo anim ex veniam culpa\n\t\t\t\t\t\t\t\t\t\t\t\teiusmod id nostrud sit cupidatat in veniam ad. Eiusmod\n\t\t\t\t\t\t\t\t\t\t\t\tconsequat eu adipisicing minim anim aliquip cupidatat\n\t\t\t\t\t\t\t\t\t\t\t\tculpa excepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"contact\" title=\"Contact\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Contact Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure incididunt\n\t\t\t\t\t\t\t\t\t\t\t\test duis anim sunt officia. Fugiat velit proident\n\t\t\t\t\t\t\t\t\t\t\t\taliquip nisi incididunt nostrud exercitation proident\n\t\t\t\t\t\t\t\t\t\t\t\test nisi. Irure magna elit commodo anim ex veniam culpa\n\t\t\t\t\t\t\t\t\t\t\t\teiusmod id nostrud sit cupidatat in veniam ad. Eiusmod\n\t\t\t\t\t\t\t\t\t\t\t\tconsequat eu adipisicing minim anim aliquip cupidatat\n\t\t\t\t\t\t\t\t\t\t\t\tculpa excepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={NavsTabsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of JavaScript behavior */}\n\n\t\t\t{/* javascript behavior pills */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>The tabs plugin also works with pills.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-14\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Tabs\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"pills\"\n\t\t\t\t\t\t\t\t\t\t\tdefaultActiveKey=\"home\"\n\t\t\t\t\t\t\t\t\t\t\tid=\"uncontrolled-tab-example\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-3\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"home\" title=\"Home\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Home Tab</strong> - Consequat occaecat ullamco\n\t\t\t\t\t\t\t\t\t\t\t\tamet non eiusmod nostrud dolore irure incididunt est\n\t\t\t\t\t\t\t\t\t\t\t\tduis anim sunt officia. Fugiat velit proident aliquip\n\t\t\t\t\t\t\t\t\t\t\t\tnisi incididunt nostrud exercitation proident est nisi.\n\t\t\t\t\t\t\t\t\t\t\t\tIrure magna elit commodo anim ex veniam culpa eiusmod id\n\t\t\t\t\t\t\t\t\t\t\t\tnostrud sit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa excepteur\n\t\t\t\t\t\t\t\t\t\t\t\tquis. Occaecat sit eu exercitation irure Lorem\n\t\t\t\t\t\t\t\t\t\t\t\tincididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"profile\" title=\"Profile\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Profile Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure incididunt\n\t\t\t\t\t\t\t\t\t\t\t\test duis anim sunt officia. Fugiat velit proident\n\t\t\t\t\t\t\t\t\t\t\t\taliquip nisi incididunt nostrud exercitation proident\n\t\t\t\t\t\t\t\t\t\t\t\test nisi. Irure magna elit commodo anim ex veniam culpa\n\t\t\t\t\t\t\t\t\t\t\t\teiusmod id nostrud sit cupidatat in veniam ad. Eiusmod\n\t\t\t\t\t\t\t\t\t\t\t\tconsequat eu adipisicing minim anim aliquip cupidatat\n\t\t\t\t\t\t\t\t\t\t\t\tculpa excepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t\t<Tab eventKey=\"contact\" title=\"Contact\">\n\t\t\t\t\t\t\t\t\t\t\t\t<strong>Contact Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure incididunt\n\t\t\t\t\t\t\t\t\t\t\t\test duis anim sunt officia. Fugiat velit proident\n\t\t\t\t\t\t\t\t\t\t\t\taliquip nisi incididunt nostrud exercitation proident\n\t\t\t\t\t\t\t\t\t\t\t\test nisi. Irure magna elit commodo anim ex veniam culpa\n\t\t\t\t\t\t\t\t\t\t\t\teiusmod id nostrud sit cupidatat in veniam ad. Eiusmod\n\t\t\t\t\t\t\t\t\t\t\t\tconsequat eu adipisicing minim anim aliquip cupidatat\n\t\t\t\t\t\t\t\t\t\t\t\tculpa excepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t</Tab>\n\t\t\t\t\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={NavsTabsPillsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of javascript behavior pills */}\n\n\t\t\t{/* vertical pills */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>And with vertical pills.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-15\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Tab.Container id=\"tab-container-16\" defaultActiveKey=\"home\">\n\t\t\t\t\t\t\t\t\t\t\t<Row>\n\t\t\t\t\t\t\t\t\t\t\t\t<Col sm={3}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav variant=\"pills\" className=\"flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"home\">Home</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"profile\">Profile</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"messages\">Messages</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"settings\">Settings</Nav.Link>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t\t\t\t\t\t<Col sm={9}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"home\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>Home Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tincididunt est duis anim sunt officia. Fugiat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvelit proident aliquip nisi incididunt nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texercitation proident est nisi. Irure magna elit\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcommodo anim ex veniam culpa eiusmod id nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texcepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"profile\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>Profile Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tincididunt est duis anim sunt officia. Fugiat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvelit proident aliquip nisi incididunt nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texercitation proident est nisi. Irure magna elit\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcommodo anim ex veniam culpa eiusmod id nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texcepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"messages\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>Messages Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tincididunt est duis anim sunt officia. Fugiat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvelit proident aliquip nisi incididunt nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texercitation proident est nisi. Irure magna elit\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcommodo anim ex veniam culpa eiusmod id nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texcepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"settings\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>Settings Tab</strong> - Consequat occaecat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tullamco amet non eiusmod nostrud dolore irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tincididunt est duis anim sunt officia. Fugiat\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvelit proident aliquip nisi incididunt nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texercitation proident est nisi. Irure magna elit\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcommodo anim ex veniam culpa eiusmod id nostrud\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsit cupidatat in veniam ad. Eiusmod consequat eu\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tadipisicing minim anim aliquip cupidatat culpa\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\texcepteur quis. Occaecat sit eu exercitation irure\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tLorem incididunt nostrud.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t\t\t\t\t</Tab.Container>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={VerticalPillsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of vertical pills */}\n\t\t</Container>\n\t);\n};\n\nexport default Navs;\n"
  },
  {
    "path": "app/(dashboard)/components/offcanvas/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButton,\n\tNav,\n\tTab,\n\tOffcanvas,\n\tListGroup,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tOffcanvasBasicCode,\n\tOffCanvasPlacementCode,\n\tOffCanvasBackdropCode\n} from 'data/code/OffcanvasCode';\n\nconst BSOffcanvas = () => {\n\tconst [show, setShow] = useState(false);\n\n\tconst handleClose = () => setShow(false);\n\tconst handleShow = () => setShow(true);\n\n\tconst options = [\n\t\t{\n\t\t\tname: 'Enable backdrop (default)',\n\t\t\tscroll: false,\n\t\t\tbackdrop: true\n\t\t},\n\t\t{\n\t\t\tname: 'Disable backdrop',\n\t\t\tscroll: false,\n\t\t\tbackdrop: false\n\t\t},\n\t\t{\n\t\t\tname: 'Enable body scrolling',\n\t\t\tscroll: true,\n\t\t\tbackdrop: false\n\t\t},\n\t\t{\n\t\t\tname: 'Enable both scrolling & backdrop',\n\t\t\tscroll: true,\n\t\t\tbackdrop: true\n\t\t}\n\t];\n\n\tfunction OffCanvasPlacement({ name, ...props }) {\n\t\tconst [show, setShow] = useState(false);\n\n\t\tconst handleClose = () => setShow(false);\n\t\tconst handleShow = () => setShow(true);\n\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={handleShow}\n\t\t\t\t\tclassName=\"me-2 mb-2 mb-lg-0\"\n\t\t\t\t>\n\t\t\t\t\t{name}\n\t\t\t\t</Button>\n\t\t\t\t<Offcanvas show={show} onHide={handleClose} {...props}>\n\t\t\t\t\t<Offcanvas.Header closeButton>\n\t\t\t\t\t\t<Offcanvas.Title>Offcanvas</Offcanvas.Title>\n\t\t\t\t\t</Offcanvas.Header>\n\t\t\t\t\t<Offcanvas.Body>\n\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you\n\t\t\t\t\t\thave chosen. Like, text, images, lists, etc.\n\t\t\t\t\t</Offcanvas.Body>\n\t\t\t\t</Offcanvas>\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\tfunction OffCanvasBackdrop({ name, ...props }) {\n\t\tconst [show, setShow] = useState(false);\n\n\t\tconst handleClose = () => setShow(false);\n\t\tconst toggleShow = () => setShow((s) => !s);\n\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={toggleShow}\n\t\t\t\t\tclassName=\"me-2 mb-2 mb-lg-0\"\n\t\t\t\t>\n\t\t\t\t\t{name}\n\t\t\t\t</Button>\n\t\t\t\t<Offcanvas show={show} onHide={handleClose} {...props}>\n\t\t\t\t\t<Offcanvas.Header closeButton>\n\t\t\t\t\t\t<Offcanvas.Title>Offcanvas</Offcanvas.Title>\n\t\t\t\t\t</Offcanvas.Header>\n\t\t\t\t\t<Offcanvas.Body>\n\t\t\t\t\t\tSome text as placeholder. In real life you can have the elements you\n\t\t\t\t\t\thave chosen. Like, text, images, lists, etc.\n\t\t\t\t\t</Offcanvas.Body>\n\t\t\t\t</Offcanvas>\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Offcanvas</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tBuild hidden sidebars into your project for navigation, shopping\n\t\t\t\t\t\t\t\tcarts, and more.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  basic  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"basic-example\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOffcanvas includes support for a header with a close button and an\n\t\t\t\t\t\t\toptional body class for some initial padding.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* basic offcanvas code started */}\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" onClick={handleShow}>\n\t\t\t\t\t\t\t\t\t\t\tLaunch\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Offcanvas show={show} onHide={handleClose}>\n\t\t\t\t\t\t\t\t\t\t\t<Offcanvas.Header closeButton>\n\t\t\t\t\t\t\t\t\t\t\t\t<Offcanvas.Title>Offcanvas</Offcanvas.Title>\n\t\t\t\t\t\t\t\t\t\t\t</Offcanvas.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Offcanvas.Body>\n\t\t\t\t\t\t\t\t\t\t\t\tSome text as placeholder. In real life you can have the\n\t\t\t\t\t\t\t\t\t\t\t\telements you have chosen. Like, text, images, lists,\n\t\t\t\t\t\t\t\t\t\t\t\tetc.\n\t\t\t\t\t\t\t\t\t\t\t</Offcanvas.Body>\n\t\t\t\t\t\t\t\t\t\t</Offcanvas>\n\t\t\t\t\t\t\t\t\t\t{/* end of basic offcanvas code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OffcanvasBasicCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  placement  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"placement\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Placement </h3>\n\t\t\t\t\t\t<p>Offcanvas supports a few different placements:</p>\n\t\t\t\t\t\t<ListGroup as=\"ul\" bsPrefix=\" \">\n\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\" \">\n\t\t\t\t\t\t\t\t<code>start</code> places offcanvas on the left of the viewport\n\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\" \">\n\t\t\t\t\t\t\t\t<code>end</code> places offcanvas on the right of the viewport\n\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\" \">\n\t\t\t\t\t\t\t\t<code>top</code> places offcanvas on the top of the viewport\n\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\" \">\n\t\t\t\t\t\t\t\t<code>bottom</code> places offcanvas on the bottom of the\n\t\t\t\t\t\t\t\tviewport\n\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* placement code started */}\n\t\t\t\t\t\t\t\t\t\t{['start', 'end', 'top', 'bottom'].map((placement, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<OffCanvasPlacement\n\t\t\t\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\t\t\t\tplacement={placement}\n\t\t\t\t\t\t\t\t\t\t\t\tname={placement}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t{/* end of placement code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OffCanvasPlacementCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  backdrop  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"backdrop\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Backdrop </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tScrolling the <code>&lt;body&gt;</code> element is disabled when\n\t\t\t\t\t\t\tan offcanvas and its backdrop are visible. Use the{' '}\n\t\t\t\t\t\t\t<code>scroll</code> prop to toggle <code>&lt;body&gt;</code>{' '}\n\t\t\t\t\t\t\tscrolling and the <code>backdrop</code> prop to toggle the\n\t\t\t\t\t\t\tbackdrop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* backdrop code started */}\n\t\t\t\t\t\t\t\t\t\t{options.map((props, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<OffCanvasBackdrop key={idx} {...props} />\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t{/* end of backdrop code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OffCanvasBackdropCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of backdrop */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\t\t</Container>\n\t);\n};\n\nexport default BSOffcanvas;\n"
  },
  {
    "path": "app/(dashboard)/components/overlays/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState, useRef } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tOverlay,\n\tOverlayTrigger,\n\tButton,\n\tTooltip,\n\tNav,\n\tTab,\n\tImage,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tOverlayBasicCode,\n\tOverlayTriggerCode,\n\tTriggerBehaviorCode\n} from 'data/code/OverlaysCode';\n\nconst Overlays = () => {\n\tconst [show, setShow] = useState(false);\n\tconst target = useRef(null);\n\tconst renderTooltip = (props) => (\n\t\t<Tooltip id=\"button-tooltip\" {...props}>\n\t\t  Simple tooltip\n\t\t</Tooltip>\n\t  );\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Overlays</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tOverlay is the fundamental component for positioning and\n\t\t\t\t\t\t\t\tcontrolling tooltip visibility. It&apos;s a wrapper around Popper.js,\n\t\t\t\t\t\t\t\tthat adds support for transitions, and visibility toggling.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  basic  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"basic-example\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Basic </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOverlays consist of at least two elements, the &#34;overlay&#34;, the\n\t\t\t\t\t\t\telement to be positioned, as well as a &#34;target&#34;, the element the\n\t\t\t\t\t\t\toverlay is positioned in relation to. You can also also have an\n\t\t\t\t\t\t\t&#34;arrow&#34; element, like the tooltips and popovers, but that is\n\t\t\t\t\t\t\toptional.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* basic offcanvas code started */}\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" ref={target} onClick={() => setShow(!show)}>\n        \t\t\t\t\t\t\t\t\tClick me to see\n      \t\t\t\t\t\t\t\t\t</Button>\t\t\t\t\t\t\t\t\t\t  \n\t\t\t\t\t\t\t\t\t\t<Overlay target={target.current} show={show} placement=\"right\">\n\t\t\t\t\t\t\t\t\t\t\t{({\n\t\t\t\t\t\t\t\t\t\t\t\tplacement: _placement,\n\t\t\t\t\t\t\t\t\t\t\t\tarrowProps: _arrowProps,\n\t\t\t\t\t\t\t\t\t\t\t\tshow: _show,\n\t\t\t\t\t\t\t\t\t\t\t\tpopper: _popper,\n\t\t\t\t\t\t\t\t\t\t\t\thasDoneInitialMeasure: _hasDoneInitialMeasure,\n\t\t\t\t\t\t\t\t\t\t\t\t...props\n\t\t\t\t\t\t\t\t\t\t\t}) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: 'rgba(117, 79, 254, 0.50)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 10px',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: 'white',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...props.style\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tSimple tooltip\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</Overlay>\n\t\t\t\t\t\t\t\t\t\t{/* end of basic offcanvas code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OverlayBasicCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  overlay-trigger  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"overlay-trigger\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>OverlayTrigger </h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSince the above pattern is pretty common, but verbose, we&apos;ve\n\t\t\t\t\t\t\tincluded <code>&lt;OverlayTrigger&gt;</code> component to help\n\t\t\t\t\t\t\twith common use-cases. It even has functionality to delayed show\n\t\t\t\t\t\t\tor hides, and a few different &#34;trigger&#34; events you can mix and\n\t\t\t\t\t\t\tmatch.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* basic offcanvas code started */}\n\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\tplacement=\"right\"\n\t\t\t\t\t\t\t\t\t\t\tdelay={{ show: 250, hide: 400 }}\n\t\t\t\t\t\t\t\t\t\t\toverlay={renderTooltip}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\">Hover me to see</Button>\n\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t\t{/* end of basic offcanvas code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={OverlayTriggerCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of overlay-trigger */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/*  trigger behavior  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"trigger-behavior\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Customizing trigger behavior</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFor more advanced behaviors <code>&lt;OverlayTrigger&gt;</code>{' '}\n\t\t\t\t\t\t\taccepts a function child that passes in the injected{' '}\n\t\t\t\t\t\t\t<code>ref</code> and event handlers that correspond to the\n\t\t\t\t\t\t\tconfigured <code>trigger</code> prop.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* trigger behavior code started */}\n\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\t\t\t\toverlay={\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip id=\"button-tooltip-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tCheck out this avatar\n\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{({ ref, ...triggerHandler }) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...triggerHandler}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-inline-flex align-items-center\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\troundedCircle\n\t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"Avatar-1\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/avatar/avatar-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={30}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"ms-1\">Hover to see</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t\t{/* end of trigger behavior code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TriggerBehaviorCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of trigger behavior */}\n\t\t</Container>\n\t);\n};\n\nexport default Overlays;\n"
  },
  {
    "path": "app/(dashboard)/components/pagination/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport Link from 'next/link';\nimport { Col, Row, Card, Pagination, Nav, Tab, Container } from 'react-bootstrap';\nimport {\n\tChevronsLeft,\n\tChevronLeft,\n\tChevronRight,\n\tChevronsRight\n} from 'react-feather';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tDefaultPaginationCode,\n\tPaginationWithIconsCode,\n\tDisabledActiveCode,\n\tPaginationSizingCode,\n\tPaginationSizingSmallCode,\n\tAlignmentCode,\n\tJustifyContentEndCode\n} from 'data/code/PaginationsCode';\n\nconst Paginations = () => {\n\treturn (\n        <Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Pagination</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for showing pagination to indicate a\n\t\t\t\t\t\t\t\tseries of related content exists across multiple pages.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* default-pagination */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"default-pagination\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Default Pagination</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWe use a large block of connected links for our pagination, making\n\t\t\t\t\t\t\tlinks hard to miss and easily scalable—all while providing large\n\t\t\t\t\t\t\thit areas. Pagination is built with list HTML elements so screen\n\t\t\t\t\t\t\treaders can announce the number of available links. Use a wrapping{' '}\n\t\t\t\t\t\t\t<code>&lt;Pagination&gt;</code> component to identify it as a\n\t\t\t\t\t\t\tnavigation section to screen readers and other assistive\n\t\t\t\t\t\t\ttechnologies.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Prev>Previous</Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Next>Next</Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DefaultPaginationCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of default-pagination */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* working-with-icons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"working-with-icons\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Working with icons</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLooking to use an icon or symbol in place of text for some\n\t\t\t\t\t\t\tpagination links? Use <code>&lt;Pagination.First&gt;</code>,{' '}\n\t\t\t\t\t\t\t<code>&lt;Pagination.Prev&gt;</code> ,{' '}\n\t\t\t\t\t\t\t<code>&lt;Pagination.Next&gt;</code> and{' '}\n\t\t\t\t\t\t\t<code>&lt;Pagination.Last&gt;</code> tags .\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.First>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChevronsLeft size=\"18px\" />\n\t\t\t\t\t\t\t\t\t\t\t</Pagination.First>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChevronLeft size=\"18px\" />\n\t\t\t\t\t\t\t\t\t\t\t</Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChevronRight size=\"18px\" />\n\t\t\t\t\t\t\t\t\t\t\t</Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Last>\n\t\t\t\t\t\t\t\t\t\t\t\t<ChevronsRight size=\"18px\" />\n\t\t\t\t\t\t\t\t\t\t\t</Pagination.Last>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PaginationWithIconsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of working-with-icons */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* disabled-and-active-states */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"disabled-and-active-states\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Disabled and active states</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tPagination links are customizable for different circumstances. Use{' '}\n\t\t\t\t\t\t\t<code>disabled</code> prop for links that appear un-clickable and{' '}\n\t\t\t\t\t\t\t<code>active</code> prop to indicate the current page.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Prev disabled>Previous</Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item active>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Next>Next</Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DisabledActiveCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of disabled-and-active-states */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* sizing */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"sizing\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Sizing</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}\n\t\t\t\t\t\t\t<code>size=&#34;sm&#34;</code> for additional sizes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination size=\"lg\">\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item active>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PaginationSizingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of sizing */}\n\n\t\t\t{/* sizing-small */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination size=\"sm\">\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item active>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PaginationSizingSmallCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of sizing-small */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* alignment */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"alignment\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Alignment</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tChange the alignment of pagination components with{' '}\n\t\t\t\t\t\t\t<Link href=\"#\">\n\t\t\t\t\t\t\t\tflexbox utilities\n\t\t\t\t\t\t\t</Link>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tCentered-aligned with <code>.justify-content-center</code>:\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination className=\"justify-content-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Prev disabled>Previous</Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Next>Next</Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AlignmentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of alignment */}\n\n\t\t\t{/* justify-content-end */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tRight-aligned with <code>.justify-content-end</code>:\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<Pagination className=\"justify-content-end\">\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Prev disabled>Previous</Pagination.Prev>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{1}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{2}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Item>{3}</Pagination.Item>\n\t\t\t\t\t\t\t\t\t\t\t<Pagination.Next>Next</Pagination.Next>\n\t\t\t\t\t\t\t\t\t\t</Pagination>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={JustifyContentEndCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of justify-content-end */}\n\t\t</Container>\n    );\n};\n\nexport default Paginations;\n"
  },
  {
    "path": "app/(dashboard)/components/popovers/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tOverlayTrigger,\n\tPopover,\n\tButton,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tDefaultPopoverCode,\n\tFourDirectionsCode,\n\tDismissableCode\n} from 'data/code/PopoversCode';\n\nconst Popovers = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Popover</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for adding Bootstrap popovers, like\n\t\t\t\t\t\t\t\tthose found in iOS, to any element on your site.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* default-popover */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"default-popover\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Default Popovers</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t\t\t\t\t\tplacement=\"right\"\n\t\t\t\t\t\t\t\t\t\t\toverlay={\n\t\t\t\t\t\t\t\t\t\t\t\t<Popover id=\"popover-basic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Header as=\"h3\">Popover title</Popover.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tAnd here&apos;s some amazing content. It&apos;s very engaging.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tRight?\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Popover>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"danger\">Click to toggle popover</Button>\n\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DefaultPopoverCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of default-popover */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* four-direction */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"four-direction\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Four directions</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFour options are available: top, right, bottom, and left aligned.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{['top', 'right', 'bottom', 'left'].map((placement) => (\n\t\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={placement}\n\t\t\t\t\t\t\t\t\t\t\t\tplacement={placement}\n\t\t\t\t\t\t\t\t\t\t\t\toverlay={\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover id={`popover-positioned-${placement}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Header as=\"h3\">{`Popover ${placement}`}</Popover.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong>Holy guacamole!</strong> Check this info.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Popover>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2 mb-2 mb-lg-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tPopover on {placement}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FourDirectionsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of four-direction */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* dismiss on next click */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"dismiss-on-next-click\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Dismiss on next click</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse the <code>trigger=&#34;focus&#34;</code> trigger to dismiss popovers\n\t\t\t\t\t\t\ton the user’s next click of a different element than the toggle\n\t\t\t\t\t\t\telement.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\ttrigger=\"focus\"\n\t\t\t\t\t\t\t\t\t\t\tplacement=\"right\"\n\t\t\t\t\t\t\t\t\t\t\toverlay={\n\t\t\t\t\t\t\t\t\t\t\t\t<Popover id=\"popover-basic\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Header as=\"h3\">Popover title</Popover.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tAnd here&apos;s some amazing content. It&apos;s very engaging.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tRight?\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Popover.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Popover>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Button variant=\"danger\">Dismissible popover</Button>\n\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DismissableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of dismiss on next click */}\n\t\t</Container>\n\t);\n};\n\nexport default Popovers;\n"
  },
  {
    "path": "app/(dashboard)/components/progress/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Card, Col, Row, ProgressBar, Tab, Nav, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tDefaultProgressCode,\n\tProgressLabelsCode,\n\tProgressHeightCode,\n\tProgressBackgroundsCode,\n\tMultipleBarsCode,\n\tStripedCode,\n\tAnimatedCode\n} from 'data/code/ProgressCode';\n\nconst Progress = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Progress</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for using Bootstrap custom progress\n\t\t\t\t\t\t\t\tbars featuring support for stacked bars, animated backgrounds,\n\t\t\t\t\t\t\t\tand text labels.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* default-progress */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"default-progress\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>How it works</h3>\n\t\t\t\t\t\t<p>Default progress bar.</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={0} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={25} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={50} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={75} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={100} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DefaultProgressCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of default-progress */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* highlighter-rouge */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"labels\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Labels</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd a <code>label</code> prop to show a visible percentage. For\n\t\t\t\t\t\t\tlow percentages, consider adding a min-width to ensure the label&apos;s\n\t\t\t\t\t\t\ttext is fully visible.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar now={25} label={`${25}%`} />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ProgressLabelsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  highlighter-rouge */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* height */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"height\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Height</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWe only set a <code>height</code> value on the{' '}\n\t\t\t\t\t\t\t<code>&lt;ProgressBar&gt;</code>, so if you change that value the\n\t\t\t\t\t\t\tinner <code>progress-bar</code> will automatically resize\n\t\t\t\t\t\t\taccordingly.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tnow={25}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: '1px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tnow={25}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: '20px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ProgressHeightCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of height */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* backgrounds  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"backgrounds\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Backgrounds</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tProgress bars use some of the same button and alert classes like{' '}\n\t\t\t\t\t\t\t<code>variant</code> for consistent styles.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar variant=\"success\" now={25} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar variant=\"info\" now={50} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar variant=\"warning\" now={75} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t<ProgressBar variant=\"danger\" now={100} className=\"mb-2\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ProgressBackgroundsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of backgrounds */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* multiple-bars  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"multiple-bars\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Multiple bars</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tNest <code>&lt;ProgressBar&gt;</code>s to stack them.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tnow={15}\n\t\t\t\t\t\t\t\t\t\t\tkey={1}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"success\"\n\t\t\t\t\t\t\t\t\t\t\tnow={30}\n\t\t\t\t\t\t\t\t\t\t\tkey={2}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"info\"\n\t\t\t\t\t\t\t\t\t\t\tnow={20}\n\t\t\t\t\t\t\t\t\t\t\tkey={3}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={MultipleBarsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of multiple-bars */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* striped */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"striped\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Striped</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUses a gradient to create a striped effect. Not available in IE8.\n\t\t\t\t\t\t\tYou can apply using <code>striped</code> prop.{' '}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tstriped\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tnow={10}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tstriped\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"success\"\n\t\t\t\t\t\t\t\t\t\t\tnow={25}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tstriped\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"info\"\n\t\t\t\t\t\t\t\t\t\t\tnow={50}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tstriped\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"warning\"\n\t\t\t\t\t\t\t\t\t\t\tnow={75}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<ProgressBar\n\t\t\t\t\t\t\t\t\t\t\tstriped\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"danger\"\n\t\t\t\t\t\t\t\t\t\t\tnow={100}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={StripedCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of striped */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* animated-stripes */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"animated-stripes\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Animated stripes</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>animated</code> prop to animate the stripes right to\n\t\t\t\t\t\t\tleft. Not available in IE9 and below.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<ProgressBar animated now={75} />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AnimatedCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of animated-stripes */}\n\t\t</Container>\n\t);\n};\n\nexport default Progress;\n"
  },
  {
    "path": "app/(dashboard)/components/spinners/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Spinner, Button, Nav, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBorderSpinnerCode,\n\tSpinnersColorsCode,\n\tGrowingSpinnerCode,\n\tGrowColorsCode,\n\tAlignmentCode,\n\tPlacementCenterCode,\n\tPlacementLoadingCode,\n\tFloatsCode,\n\tTextAlignCode,\n\tSizeSpinnersCode,\n\tStyleCSSCode,\n\tButtonsCode,\n\tButtons2Code\n} from 'data/code/SpinnersCode';\n\nconst Spinners = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Spinners</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tIndicate the loading state of a component or page with Bootstrap\n\t\t\t\t\t\t\t\tspinners, built entirely with HTML, CSS, and no JavaScript.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* border-spinner */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"border-spinner\">\n\t\t\t\t\t\t<h3>Border spinner</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse the border spinners for a lightweight loading indicator. Set{' '}\n\t\t\t\t\t\t\t<code>animation=&#34;border&#34;</code> to use it.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" role=\"status\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BorderSpinnerCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of border-spinner */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* colors */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"colors\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Colors</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAll standard visual variants are available for border spinner\n\t\t\t\t\t\t\tanimation styles by setting the <code>variant</code> property.\n\t\t\t\t\t\t\tAlternatively spinners can be custom sized with the{' '}\n\t\t\t\t\t\t\t<code>style</code> property, or custom CSS classes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"success\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"danger\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"warning\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"info\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" variant=\"dark\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SpinnersColorsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of colors */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* growing-spinner */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"growing-spinner\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Growing spinner</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSet <code>animation=&#34;grow&#34;</code> to use it.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"grow\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={GrowingSpinnerCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of growing-spinner */}\n\n\t\t\t{/* text color utilities */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAll standard visual variants are available for growing spinner\n\t\t\t\t\t\t\tanimation styles by setting the <code>variant</code> property.\n\t\t\t\t\t\t\tAlternatively spinners can be custom sized with the{' '}\n\t\t\t\t\t\t\t<code>style</code> property, or custom CSS classes.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"success\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"danger\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"warning\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"grow\" variant=\"info\" className=\"me-2\" />\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"light\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"grow\" variant=\"dark\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={GrowColorsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of text color utilities */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* alignment */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"alignment\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Alignment</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSpinners in Bootstrap are built with <code>rem</code>s,{' '}\n\t\t\t\t\t\t\t<code>variant</code> prop etc... This means they can easily be\n\t\t\t\t\t\t\tresized, recolored, and quickly aligned.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"mt-5\" id=\"margin\">\n\t\t\t\t\t\t\t<h3>Margin</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tUse <code>margin utilities</code> like <code>.m-5</code> for\n\t\t\t\t\t\t\t\teasy spacing.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" role=\"status\" className=\"m-5\">\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={AlignmentCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of alignment */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* placement */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"placement\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Placement</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse <code>flexbox utilities</code>, <code>float utilities</code>,\n\t\t\t\t\t\t\tor <code>text alignment</code> utilities to place spinners exactly\n\t\t\t\t\t\t\twhere you need them in any situation.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div className=\"mt-4\" id=\"flex\">\n\t\t\t\t\t\t\t<h3>Flex</h3>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex justify-content-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" role=\"status\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PlacementCenterCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement */}\n\n\t\t\t{/* placement 2 */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex  align-items-center\">\n\t\t\t\t\t\t\t\t\t\t\t<strong>Loading...</strong>\n\t\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"ms-auto\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PlacementLoadingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement 2 */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* floats */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"floats\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Floats</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"float-end mb-4\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={FloatsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of floats */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* text-align */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"text-align\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Text align</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"text-center\">\n\t\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" role=\"status\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\">Loading...</span>\n\t\t\t\t\t\t\t\t\t\t\t</Spinner>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TextAlignCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  text-align */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* size */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"size\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Size</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>size=&#34;sm&#34;</code> to make a smaller spinner that can\n\t\t\t\t\t\t\tquickly be used within other components.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"border\" size=\"sm\" className=\"me-2\" />\n\t\t\t\t\t\t\t\t\t\t<Spinner animation=\"grow\" size=\"sm\" />\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SizeSpinnersCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of size */}\n\n\t\t\t{/* use custom CSS or inline styles */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOr, use custom CSS or inline styles to change the dimensions as\n\t\t\t\t\t\t\tneeded.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ width: '3rem', height: '3rem' }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-2\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ width: '3rem', height: '3rem' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={StyleCSSCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of use custom CSS or inline styles */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* buttons */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"buttons\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Buttons</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLike the original Bootstrap spinners, these can also be used with\n\t\t\t\t\t\t\tbuttons. To use this component out-of-the-box it is recommended\n\t\t\t\t\t\t\tyou change the element type to <code>span</code> by configuring\n\t\t\t\t\t\t\tthe <code>as</code> property when using spinners inside buttons.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-12\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" disabled className=\"me-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\"> Loading...</span>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimation=\"border\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t/>{' '}\n\t\t\t\t\t\t\t\t\t\t\tLoading...\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ButtonsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of buttons */}\n\n\t\t\t{/* buttons 2 */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<Tab.Container id=\"tab-container-13\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" disabled className=\"me-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"visually-hidden\"> Loading...</span>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<Button variant=\"primary\" disabled>\n\t\t\t\t\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tanimation=\"grow\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t/>{' '}\n\t\t\t\t\t\t\t\t\t\t\tLoading...\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={Buttons2Code} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of buttons 2 */}\n\t\t</Container>\n\t);\n};\n\nexport default Spinners;\n"
  },
  {
    "path": "app/(dashboard)/components/tables/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Table, Nav, Tab, Container } from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBasicTableCode,\n\tDarkTableCode,\n\tTableHeadCode,\n\tStripedTableCode,\n\tTableVariantCode,\n\tBorderedTableCode,\n\tBorderlessTableCode,\n\tHoverableRowsCode,\n\tSmallTableCode,\n\tContextualClassesCode,\n\tResponsiveTableCode\n} from 'data/code/TablesCode';\n\nconst Tables = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Tables</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for opt-in styling of tables (given\n\t\t\t\t\t\t\t\ttheir prevalent use in JavaScript plugins) with Bootstrap.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/*  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-4\">\n\t\t\t\t\t<div id=\"examples\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Examples</h2>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  */}\n\n\t\t\t{/* dark table */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse <code>variant=&#34;dark&#34; </code>to invert the colors of the table\n\t\t\t\t\t\t\tand get light text on a dark background.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table variant=\"dark\" className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DarkTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of dark table */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/*  */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"table-head-options\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Table head options</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tSimilar to tables and dark tables, use the modifier classes{' '}\n\t\t\t\t\t\t\t<code>.table-light</code> or <code>.table-dark</code> to make{' '}\n\t\t\t\t\t\t\t<code>&lt;thead&gt;</code>s appear light or dark gray.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead className=\"table-light\">\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t<Table className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead className=\"table-dark\">\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TableHeadCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of  */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* striped-rows */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"striped-rows\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Striped rows</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse the <code>striped</code> prop to customise the table.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table striped className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={StripedTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of striped-rows */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* striped-rows bg */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tUse <code>variant</code> prop to table variants:\n\t\t\t\t\t</p>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table variant=\"success\" className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Larry</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TableVariantCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of striped-rows bg */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* bordered-table */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"bordered-table\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Bordered table</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>bordered</code> prop for borders on all sides of the\n\t\t\t\t\t\t\ttable and cells.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table bordered className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td colSpan=\"2\">Larry the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BorderedTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of bordered-table */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* borderless-table */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"borderless-table\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Borderless table</h2>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table borderless className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td colSpan=\"2\">Larry the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BorderlessTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of borderless-table */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* hoverable-rows */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"hoverable-rows\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Hoverable rows</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>hover</code> prop to enable a hover state on table rows\n\t\t\t\t\t\t\twithin a <code>&lt;tbody&gt;</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-8\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table hover className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td colSpan=\"2\">Larry the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={HoverableRowsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of hoverable-rows */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* small-table */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"small-table\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Small table</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAdd <code>.table-sm</code> to make tables more compact by cutting\n\t\t\t\t\t\t\tcell padding in half.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-9\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table size=\"sm\" className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">First</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Last</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Handle</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Mark</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Otto</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@mdo</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Jacob</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Thornton</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@fat</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td colSpan=\"2\">Larry the Bird</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>@twitter</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={SmallTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of small-table */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* contextual-classes */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"contextual-classes\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Variants</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse contextual classes to color table rows or individual cells.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-10\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead className=\"thead-light\">\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Class</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-active\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Active</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Default</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-primary\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Primary</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-secondary\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Secondary</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-success\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Success</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-danger\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Danger</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-warning\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Warning</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-info\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Info</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-light\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Light</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr className=\"table-dark\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">Dark</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ContextualClassesCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of contextual-classes */}\n\n\t\t\t<hr className=\"mb-5 mt-5\" />\n\n\t\t\t{/* responsive-tables */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"responsive-tables\" className=\"mb-4\">\n\t\t\t\t\t\t<h2>Responsive tables</h2>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tResponsive tables allow tables to be scrolled horizontally with\n\t\t\t\t\t\t\tease.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tAcross every breakpoint, use responsive for horizontally scrolling\n\t\t\t\t\t\t\ttables. Responsive tables are wrapped automatically in a{' '}\n\t\t\t\t\t\t\t<code>div</code>.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tUse <code>responsive=&#34;sm&#34;</code>, <code>responsive=&#34;md&#34;</code>,{' '}\n\t\t\t\t\t\t\t<code>responsive=&#34;lg&#34;</code>, or <code>responsive=&#34;xl&#34;</code> as\n\t\t\t\t\t\t\tneeded to create responsive tables up to a particular breakpoint.\n\t\t\t\t\t\t\tFrom that breakpoint and up, the table will behave normally and\n\t\t\t\t\t\t\tnot scroll horizontally.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-11\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Table responsive className=\"text-nowrap\">\n\t\t\t\t\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">#</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"col\">Heading</th>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">1</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">2</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<th scope=\"row\">3</th>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<td>Cell</td>\n\t\t\t\t\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t\t\t\t\t</Table>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={ResponsiveTableCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of responsive-tables */}\n\t\t</Container>\n\t);\n};\n\nexport default Tables;\n"
  },
  {
    "path": "app/(dashboard)/components/toasts/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tToast,\n\tToastContainer,\n\tButton,\n\tImage,\n\tTab,\n\tNav,\n\tForm,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport {\n\tBasicExampleCode,\n\tTranslucentToastsCode,\n\tStackingCode,\n\tPlacementCode1,\n\tPlacementCode2,\n\tPlacementCode3,\n\tDismissibleCode\n} from 'data/code/ToastsCode';\n\nconst Toasts = () => {\n\tconst [showA, setShowA] = useState(true);\n\tconst [showB, setShowB] = useState(true);\n\n\tconst toggleShowA = () => setShowA(!showA);\n\tconst toggleShowB = () => setShowB(!showB);\n\n\tconst [position, setPosition] = useState('top-start');\n\n\tconst iconSVG = `<svg class=\"bd-placeholder-img rounded me-2\" width=\"20\" height=\"20\"\n\txmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"\n\trole=\"img\">\n\t<rect width=\"100%\" height=\"100%\" fill=\"var(--bs-primary)\"></rect>\n  </svg>`;\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Toast</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tPush notifications to your visitors with a toast, a lightweight\n\t\t\t\t\t\t\t\tand easily customizable alert message.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* basic */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"examples\" className=\"mb-4\">\n\t\t\t\t\t\t<div id=\"basic\">\n\t\t\t\t\t\t\t<h3>Basic</h3>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tTo encourage extensible and predictable toasts, we recommend a\n\t\t\t\t\t\t\t\theader and body. Toast headers use display: flex, allowing easy\n\t\t\t\t\t\t\t\talignment of content thanks to our margin and flexbox utilities.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tToasts are as flexible as you need and have very little required\n\t\t\t\t\t\t\t\tmarkup. At a minimum, we require a single element to contain\n\t\t\t\t\t\t\t\tyour “toasted” content and strongly encourage a dismiss button.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Toast>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>11 mins ago</small>\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\tHello, world! This is a toast message.\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicExampleCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of basic */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* translucent */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"translucent\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Translucent</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-2\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4 bg-primary\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Toast className=\"mb-4\">\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>just now</small>\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>See? Just like this.</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={TranslucentToastsCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of translucent */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* stacking */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"stacking\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Stacking</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWhen you have multiple toasts, we default to vertically stacking\n\t\t\t\t\t\t\tthem in a readable manner.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-3\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Toast className=\"mb-4\">\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>just now</small>\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>See? Just like this.</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t</Toast>\n\n\t\t\t\t\t\t\t\t\t\t<Toast animation={false}>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t<small>2 seconds ago</small>\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\tHeads up, toasts will stack automatically\n\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={StackingCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of stacking */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* placement */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"placement\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Placement</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tPlace toasts with custom CSS as you need them. The top right is\n\t\t\t\t\t\t\toften used for notifications, as is the top middle.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-4\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div className=\"mb-3\">\n\t\t\t\t\t\t\t\t\t\t\t<label htmlFor=\"selectToastPlacement\">\n\t\t\t\t\t\t\t\t\t\t\t\tToast position\n\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t<Form.Select\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"selectToastPlacement\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mt-2\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) => setPosition(e.currentTarget.value)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t\t\t\t\t\t'top-start',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'top-center',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'top-end',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'middle-start',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'middle-center',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'middle-end',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'bottom-start',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'bottom-center',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'bottom-end'\n\t\t\t\t\t\t\t\t\t\t\t\t].map((p) => (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<option key={p} value={p}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{p}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t\t</Form.Select>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"position-relative\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ minHeight: '240px' }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<ToastContainer className=\"p-3\" position={position}>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header closeButton={false}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"/images/avatar/avatar-1.jpg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"rounded me-2 avatar-xs\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\talt=\"...\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>11 mins ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tHello, world! This is a toast message.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t\t</ToastContainer>\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PlacementCode1} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement */}\n\n\t\t\t{/* placement */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tFor systems that generate more notifications, consider using a\n\t\t\t\t\t\t\twrapping element so they can easily stack.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-5\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\t\t\t\t\tminHeight: '250px'\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tright: 0\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast className=\"mb-4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>just now</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>See? Just like this.</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast className=\"mb-4\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>2 seconds ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tHeads up, toasts will stack automatically\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PlacementCode2} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement */}\n\n\t\t\t{/* placement */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"mb-4 mt-4\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tYou can also get fancy with flexbox utilities to align toasts\n\t\t\t\t\t\t\thorizontally and/or vertically.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-6\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"d-flex justify-content-center align-items-center\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\t\t\t\t\tminHeight: '250px'\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Toast>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<small>11 mins ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\tHello, world! This is a toast message.\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={PlacementCode3} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of placement  */}\n\n\t\t\t<hr className=\"mb-5 mt-7\" />\n\n\t\t\t{/* dismissible */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12} className=\"mb-5\">\n\t\t\t\t\t<div id=\"dismissible\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Dismissible</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Tab.Container id=\"tab-container-7\" defaultActiveKey=\"design\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"design\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"react\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"design\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{/* code started */}\n\t\t\t\t\t\t\t\t\t\t<Row>\n\t\t\t\t\t\t\t\t\t\t\t<Col md={6} className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button onClick={toggleShowA} className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tToggle Toast <strong>with</strong> Animation\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tshow={showA}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose={toggleShowA}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>just now</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>See? Just like this.</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t\t\t\t\t<Col md={6} className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Button onClick={toggleShowB} className=\"mb-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tToggle Toast <strong>without</strong> Animation\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t<Toast\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose={toggleShowB}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshow={showB}\n\t\t\t\t\t\t\t\t\t\t\t\t\tanimation={false}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: iconSVG }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<strong className=\"me-auto\">Bootstrap</strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<small>2 seconds ago</small>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Header>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tHeads up, toasts will stack automatically\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Toast.Body>\n\t\t\t\t\t\t\t\t\t\t\t\t</Toast>\n\t\t\t\t\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t\t\t\t</Row>\n\n\t\t\t\t\t\t\t\t\t\t{/* end of code */}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"react\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={DismissibleCode} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of dismissible */}\n\t\t</Container>\n\t);\n};\n\nexport default Toasts;\n"
  },
  {
    "path": "app/(dashboard)/components/tooltips/page.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tOverlayTrigger,\n\tTooltip,\n\tButton,\n\tNav,\n\tTab,\n\tContainer\n} from 'react-bootstrap';\n\n// import widget/custom components\nimport { HighlightCode }  from 'widgets';\n\n// import react code data file\nimport { BasicTooltip } from 'data/code/TooltipsCode';\n\nconst Tooltips = () => {\n\treturn (\n\t\t<Container fluid className=\"p-6\">\n\t\t\t<Row>\n\t\t\t\t<Col lg={12} md={12} sm={12}>\n\t\t\t\t\t<div className=\"border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between\">\n\t\t\t\t\t\t<div className=\"mb-3 mb-md-0\">\n\t\t\t\t\t\t\t<h1 className=\"mb-1 h2 fw-bold\">Tooltips</h1>\n\t\t\t\t\t\t\t<p className=\"mb-0 \">\n\t\t\t\t\t\t\t\tDocumentation and examples for adding custom Bootstrap tooltips.\n\t\t\t\t\t\t\t\tA tooltip component for a more stylish alternative to that\n\t\t\t\t\t\t\t\tanchor tag <code>title</code> attribute.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\n\t\t\t{/* tooltips */}\n\t\t\t<Row>\n\t\t\t\t<Col xl={12} lg={12} md={12} sm={12}>\n\t\t\t\t\t<div id=\"tooltips\" className=\"mb-4\">\n\t\t\t\t\t\t<h3>Examples</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tHover over the buttons below to see the four tooltips directions:\n\t\t\t\t\t\t\ttop, right, bottom, and left. You can pass the{' '}\n\t\t\t\t\t\t\t<code>Overlay</code> injected props directly to the Tooltip\n\t\t\t\t\t\t\tcomponent.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<Tab.Container id=\"tab-container-1\" defaultActiveKey=\"all\">\n\t\t\t\t\t\t<Card>\n\t\t\t\t\t\t\t<Card.Header className=\"border-bottom-0 p-0\">\n\t\t\t\t\t\t\t\t<Nav className=\"nav-lb-tab\">\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"all\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tDesign\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t\t<Nav.Item>\n\t\t\t\t\t\t\t\t\t\t<Nav.Link eventKey=\"approved\" className=\"mb-sm-3 mb-md-0\">\n\t\t\t\t\t\t\t\t\t\t\tCode\n\t\t\t\t\t\t\t\t\t\t</Nav.Link>\n\t\t\t\t\t\t\t\t\t</Nav.Item>\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t</Card.Header>\n\t\t\t\t\t\t\t<Card.Body className=\"p-0\">\n\t\t\t\t\t\t\t\t<Tab.Content>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"all\" className=\"pb-4 p-4\">\n\t\t\t\t\t\t\t\t\t\t{['top', 'right', 'bottom', 'left'].map((placement) => (\n\t\t\t\t\t\t\t\t\t\t\t<OverlayTrigger\n\t\t\t\t\t\t\t\t\t\t\t\tkey={placement}\n\t\t\t\t\t\t\t\t\t\t\t\tplacement={placement}\n\t\t\t\t\t\t\t\t\t\t\t\toverlay={\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip id={`tooltip-${placement}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tTooltip on <strong>{placement}</strong>.\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"me-1 mb-2 mb-lg-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\tTooltip on {placement}\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</OverlayTrigger>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t\t<Tab.Pane eventKey=\"approved\" className=\"pb-4 p-4 react-code\">\n\t\t\t\t\t\t\t\t\t\t<HighlightCode code={BasicTooltip} />\n\t\t\t\t\t\t\t\t\t</Tab.Pane>\n\t\t\t\t\t\t\t\t</Tab.Content>\n\t\t\t\t\t\t\t</Card.Body>\n\t\t\t\t\t\t</Card>\n\t\t\t\t\t</Tab.Container>\n\t\t\t\t</Col>\n\t\t\t</Row>\n\t\t\t{/* end of tooltips */}\n\t\t</Container>\n\t);\n};\n\nexport default Tooltips;\n"
  },
  {
    "path": "app/(dashboard)/documentation/page.js",
    "content": "'use client'\n\nimport Link from 'next/link';\n// import node module libraries\nimport { Card, Col, Row, Container } from 'react-bootstrap';\n\nconst Documentation = () => {\n  return (\n    <Container fluid className=\"p-6\">\n      <Row>\n        <Col lg={12} md={12} sm={12}>\n          <div className=\"border-bottom pb-4 mb-4 d-md-flex justify-content-between align-items-center\">\n            <div className=\"mb-3 mb-md-0\">\n              <h1 className=\"mb-0 h2 fw-bold\">Dash UI NextJS</h1>\n              <p className=\"mb-0\">\n                Welcome to the Dash UI NextJS version of the original Dash UI theme.\n              </p>\n            </div>\n          </div>\n        </Col>\n      </Row>\n      <Row>\n        <Col lg={7} md={12} sm={12}>\n          <Card>\n            <Card.Body>\n              <h2 className=\"fw-bold\">Getting Started</h2>\n              <p className=\"lead\">\n                A professional Dash UI NextJS Kit that comes with plenty of\n                ready-to-use components that will help you to build more\n                beautiful application (web app).\n              </p>\n\n              <p>\n                Dash UI Kit is built with the most popular front-end framework{' '}\n                <a\n                  href=\"https://react-bootstrap.github.io/\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  ReactJS Bootstrap\n                </a>{' '}\n                with react-scripts.\n              </p>\n              <p>\n                This doc will guide you to understand how Dash UI-NextJS theme is\n                organized, basics of how to customize, and how to compile from\n                the source code if you want.\n              </p>\n\n              <hr className=\"mb-5 mt-5\" />\n\n              <h2 className=\"mb-0 fw-bold\">Running in Local environment</h2>\n              <p>This project is scaffolded using npx create-next-app@latest.</p>\n\n              <ol>\n                <li>\n                  <h4 className=\"mb-0 fw-bold\">Requirements Node.js</h4>\n                  <p>\n                    Before proceeding you&apos;ll need to have the latest stable{' '}\n                    <a\n                      href=\"https://nodejs.org/en/download/\"\n                      target=\"_blank\"\n                      rel=\"noreferrer\"\n                    >\n                      {' '}\n                      nodejs.\n                    </a>{' '}\n                    Install <code>Node.js</code> or already have it installed on\n                    your machine move to next step.\n                  </p>\n                </li>\n                <li>\n                  {' '}\n                  <h4 className=\"mb-0 fw-bold\">Install Dash UI NextJS</h4>\n                  <p>\n                    Open the <span>dashui-free-nextjs-admin-template </span>directory with your cmd\n                    or terminal. Open the project folder and install its\n                    dependencies.{' '}\n                  </p>\n                  <pre className=\"prism-code language-jsx mb-2 bg-dark text-white fs-5\">\n                    cd dashui-free-nextjs-admin-template{' '}\n                  </pre>\n                  <pre className=\"prism-code language-jsx mb-2  bg-dark text-white fs-5\">\n                    npm install{' '}\n                  </pre>\n                  <p>\n                    This command will download all the necessary dependencies\n                    for dash UI in the node_modules directory.\n                  </p>\n                </li>\n                <li>\n                  <h4 className=\"mb-0 fw-bold\">Start</h4>\n                  <p>\n                    Run <code>npm run dev</code> or <code>yarn dev</code> or <code>pnpm dev</code> to start the development server on http://localhost:3000\n                  </p>\n                  <p>\n                    Visit <code><a\n                      href=\"http://localhost:3000\"\n                      target=\"_blank\"\n                      rel=\"noreferrer\"\n                    >\n                      http://localhost:3000{' '}\n                    </a></code> to view your application\n                  </p>\n                  <p>\n                    Edit <code>pages/index.js</code> and see the updated result in your browser\n                  </p>\n                  <pre className=\"prism-code language-jsx  bg-dark text-white fs-5\">\n                    npm run dev\n                  </pre>\n                </li>\n              </ol>\n              <hr className=\"mb-5 mt-5\" />\n              <h2 className=\"mb-0 fw-bold\">Creating a Production Build.</h2>\n              <p>Production build of your app.</p>\n              <ol>\n                <li>\n                  <div className=\"mb-4\">\n                    <p>\n                      Run <code>npm run build</code> command in your project\n                      directory to make the Production build app.\n                    </p>\n                    <pre className=\"prism-code language-jsx mb-2 bg-dark text-white fs-5\">\n                      npm run build\n                    </pre>\n                  </div>\n                </li>\n                <li>\n                  <div className=\"\">\n                    <p> This output is generated inside the <code>.next</code> folder:</p>\n                    <pre className=\"prism-code language-jsx  bg-dark text-white fs-5 mb-2\">\n                      npm run start\n                    </pre>\n                    <p>\n                      Once you execute above command, the production build run\n                      locally at <code>http://localhost:3000</code>.\n                    </p>\n                  </div>\n                </li>\n              </ol>\n\n              <hr className=\"mb-5 mt-5\" />\n              <h2 className=\"mb-0 fw-bold\">API Demo:</h2>\n              <p>Here is an API demo using fetch , <Link href=\"/pages/api-demo\"> <code>click here</code></Link></p>\n\n\n              <hr className=\"mb-5 mt-5\" />\n              <h2 className=\"mb-0 fw-bold\">File Structure:</h2>\n              <p>\n                Inside the zip-file you&apos;ll find the following directories and\n                files. Both compiled and minified distrubution files, as well as\n                the source files are included in the package.\n              </p>\n\n              <code>\n                <pre>\n                  {`\ntheme/\n├── .eslintrc.json\n├── .gitignore\n├── jsconfig.json\n├── next.config.js\n├── package.json\n├── package-lock.json\n├── README.md\n├── components/\n├── data/\n├── hooks/\n├── layouts/\n├── app/\n├── public/\n│   ├── fonts\n│   ├── images\n│   └── favicon.ico\n├── routes/\n├── styles/\n├── sub-components/\n└── widgets/\n`}\n                </pre>\n              </code>\n            </Card.Body>\n          </Card>\n        </Col>\n      </Row>\n    </Container>\n  );\n};\n\nexport default Documentation;\n"
  },
  {
    "path": "app/(dashboard)/layout-vertical/page.js",
    "content": "'use client'\n// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Container, Image } from 'react-bootstrap';\n\nconst Layout = () => {\n  return (\n    <Container fluid className=\"px-6 py-4\">\n      <Row>\n        <Col xl={12} lg={12} md={12} sm={12}>\n          <div className=\"text-center mb-7\">\n            <h1 className=\"display-4\">Layouts</h1>\n            <p>Customize your overview page layout. Choose the one that best fits your needs.</p>\n          </div>\n          <span className=\"divider fw-bold my-3\">Demo layouts</span>\n        </Col>\n      </Row>\n      <Row className=\"justify-content-center\">\n        <Col lg={3} sm={6} className=\"my-4 \">\n          <Link className=\"card\" href=\"/\">\n            <Image className=\"card-img-top\" src=\"/images/layouts/default-classic.svg\" alt=\"Image Description\" />\n            <div className=\"card-body text-center\">\n              <h5 className=\"mb-0\">Classic</h5>\n            </div>\n          </Link>\n        </Col>\n      </Row>\n    </Container>\n  )\n}\n\nexport default Layout"
  },
  {
    "path": "app/(dashboard)/layout.js",
    "content": "'use client'\n// import node module libraries\nimport { useState } from 'react';\n\n// import theme style scss file\nimport 'styles/theme.scss';\n\n// import sub components\nimport NavbarVertical from '/layouts/navbars/NavbarVertical';\nimport NavbarTop from '/layouts/navbars/NavbarTop';\n\nexport default function DashboardLayout({ children }) {\n\tconst [showMenu, setShowMenu] = useState(true);\n\tconst ToggleMenu = () => {\n\t\treturn setShowMenu(!showMenu);\n\t};\n\n\treturn (\n\t\t<div id=\"db-wrapper\" className={`${showMenu ? '' : 'toggled'}`}>\n\t\t\t<div className=\"navbar-vertical navbar\">\n\t\t\t\t<NavbarVertical\n\t\t\t\t\tshowMenu={showMenu}\n\t\t\t\t\tonClick={(value) => setShowMenu(value)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div id=\"page-content\">\n\t\t\t\t<div className=\"header\">\n\t\t\t\t\t<NavbarTop\n\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\tshowMenu: showMenu,\n\t\t\t\t\t\t\tSidebarToggleMenu: ToggleMenu\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"
  },
  {
    "path": "app/(dashboard)/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment } from \"react\";\nimport Link from 'next/link';\nimport { Container, Col, Row } from 'react-bootstrap';\n\n// import widget/custom components\nimport { StatRightTopIcon } from \"widgets\";\n\n// import sub components\nimport { ActiveProjects, Teams, \n    TasksPerformance \n} from \"sub-components\";\n\n// import required data files\nimport ProjectsStatsData from \"data/dashboard/ProjectsStatsData\";\n\nconst Home = () => {\n    return (\n        <Fragment>\n            <div className=\"bg-primary pt-10 pb-21\"></div>\n            <Container fluid className=\"mt-n22 px-6\">\n                <Row>\n                    <Col lg={12} md={12} xs={12}>\n                        {/* Page header */}\n                        <div>\n                            <div className=\"d-flex justify-content-between align-items-center\">\n                                <div className=\"mb-2 mb-lg-0\">\n                                    <h3 className=\"mb-0  text-white\">Projects</h3>\n                                </div>\n                                <div>\n                                    <Link href=\"#\" className=\"btn btn-white\">Create New Project</Link>\n                                </div>\n                            </div>\n                        </div>\n                    </Col>\n                    {ProjectsStatsData.map((item, index) => {\n                        return (\n                            <Col xl={3} lg={6} md={12} xs={12} className=\"mt-6\" key={index}>\n                                <StatRightTopIcon info={item} />\n                            </Col>\n                        )\n                    })}\n                </Row>\n\n                {/* Active Projects  */}\n                <ActiveProjects />\n\n                <Row className=\"my-6\">\n                    <Col xl={4} lg={12} md={12} xs={12} className=\"mb-6 mb-xl-0\">\n\n                        {/* Tasks Performance  */}\n                        <TasksPerformance />\n\n                    </Col>\n                    {/* card  */}\n                    <Col xl={8} lg={12} md={12} xs={12}>\n\n                        {/* Teams  */}\n                        <Teams />\n\n                    </Col>\n                </Row>\n            </Container>\n        </Fragment>\n    )\n}\nexport default Home;\n"
  },
  {
    "path": "app/(dashboard)/pages/api-demo/ServerSideData.js",
    "content": "'use client';\n\n// import node module libraries\nimport { Fragment } from \"react\";\nimport { Card } from \"react-bootstrap\";\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst ServerSideData = ({ data }) => {\n    const hasMounted = useMounted();\n    return (\n        <Fragment>\n            {hasMounted && <Card className=\"m-5\">\n                <Card.Body>\n                    <pre>{JSON.stringify(data, null, 2)}</pre>\n                </Card.Body>\n            </Card>}\n        </Fragment>\n    )\n}\n\nexport default ServerSideData"
  },
  {
    "path": "app/(dashboard)/pages/api-demo/page.js",
    "content": "import ServerSideData from './ServerSideData'\n\nasync function getServerData() {\n    let data = await fetch('https://dummyjson.com/products/1', { cache: 'no-store' })\n    data = await data.json();\n    return data;\n}\n\nexport default async function Page() {\n    const data = await getServerData();\n    return (\n        <ServerSideData data={data} />\n    )\n}"
  },
  {
    "path": "app/(dashboard)/pages/billing/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Row, Col, Container } from 'react-bootstrap';\n\n// import widget as custom components\nimport { PageHeading } from 'widgets'\n\n// import sub components\nimport { BillingAddress, CurrentPlan } from 'sub-components'\n\nconst Billing = () => {\n  return (\n    <Container fluid className=\"p-6\">\n      {/* Page Heading */}\n      <PageHeading heading=\"Billing\" />\n\n      <Row className=\"mt-6\">\n        <Col xl={{ span: 8, offset: 2 }} lg={{ span: 10, offset: 1 }} md={12} xs={12}>\n          <Row>\n            {/* Current Plan Overview */}\n            <CurrentPlan />\n\n            {/* Billing Address */}\n            <BillingAddress />\n\n          </Row>\n        </Col>\n      </Row>\n    </Container>\n  )\n}\n\nexport default Billing"
  },
  {
    "path": "app/(dashboard)/pages/pricing/page.js",
    "content": "'use client'\n// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Container } from 'react-bootstrap';\n\n// import sub components\nimport { PricingCard, PageHeading, FeatureLeftTopIcon } from 'widgets'\n\n// import data files\nimport { standard, multisite, extended } from 'data/pricing/PricingPlansData';\nimport FAQsData from 'data/pricing/FAQsData';\nimport FeaturesData from 'data/pricing/FeaturesData';\n\nconst Pricing = () => {\n  return (\n    <Container fluid className=\"p-6\">\n      {/* Page Heading */}\n      <PageHeading heading=\"Pricing\" />\n      <div className=\"py-8\">\n        <Row>\n          <Col xl={{ span: 10, offset: 1 }} md={12}>\n            <Row className=\"mb-10\">\n              <Col md={12} xs={12} className=\"mb-6\">\n                <h1 className=\"display-4 fw-bold ls-sm\">Find a plan that s right for you</h1>\n                <div className=\"d-lg-flex align-items-center mt-4\">\n                  <div>\n                    <p className=\"mb-lg-0\">Or simply leverage the expertise of our consultation team.</p>\n                  </div>\n                  <div className=\"ms-0 ms-lg-3\">\n                    <Link href=\"#\" className=\"btn btn-outline-primary btn-sm\">Talk to us</Link>\n                  </div>\n                </div>\n              </Col>\n              <Col xl={4} lg={6} md={12} xs={12} className=\"mb-3\">\n                {/* Standard Pricing Card */}\n                <PricingCard content={standard} />\n              </Col>\n              <Col xl={4} lg={6} md={12} xs={12} className=\"mb-3\">\n                {/* Multisite Pricing Card */}\n                <PricingCard content={multisite} />\n              </Col>\n              <Col xl={4} lg={6} md={12} xs={12} className=\"mb-3\">\n                {/* Extended Pricing Card */}\n                <PricingCard content={extended} />\n              </Col>\n            </Row>\n            <Row className=\"mb-10\">\n              <Col lg={12} md={12} xs={12}>\n                <div className=\"mb-6\">\n                  <h2>Everything you need to build efficiently</h2>\n                  <p>Start building your app using our tools, be efficient, spend less time with details more time with your business.\n                  </p>\n                </div>\n              </Col>\n              {/* Features */}\n              {FeaturesData.map((item, index) => {\n                return (\n                  <Col lg={4} md={6} xs={12} key={index}>\n                    <FeatureLeftTopIcon item={item} />\n                  </Col>\n                )\n              })}\n            </Row>\n            <Row>\n              {/* FAQs Heading */}\n              <Col xs={12}>\n                <div className=\"mb-6\">\n                  <h2 className=\"mb-0\">Frequently Asked Questions</h2>\n                </div>\n              </Col>\n\n              {/* FAQs List */}\n              {FAQsData.map((item, index) => {\n                return (\n                  <Col lg={4} md={6} sm={12} className=\"mb-3\" key={index}>\n                    <h4>{item.question}</h4>\n                    <p>{item.answer}</p>\n                  </Col>\n                );\n              })}\n            </Row>\n          </Col>\n        </Row>\n      </div>\n    </Container>\n  )\n}\n\nexport default Pricing"
  },
  {
    "path": "app/(dashboard)/pages/profile/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Col, Row, Container } from 'react-bootstrap';\n\n// import widget as custom components\nimport { PageHeading } from 'widgets'\n\n// import sub components\nimport {\n  AboutMe,\n  ActivityFeed,\n  MyTeam,\n  ProfileHeader,\n  ProjectsContributions,\n  RecentFromBlog\n} from 'sub-components'\n\nconst Profile = () => {\n  return (\n    <Container fluid className=\"p-6\">\n      {/* Page Heading */}\n      <PageHeading heading=\"Overview\"/>\n\n      {/* Profile Header  */}\n      <ProfileHeader />\n\n      {/* content */}\n      <div className=\"py-6\">\n        <Row>\n\n          {/* About Me */}\n          <AboutMe />\n\n          {/* Projects Contributions */}\n          <ProjectsContributions />\n\n          {/* Recent From Blog */}\n          <RecentFromBlog />\n\n          <Col xl={6} lg={12} md={12} xs={12} className=\"mb-6\">\n\n            {/* My Team */}\n            <MyTeam />\n\n            {/* Activity Feed */}\n            <ActivityFeed />\n\n          </Col>\n        </Row>\n      </div>\n\n    </Container>\n  )\n}\n\nexport default Profile"
  },
  {
    "path": "app/(dashboard)/pages/settings/page.js",
    "content": "'use client'\n// import node module libraries\nimport { Container } from 'react-bootstrap';\n\n// import widget as custom components\nimport { PageHeading } from 'widgets'\n\n// import sub components\nimport { Notifications, DeleteAccount, GeneralSetting, EmailSetting, Preferences } from 'sub-components'\n\nconst Settings = () => {\n  return (\n    <Container fluid className=\"p-6\">\n\n      {/* Page Heading */}\n      <PageHeading heading=\"General\" />\n\n      {/* General Settings */}\n      <GeneralSetting />\n\n      {/* Email Settings */}\n      {/* // DONE ... <EmailSetting /> */}\n\n      {/* Settings for Preferences */}\n      {/* // DONE ...<Preferences /> */}\n\n      {/* Settings for Notifications */}\n      {/* <Notifications /> */}\n\n      {/* Delete Your Account */}\n      <DeleteAccount />\n\n    </Container>\n  )\n}\n\nexport default Settings"
  },
  {
    "path": "app/layout.js",
    "content": "// import theme style scss file\nimport Link from 'next/link';\nimport 'styles/theme.scss';\n\nexport const metadata = {\n    title: 'Dash UI - Next.Js Admin Dashboard Template',\n    description: 'Dash UI - Next JS admin dashboard template is free and available on GitHub. Create your stunning web apps with our Free Next js template. An open-source admin dashboard built using the new router, server components, and everything new in Next.js 13.',\n    keywords: 'Dash UI, Next.js 13, Admin dashboard, admin template, web apps, bootstrap 5, admin theme'\n}\n\nexport default function RootLayout({ children }) {\n    return (\n        <html lang=\"en\">\n            <body className='bg-light'>\n                {children}\n\n                <Link href=\"https://bit.ly/3YoCCRH\" target=\"_blank\" className=\"btn btn-dark btn-float-button m-5 fs-4\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.25\"\n                        strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"icon icon-tabler icons-tabler-outline icon-tabler-shopping-cart-share\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" /><path d=\"M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\" /><path d=\"M12.5 17h-6.5v-14h-2\" /><path d=\"M6 5l14 1l-1 7h-13\" /><path d=\"M16 22l5 -5\" /><path d=\"M21 21.5v-4.5h-4.5\" /></svg>{' '} Buy Now\n                </Link>\n            </body>\n        </html>\n    )\n}\n"
  },
  {
    "path": "app/not-found.js",
    "content": "'use client'\n// import node module libraries\nimport { Col, Row, Image, Container } from 'react-bootstrap';\nimport Link from 'next/link';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\nimport { Fragment } from 'react';\n\nconst NotFound = () => {\n  const hasMounted = useMounted();\n  return (\n    <Fragment>\n      {hasMounted &&\n        <Container>\n          <Row >\n            <Col sm={12}>\n              <div className=\"text-center\">\n                <div className=\"mb-3\">\n                  <Image src=\"/images/error/404-error-img.png\" alt=\"\" className=\"img-fluid\" />\n                </div>\n                <h1 className=\"display-4 fw-bold\">Oops! the page not found.</h1>\n                <p className=\"mb-4\">Or simply leverage the expertise of our consultation\n                  team.</p>\n                <Link href=\"/\" className=\"btn btn-primary\">\n                  Go Home\n                </Link>\n              </div>\n            </Col>\n          </Row>\n        </Container>\n      }\n    </Fragment>\n  );\n};\n\n\nexport default NotFound;\n\n\n"
  },
  {
    "path": "components/CopyToClipboardButton.js",
    "content": "import React, { useState } from 'react';\n\nconst CopyToClipboardButton = ({ textToCopy }) => {\n    const [copied, setCopied] = useState(false);\n\n    const handleCopy = async () => {\n        try {\n            await navigator.clipboard.writeText(textToCopy);\n            setCopied(true);\n            setTimeout(() => setCopied(false), 2000); // Reset 'copied' state after 2 seconds\n        } catch (err) {\n            console.error('Failed to copy text: ', err);\n            // Handle error, e.g., show an error message to the user\n        }\n    };\n\n    return (\n        <button onClick={handleCopy}>\n            {copied ? 'Copied!' : 'Copy to Clipboard'}\n        </button>\n    );\n};\n\nexport default CopyToClipboardButton;"
  },
  {
    "path": "components/bootstrap/DotBadge.js",
    "content": "'use client'\n\n/***************************\nComponent : DotBadge\n****************************\n\nAvailalble Parameters\n\nbg        : Optional ( default = primary ), possible bg options are, primary, light-primary, secondary,  light-secondary etc...\n\n*/\n\n// import node module libraries\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { Badge } from 'react-bootstrap';\n\nconst DotBadge = (props = {\n\tbg: 'light-primary',\n\tclassName:'me-2'\n}) => {\n\treturn (\n\t\t<span className={props.className}>\n\t\t<Badge bg={props.bg} className=\"badge-dot\"></Badge> {props.children}\n\t</span>\n\t);\n};\n\nDotBadge.propTypes = {\n\tbg: PropTypes.string,\n\tclassName: PropTypes.string\n};\n\nexport default DotBadge;\n"
  },
  {
    "path": "data/Notification.js",
    "content": "const Notification = [\n\t{\n\t\tid: 1,\n\t\tsender: 'Rishi Chopra',\n\t\tmessage: `Mauris blandit erat id nunc blandit, ac eleifend dolor pretium.`\n\t},\n\t{\n\t\tid: 2,\n\t\tsender: 'Neha Kannned',\n\t\tmessage: `Proin at elit vel est condimentum elementum id in ante. Maecenas et sapien metus.`\n\t},\n\t{\n\t\tid: 3,\n\t\tsender: 'Nirmala Chauhan',\n\t\tmessage: `Morbi maximus urna lobortis elit sollicitudin sollicitudieget elit vel pretium.`\n\t},\n\t{\n\t\tid: 4,\n\t\tsender: 'Sina Ray',\n\t\tmessage: `Sed aliquam augue sit amet mauris volutpat hendrerit sed nunc eu diam.`\n\t}\n];\n\nexport default Notification;\n"
  },
  {
    "path": "data/code/AccordionCode.js",
    "content": "export const AccordionBasicCode = `\n<Accordion.Item eventKey=\"0\">\n    <Accordion.Header>Accordion Item #1</Accordion.Header>\n    <Accordion.Body>\n        <strong>This is the accordion body of item 1.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n        These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n        It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n    </Accordion.Body>\n  </Accordion.Item>\n  <Accordion.Item eventKey=\"1\">\n    <Accordion.Header>Accordion Item #2</Accordion.Header>\n    <Accordion.Body>\n        <strong>This is the accordion body of item 2.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n        These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n        It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n    </Accordion.Body>\n  </Accordion.Item>\n  <Accordion.Item eventKey=\"2\">\n    <Accordion.Header>Accordion Item #3</Accordion.Header>\n    <Accordion.Body>\n        <strong>This is the accordion body of item 3.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n        These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n        It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n    </Accordion.Body>\n  </Accordion.Item>\n</Accordion>\n    `.trim();\n\nexport const AccordionFlushCode = `\n<Accordion defaultActiveKey=\"0\" flush>\n    <Accordion.Item eventKey=\"0\">\n        <Accordion.Header>Accordion Item #1</Accordion.Header>\n        <Accordion.Body>\n            <strong>This is the accordion body of item 1.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n            These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n            It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n        </Accordion.Body>\n    </Accordion.Item>\n    <Accordion.Item eventKey=\"1\">\n        <Accordion.Header>Accordion Item #2</Accordion.Header>\n        <Accordion.Body>\n            <strong>This is the accordion body of item 2.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n            These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n            It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n        </Accordion.Body>\n        </Accordion.Item>\n    <Accordion.Item eventKey=\"2\">\n        <Accordion.Header>Accordion Item #3</Accordion.Header>\n        <Accordion.Body>\n            <strong>This is the accordion body of item 3.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. \n            These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. \n            It's also worth noting that just about any HTML can go within the <code>&lt;Accordion.Item&gt;</code> &rarr; <code>&lt;Accordion.Body&gt;</code> though the transition does limit overflow.\n        </Accordion.Body>\n    </Accordion.Item>\n</Accordion>\n    `.trim();\n\nexport const AccordionCode = [AccordionBasicCode, AccordionFlushCode];\n\nexport default AccordionCode;\n"
  },
  {
    "path": "data/code/AlertsCode.js",
    "content": "export const SimpleAlert = `   \n<Alert variant=\"primary\" >This is a primary alert—check it out!</Alert>\n<Alert variant=\"secondary\" >This is a secondary alert—check it out!</Alert>\n<Alert variant=\"success\" >This is a success alert—check it out!</Alert>\n<Alert variant=\"danger\" >This is a danger alert—check it out!</Alert>\n<Alert variant=\"warning\" >This is a warning alert—check it out!</Alert>\n<Alert variant=\"info\" >This is a info alert—check it out!</Alert>\n<Alert variant=\"light\" >This is a light alert—check it out!</Alert>\n<Alert variant=\"dark\" >This is a dark alert—check it out!</Alert>\n    `.trim();\n\nexport const LinkAlert = `   \n<Alert variant=\"primary\">                                                    \n    This is a primary alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"secondary\">                                                    \n    This is a secondary alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"success\">                                                    \n    This is a success alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"danger\">                                                    \n    This is a danger alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"warning\">                                                    \n    This is a warning alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"info\">                                                    \n    This is a info alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"light\">                                                    \n    This is a light alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n<Alert variant=\"dark\">                                                    \n    This is a dark alert with <Alert.Link href=\"#\">an example link</Alert.Link>. Give it a click if you like.\n</Alert>\n    `.trim();\n\nexport const AdditionalAlert = `   \n<Alert variant=\"success\">\n    <Alert.Heading>Well done!</Alert.Heading>\n    <p>\n        Aww yeah, you successfully read this important alert message. This example\n        text is going to run a bit longer so that you can see how spacing within an\n        alert works with this kind of content.\n    </p>\n    <hr />\n    <p className=\"mb-0\">\n        Whenever you need to, be sure to use margin utilities to keep things nice\n        and tidy.\n    </p>\n</Alert>    \n    `.trim();\n\nexport const AlertWithIcon = ` \n// import below bootstrap icons from react-bootstrap-icons library before using those\nimport { ExclamationCircleFill, CheckCircleFill, ExclamationTriangleFill } from 'react-bootstrap-icons';\n\n<Alert variant=\"primary\"><ExclamationCircleFill size={25} className=\"me-1\"  />An example alert with an icon</Alert>\n<Alert variant=\"success \"><CheckCircleFill size={25} className=\"me-1\"  />An example success alert with an icon</Alert>\n<Alert variant=\"warning\"><ExclamationTriangleFill size={25} className=\"me-1\"  />An example warning alert with an icon</Alert>\n<Alert variant=\"danger\"><ExclamationTriangleFill size={25} className=\"me-1\"  />An example danger alert with an icon</Alert>\n`.trim();\n\nexport const DismissingAlert = `   \nconst AlertDismissible = () => {\n    const [show, setShow] = useState(true);    \n    if (show) {\n        return (\n            <Alert variant=\"danger\" onClose={() => setShow(false)} dismissible>            \n            <Alert.Heading>Holy guacamole!</Alert.Heading>You should check in on some of those fields below.          \n            </Alert>\n        );\n    }\n    return <Button onClick={() => setShow(true)}>Show Alert</Button>;\n}\nrender(<AlertDismissible />);    \n`.trim();\n\nexport const AlertsCode = [\n\tSimpleAlert,\n\tLinkAlert,\n\tAdditionalAlert,\n\tAlertWithIcon,\n\tDismissingAlert\n];\n\nexport default AlertsCode;\n"
  },
  {
    "path": "data/code/BadgesCode.js",
    "content": "export const SimpleBadgeCode = `   \n<h1> Example heading <Badge bg=\"secondary\">New</Badge></h1>\n<h2> Example heading <Badge bg=\"secondary\">New</Badge></h2>\n<h3> Example heading <Badge bg=\"secondary\">New</Badge> </h3>\n<h4> Example heading <Badge bg=\"secondary\">New</Badge></h4>\n<h5> Example heading <Badge bg=\"secondary\">New</Badge> </h5>\n<h6> Example heading <Badge bg=\"secondary\">New</Badge></h6>\n`.trim();\n\nexport const BadgeWithButtonCode = `   \n<Button variant=\"primary\">\n    Notifications <Badge bg=\"light\" className=\"text-primary\">4</Badge>                                        \n</Button>\n`.trim();\n\nexport const PillBadgesCode = `   \n<Badge pill bg=\"primary\"  className=\"me-1\">primary</Badge>\n<Badge pill bg=\"secondary\"  className=\"me-1\">secondary</Badge>\n<Badge pill bg=\"success\"  className=\"me-1\">success</Badge>\n<Badge pill bg=\"danger\"  className=\"me-1\">danger</Badge>\n<Badge pill bg=\"warning\"  className=\"me-1\">warning</Badge>\n<Badge pill bg=\"info\"  className=\"me-1\">info</Badge>\n<Badge pill bg=\"light\" text=\"dark\" className=\"me-1\">light</Badge>\n<Badge pill bg=\"dark\"  className=\"me-1\">dark</Badge>\n`.trim();\n\n\nexport const PaginationsCode = [\n\tSimpleBadgeCode,\n\tBadgeWithButtonCode,\n\tPillBadgesCode\n];\n\nexport default PaginationsCode;\n"
  },
  {
    "path": "data/code/BreadcrumbCode.js",
    "content": "export const BasicBreadcrumb = `   \n<Breadcrumb>\n    <Breadcrumb.Item active>Home</Breadcrumb.Item>\n</Breadcrumb>\n<Breadcrumb>\n    <Breadcrumb.Item href=\"#\">Home</Breadcrumb.Item>\n    <Breadcrumb.Item active>Library</Breadcrumb.Item>\n</Breadcrumb>\n<Breadcrumb>\n    <Breadcrumb.Item href=\"#\">Home</Breadcrumb.Item>\n    <Breadcrumb.Item href=\"#\">Library</Breadcrumb.Item>\n    <Breadcrumb.Item active>Data</Breadcrumb.Item>\n</Breadcrumb>\n    `.trim();\n\nexport default BasicBreadcrumb;\n"
  },
  {
    "path": "data/code/ButtonGroupCode.js",
    "content": "export const BasicButtonGroupCode = `   \n<ButtonGroup aria-label=\"Basic example\" >\n    <Button variant=\"primary\">Left</Button>\n    <Button variant=\"primary\">Middle</Button>\n    <Button variant=\"primary\">Right</Button>\n</ButtonGroup>\n`.trim();\n\nexport const GroupLinksCode = `   \n<ButtonGroup aria-label=\"Basic example\" >\n    <Button variant=\"primary\" href=\"#\" active >Active Link</Button>\n    <Button variant=\"primary\" href=\"#\">Link</Button>\n    <Button variant=\"primary\" href=\"#\">Link</Button>\n</ButtonGroup>\n`.trim();\n\nexport const MixedStylesCode = `   \n<ButtonGroup aria-label=\"Basic mixed styles example\" >\n    <Button variant=\"danger\"  >Left</Button>\n    <Button variant=\"warning\" >Middle</Button>\n    <Button variant=\"success\" >Right</Button>\n</ButtonGroup> \n`.trim();\n\nexport const OutlineStylesCode = `   \n<ButtonGroup aria-label=\"Basic mixed styles example\" >\n    <Button variant=\"outline-primary\"  >Left</Button>\n    <Button variant=\"outline-primary\" >Middle</Button>\n    <Button variant=\"outline-primary\" >Right</Button>\n</ButtonGroup> \n`.trim();\n\nexport const CheckboxStyleCode = `   \n<ToggleButtonGroup type=\"checkbox\" defaultValue={[1]} className=\"mb-2\">\n    <ToggleButton id=\"tbg-check-1\" value={1} variant=\"outline-primary\">\n        Checkbox 1 \n    </ToggleButton>\n    <ToggleButton id=\"tbg-check-2\" value={2} variant=\"outline-primary\">\n        Checkbox 2\n    </ToggleButton>\n    <ToggleButton id=\"tbg-check-3\" value={3} variant=\"outline-primary\">\n        Checkbox 3 \n    </ToggleButton>\n</ToggleButtonGroup> \n`.trim();\n\nexport const RadioStyleCode = `   \n<ToggleButtonGroup type=\"radio\" name=\"options\" defaultValue={1}>\n    <ToggleButton id=\"tbg-radio-1\" value={1} variant=\"outline-primary\">\n        Radio 1\n    </ToggleButton>\n    <ToggleButton id=\"tbg-radio-2\" value={2} variant=\"outline-primary\">\n        Radio 2\n    </ToggleButton>\n    <ToggleButton id=\"tbg-radio-3\" value={3} variant=\"outline-primary\">\n        Radio 3\n    </ToggleButton>\n</ToggleButtonGroup> \n`.trim();\n\nexport const ToolbarStyleCode = `   \n<ButtonToolbar aria-label=\"Toolbar with button groups\">\n    <ButtonGroup aria-label=\"First group\" className=\"me-2\" >\n        <Button>1</Button> <Button>2</Button> <Button>3</Button> <Button>4</Button>\n    </ButtonGroup>\n    <ButtonGroup aria-label=\"Second group\" className=\"me-2\" >\n        <Button>5</Button> <Button>6</Button> <Button>7</Button>\n    </ButtonGroup>\n    <ButtonGroup aria-label=\"Third group\">\n        <Button>8</Button>\n    </ButtonGroup>\n</ButtonToolbar> \n`.trim();\n\nexport const ButtonSizingCode = `   \n<ButtonGroup aria-label=\"Basic example\"  size=\"lg\" className=\"mb-2\" >\n    <Button variant=\"primary\">Left</Button>\n    <Button variant=\"primary\">Middle</Button>\n    <Button variant=\"primary\">Right</Button>\n</ButtonGroup>\n\n<br/>    \n\n<ButtonGroup aria-label=\"Basic example\" className=\"mb-2\" >\n    <Button variant=\"primary\">Left</Button>\n    <Button variant=\"primary\">Middle</Button>\n    <Button variant=\"primary\">Right</Button>\n</ButtonGroup>\n\n<br/>\n\n<ButtonGroup aria-label=\"Basic example\" size=\"sm\">\n    <Button variant=\"primary\">Left</Button>\n    <Button variant=\"primary\">Middle</Button>\n    <Button variant=\"primary\">Right</Button>\n</ButtonGroup> \n`.trim();\n\nexport const ButtonNestingCode = `   \n<ButtonGroup>\n    <Button>1</Button>\n    <Button>2</Button>                                \n    <DropdownButton as={ButtonGroup} title=\"Dropdown\" id=\"bg-nested-dropdown\">\n        <Dropdown.Item eventKey=\"1\">Dropdown link</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Dropdown link</Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup> \n`.trim();\n\nexport const VerticalButtonCode = `   \n<ButtonGroup vertical>\n    <Button>Button</Button>\n    <Button>Button</Button>\n\n    <DropdownButton as={ButtonGroup} title=\"Dropdown\" id=\"bg-vertical-dropdown-1\">\n        <Dropdown.Item eventKey=\"1\">Dropdown link</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Dropdown link</Dropdown.Item>\n    </DropdownButton>\n\n    <Button>Button</Button>\n    <Button>Button</Button>\n\n    <DropdownButton as={ButtonGroup} title=\"Dropdown\" id=\"bg-vertical-dropdown-2\">\n        <Dropdown.Item eventKey=\"1\">Dropdown link</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Dropdown link</Dropdown.Item>\n    </DropdownButton>\n\n    <DropdownButton as={ButtonGroup} title=\"Dropdown\" id=\"bg-vertical-dropdown-3\">\n        <Dropdown.Item eventKey=\"1\">Dropdown link</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Dropdown link</Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup> \n`.trim();\n\nexport const PaginationsCode = [\n\tBasicButtonGroupCode,\n\tGroupLinksCode,\n\tMixedStylesCode,\n\tOutlineStylesCode,\n\tCheckboxStyleCode,\n\tRadioStyleCode,\n\tToolbarStyleCode,\n\tButtonSizingCode,\n\tButtonNestingCode,\n\tVerticalButtonCode\n];\n\nexport default PaginationsCode;\n"
  },
  {
    "path": "data/code/ButtonsCode.js",
    "content": "export const RegularButtonCode = `   \n<Button variant=\"primary\" className=\"me-1\">Primary</Button>\n<Button variant=\"secondary\" className=\"me-1\">Secondary</Button>\n<Button variant=\"success\" className=\"me-1\">Success</Button>\n<Button variant=\"warning\" className=\"me-1\">Warning</Button>\n<Button variant=\"danger\" className=\"me-1\">Danger</Button> \n<Button variant=\"info\" className=\"me-1\">Info</Button>\n<Button variant=\"light\" className=\"me-1\">Light</Button> \n<Button variant=\"dark\" className=\"me-1\">Dark</Button>\n<Button variant=\"link\" className=\"me-1\">Link</Button>\n`.trim();\n\nexport const ButtonTagsCode = `   \n<Button href=\"#\" className=\"me-1\">Link</Button>\n<Button type=\"submit\"  className=\"me-1\">Button</Button>\n<Button as=\"input\" type=\"button\" value=\"Input\"  className=\"me-1\"/>\n<Button as=\"input\" type=\"submit\" value=\"Submit\"  className=\"me-1\"/>\n<Button as=\"input\" type=\"reset\" value=\"Reset\"  className=\"me-1\"/>\n`.trim();\n\nexport const OutlineButtonsCode = `   \n<Button variant=\"outline-primary\" className=\"me-1\">Primary</Button>\n<Button variant=\"outline-secondary\" className=\"me-1\">Secondary</Button>\n<Button variant=\"outline-success\" className=\"me-1\">Success</Button>\n<Button variant=\"outline-warning\" className=\"me-1\">Warning</Button>\n<Button variant=\"outline-danger\" className=\"me-1\">Danger</Button>\n<Button variant=\"outline-info\" className=\"me-1\">Info</Button>\n<Button variant=\"outline-light\" className=\"me-1\">Light</Button>\n<Button variant=\"outline-dark\" className=\"me-1\">Dark</Button>\n`.trim();\n\nexport const ButtonSizesCode = `   \n<Button variant=\"primary\" size=\"lg\" className=\"me-1\" >Large button</Button>\n<Button variant=\"primary\" className=\"me-1\">Default button</Button>                          \n<Button variant=\"primary\" size=\"sm\" className=\"me-1\">Small button</Button>\n<Button variant=\"primary\" size=\"xs\" className=\"me-1\">Xtra Small button</Button>\n`.trim();\n\nexport const BlockButtonCode = `   \n<div className=\"d-grid gap-2\">\n    <Button variant=\"primary\">Button</Button>\n    <Button variant=\"primary\">Button</Button>                          \n</div>\n`.trim();\n\nexport const ResponsiveButtonCode = `   \n<div className=\"d-grid gap-2 d-md-block\">\n    <Button variant=\"primary\" className=\"me-1\">Button</Button>\n    <Button variant=\"primary\" className=\"me-1\">Button</Button>                          \n</div> \n`.trim();\n\nexport const BlockButtonWidthCode = `   \n<Button variant=\"primary\">Button</Button>\n<Button variant=\"primary\">Button</Button>  \n`.trim();\n\nexport const ButtonAlignmentCode = `   \n<div className=\"d-grid gap-2 d-md-flex justify-content-md-end\">\n    <Button variant=\"primary\">Button</Button>\n    <Button variant=\"primary\">Button</Button>                          \n</div> \n`.trim();\n\nexport const ButtonIconsCode = `   \n<Button variant=\"primary\">Your Text Goes Here <ShoppingBag size=\"18px\" /></Button> \n`.trim();\n\nexport const ButtonIcons2Code = `   \n<Button variant=\"primary\" className=\"me-1\">+</Button>\n<Button variant=\"primary\"><Spinner animation=\"border\" size=\"sm\"  /></Button> \n`.trim();\n\nexport const ButtonIconsSizeCode = `   \n<Button variant=\"primary\" size=\"lg\" className=\"me-1\">+</Button>\n<Button variant=\"primary\" className=\"me-1\">+</Button>\n<Button variant=\"primary\" size=\"sm\" className=\"me-1\">+</Button>\n`.trim();\n\nexport const ActiveStateCode = `   \n<Button variant=\"primary\" active className=\"me-1\">Primary button</Button>\n<Button variant=\"secondary\" active  className=\"me-1\">Button</Button>\n`.trim();\n\nexport const DisabledStateCode = `   \n<Button variant=\"primary\" disabled className=\"me-1\">Primary button</Button>\n<Button variant=\"secondary\" disabled className=\"me-1\">Button</Button>\n`.trim();\n\nexport const ToggleStatesCode = `   \n<ToggleButtonGroup type=\"checkbox\" className=\"mb-2 me-1\">\n    <ToggleButton id=\"tbg-check-1\" value={1}>Toggle button</ToggleButton>                                \n</ToggleButtonGroup>\n<ToggleButtonGroup type=\"checkbox\" defaultValue={1} className=\"mb-2 me-1\">\n    <ToggleButton id=\"tbg-check-1\" value={1}>Active toggle button</ToggleButton>                                \n</ToggleButtonGroup>\n<ToggleButtonGroup type=\"checkbox\" className=\"mb-2 me-1\" >\n    <ToggleButton id=\"tbg-check-1\" value={1} disabled>Disabled toggle button</ToggleButton>                                \n</ToggleButtonGroup>\n`.trim();\n\nexport const ButtonsCode = [\n\tRegularButtonCode,\n\tButtonTagsCode,\n\tOutlineButtonsCode,\n\tButtonSizesCode,\n\tBlockButtonCode,\n\tResponsiveButtonCode,\n\tBlockButtonWidthCode,\n\tButtonAlignmentCode,\n\tButtonIconsCode,\n\tButtonIcons2Code,\n\tButtonIconsSizeCode,\n\tActiveStateCode,\n\tDisabledStateCode,\n\tToggleStatesCode\n];\n\nexport default ButtonsCode;\n"
  },
  {
    "path": "data/code/CardsCode.js",
    "content": "export const BasicCardCode = `  \n<Card style={{ width: '18rem' }}>\n    <Card.Img variant=\"top\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n    <Card.Body>\n        <Card.Title>Card Title</Card.Title>\n        <Card.Text>\n            Some quick example text to build on the card title and make up the bulk of the card's content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const CardBodyCode = `   \n<Card>\n    <Card.Body>This is some text within a card body.</Card.Body>\n</Card>\n`.trim();\n\nexport const TitlesTextLinksCode = `   \n<Card style={{ width: '18rem' }}>\n    <Card.Body>\n        <Card.Title>Card Title</Card.Title>\n        <Card.Subtitle className=\"mb-2 text-muted\">Card Subtitle</Card.Subtitle>\n        <Card.Text>\n            Some quick example text to build on the card title and make up the bulk of the card's content.\n        </Card.Text>\n        <Card.Link href=\"#\">Card Link</Card.Link>\n        <Card.Link href=\"#\">Another Link</Card.Link>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const ListGroups1Code = `   \n<Card style={{ width: '18rem' }}>\n  <ListGroup variant=\"flush\">\n    <ListGroup.Item>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n  </ListGroup>\n</Card>\n`.trim();\n\nexport const ListGroups2Code = `   \n<Card style={{ width: '18rem' }}>\n  <Card.Header>Featured</Card.Header>\n  <ListGroup variant=\"flush\">\n    <ListGroup.Item>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n  </ListGroup>\n</Card>\n`.trim();\n\nexport const CardImagesCode = `   \n<Card style={{ width: '18rem' }}>\n    <Card.Img variant=\"top\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n    <Card.Body>\n        <Card.Text>\n            Some quick example text to build on the card title and make up the bulk of the card's content.\n        </Card.Text>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const KitchenSinkCode = `   \n<Card style={{ width: '18rem' }}>\n    <Card.Img variant=\"top\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n    <Card.Body>\n        <Card.Title>Card Title</Card.Title>\n        <Card.Text>\n            Some quick example text to build on the card title and make up the bulk of the card's content.\n        </Card.Text>\n    </Card.Body>\n    <ListGroup className=\"list-group-flush\">\n        <ListGroupItem>Cras justo odio</ListGroupItem>\n        <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>\n        <ListGroupItem>Vestibulum at eros</ListGroupItem>\n    </ListGroup>\n    <Card.Body>\n        <Card.Link href=\"#\">Card Link</Card.Link>\n        <Card.Link href=\"#\">Another Link</Card.Link>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const HeaderFooterCode = `   \n<Card>\n    <Card.Header>Featured</Card.Header>\n    <Card.Body>\n        <Card.Title>Special title treatment</Card.Title>\n        <Card.Text>\n            With supporting text below as a natural lead-in to additional content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const HeaderFooterCode2 = `   \n<Card className=\"text-center\">\n    <Card.Header>Featured</Card.Header>\n    <Card.Body>\n        <Card.Title>Special title treatment</Card.Title>\n        <Card.Text>\n            With supporting text below as a natural lead-in to additional content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n    <Card.Footer className=\"text-muted\">2 days ago</Card.Footer>\n</Card>\n`.trim();\n\nexport const TextAlignmentCode = `   \n<Card style={{ width: '18rem' }}>\n    <Card.Body>\n        <Card.Title>Special title treatment</Card.Title>\n        <Card.Text>\n            With supporting text below as a natural lead-in to additional content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n</Card>\n\n<Card style={{ width: '18rem' }} className=\"text-center\">\n    <Card.Body>\n        <Card.Title>Special title treatment</Card.Title>\n        <Card.Text>\n            With supporting text below as a natural lead-in to additional content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n</Card>\n\n<Card style={{ width: '18rem' }} className=\"text-end\">\n    <Card.Body>\n        <Card.Title>Special title treatment</Card.Title>\n        <Card.Text>\n            With supporting text below as a natural lead-in to additional content.\n        </Card.Text>\n        <Button variant=\"primary\">Go somewhere</Button>\n    </Card.Body>\n</Card>\n`.trim();\n\nexport const ImagesTopBottomCode = `   \n<Card>\n    <Card.Img variant=\"top\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n    <Card.Body>\n        <Card.Title>Card title</Card.Title>\n        <Card.Text>\n            This is a wider card with supporting text below as a natural lead-in to\n            additional content. This content is a little bit longer.\n        </Card.Text>\n        <Card.Text>\n            <small className=\"text-muted\">Last updated 3 mins ago</small>\n        </Card.Text>\n    </Card.Body>\n</Card>\n<br />\n<Card>\n    <Card.Body>\n        <Card.Title>Card title</Card.Title>\n        <Card.Text>\n            This is a wider card with supporting text below as a natural lead-in to\n            additional content. This content is a little bit longer.\n        </Card.Text>\n        <Card.Text>\n            <small className=\"text-muted\">Last updated 3 mins ago</small>\n        </Card.Text>\n    </Card.Body>\n    <Card.Img variant=\"bottom\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n</Card>\n`.trim();\n\nexport const ImageOverlaysCode = `   \n<Card className=\"bg-dark text-white\">\n    <Card.Img variant=\"bottom\" src=\"https://fakeimg.pl/640x360/?text=Image Placeholder\" />\n    <Card.ImgOverlay>\n        <Card.Title>Card title</Card.Title>\n        <Card.Text>\n            This is a wider card with supporting text below as a natural lead-in to\n            additional content. This content is a little bit longer.\n        </Card.Text>\n        <Card.Text>Last updated 3 mins ago</Card.Text>\n    </Card.ImgOverlay>\n</Card>\n`.trim();\n\nexport const CardsCode = [\n\tBasicCardCode,\n\tCardBodyCode,\n\tTitlesTextLinksCode,\n\tListGroups1Code,\n\tListGroups2Code,\n\tCardImagesCode,\n\tKitchenSinkCode,\n\tHeaderFooterCode,\n\tHeaderFooterCode2,\n\tTextAlignmentCode,\n\tImagesTopBottomCode,\n\tImageOverlaysCode\n];\n\nexport default CardsCode;\n"
  },
  {
    "path": "data/code/CarouselsCode.js",
    "content": "export const SlidesOnlyCode = `   \n<Carousel controls={false} indicators={false} >\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />                                   \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\"/>                                    \n    </Carousel.Item>\n</Carousel>\n`.trim();\n\nexport const WithControlCode = `   \n<Carousel indicators={false}>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />                                   \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\"/>                                    \n    </Carousel.Item>                               \n</Carousel>\n`.trim();\n\nexport const WithIndicatorsCode = `   \n<Carousel indicators>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />                                   \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\"/>                                    \n    </Carousel.Item>  \n</Carousel>\n`.trim();\n\nexport const WithCaptionCode = `   \nfunction ControlledCarousel() {\n\n    const [index, setIndex] = useState(0);\n\n    const handleSelect = (selectedIndex, e) => {\n      setIndex(selectedIndex);\n    };\n\n    return (        \n        <Carousel activeIndex={index} onSelect={handleSelect}>\n            <Carousel.Item>\n                <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\"/>\n                <Carousel.Caption>\n                    <h3 className=\"text-white\" >First slide label</h3>\n                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>\n                </Carousel.Caption>\n            </Carousel.Item>\n            <Carousel.Item>\n                <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />\n                <Carousel.Caption>\n                    <h3 className=\"text-white\" >Second slide label</h3>\n                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n                </Carousel.Caption>\n            </Carousel.Item>\n            <Carousel.Item>\n                <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\" />\n                <Carousel.Caption>\n                    <h3 className=\"text-white\" >Third slide label</h3>\n                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>\n                </Carousel.Caption>\n            </Carousel.Item>\n        </Carousel>        \n    )\n    \n}\nrender(<ControlledCarousel />);\n`.trim();\n\nexport const CrossfadeCode = `   \n<Carousel fade indicators={false}>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />                                   \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\"/>                                    \n    </Carousel.Item>\n</Carousel>\n`.trim();\n\nexport const IndividualCode = `   \n<Carousel indicators={false}>\n    <Carousel.Item interval={1000}>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item interval={500}>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\" />                                    \n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\" />                                    \n    </Carousel.Item>\n</Carousel>\n`.trim();\n\nexport const DarkVariantCode = `   \n<Carousel variant=\"dark\">\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"First slide\" />\n        <Carousel.Caption>\n        <h5>First slide label</h5>\n        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>\n        </Carousel.Caption>\n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Second slide\"/>\n        <Carousel.Caption>\n        <h5>Second slide label</h5>\n        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n        </Carousel.Caption>\n    </Carousel.Item>\n    <Carousel.Item>\n        <Image className=\"d-block w-100\" src=\"https://fakeimg.pl/1140x350/?text=Image%20Placeholder\" alt=\"Third slide\"/>\n        <Carousel.Caption>\n        <h5>Third slide label</h5>\n        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>\n        </Carousel.Caption>\n    </Carousel.Item>\n</Carousel>\n`.trim();\n\nexport const CarouselsCode = [\n\tSlidesOnlyCode,\n\tWithControlCode,\n\tWithIndicatorsCode,\n\tWithCaptionCode,\n\tCrossfadeCode,\n\tIndividualCode,\n\tDarkVariantCode\n];\n\nexport default CarouselsCode;\n"
  },
  {
    "path": "data/code/CloseCode.js",
    "content": "export const GenericCloseButtonCode = ` \n<CloseButton className=\"btn-close\"/> \n`.trim();\n\nexport const DisabledStateCode = ` \n<CloseButton className=\"btn-close\" disabled />\n`.trim();\n\nexport const WhiteVariantCode = ` \n<div className=\"bg-dark p-3\">\n    <CloseButton className=\"btn-close\" variant=\"white\" />\n    <CloseButton className=\"btn-close\" variant=\"white\" disabled />\n</div>\n`.trim();\n\nexport const CollapsesCode = [\n\tGenericCloseButtonCode,\n\tDisabledStateCode,\n\tWhiteVariantCode\n];\n\nexport default CollapsesCode;\n"
  },
  {
    "path": "data/code/CollapsesCode.js",
    "content": "export const BasicCollapsesCode = ` \nconst Collapses = () => {\n    const [open, setOpen] = useState(false);    \n    return (  \n        <Fragment> \n            <Button\n                onClick={() => setOpen(!open)}\n                aria-controls=\"example-collapse-text\"\n                aria-expanded={open}\n                >\n                Toggle Button\n            </Button>\n            <Collapse in={open}>\n                <div id=\"example-collapse-text\" className=\"pt-3\">\n                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus\n                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer\n                    labore wes anderson cred nesciunt sapiente ea proident.\n                </div>\n            </Collapse>     \n        </Fragment>\n    )\n}\n    `.trim();\n\nexport const FadeCollapses = ` \n\nconst Collapses = () => {    \n    const [openFade, setOpenFade] = useState(false);\n    return (\n        <Fragment>   \n            <Button\n                onClick={() => setOpenFade(!openFade)}\n                aria-controls=\"example-fade-text\"\n                aria-expanded={openFade}\n                >\n                Toggle text\n            </Button>\n            <Fade in={openFade}>\n                <div id=\"example-fade-text\" className=\"pt-4\">\n                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus\n                    terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer\n                    labore wes anderson cred nesciunt sapiente ea proident.\n                </div>\n            </Fade>  \n        </Fragment>\n    )\n}\n`.trim();\n\nexport const CollapsesCode = [BasicCollapsesCode, FadeCollapses];\n\nexport default CollapsesCode;\n"
  },
  {
    "path": "data/code/DropdownsCode.js",
    "content": "export const BasicDropdownCode = `   \n<Dropdown>\n    <Dropdown.Toggle variant=\"secondary\" id=\"dropdown-basic\">\n        Dropdown Button\n    </Dropdown.Toggle>\n    <Dropdown.Menu>\n        <Dropdown.Item href=\"#\">Action</Dropdown.Item>\n        <Dropdown.Item href=\"#\">Another action</Dropdown.Item>\n        <Dropdown.Item href=\"#\">Something else</Dropdown.Item>\n    </Dropdown.Menu>\n</Dropdown> \n`.trim();\n\nexport const SplitDropdownCode = `   \n<Dropdown as={ButtonGroup}>\n    <Button variant=\"secondary\">Split Button</Button>\n    <Dropdown.Toggle split variant=\"secondary\" id=\"dropdown-split-basic\" />\n    <Dropdown.Menu>\n        <Dropdown.Item href=\"#\">Action</Dropdown.Item>\n        <Dropdown.Item href=\"#\">Another action</Dropdown.Item>\n        <Dropdown.Item href=\"#\">Something else</Dropdown.Item>\n    </Dropdown.Menu>\n</Dropdown>\n`.trim();\n\nexport const DropdownVariantCode = `   \n{['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(\n    (variant) => (\n    <DropdownButton\n        as={ButtonGroup}\n        key={variant}\n        id={\\`dropdown-variants-\\${variant}\\`}\n        variant={variant.toLowerCase()}\n        title={variant}\n        className=\"me-1 mb-2 mb-lg-0 \"                                    \n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\"> Something else</Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n    </DropdownButton>  \n    ),\n)}  \n`.trim();\n\nexport const DropdownSizingCode = `   \n{[DropdownButton, SplitButton].map((DropdownType, idx) => (\n    <DropdownType\n        as={ButtonGroup}\n        key={idx}\n        id={\\`dropdown-button-drop-\\${idx}\\`}\n        size=\"lg\"\n        variant=\"secondary\"\n        title={idx===0 ? \"Large button\" : \"Large split button\"}\n        className=\"me-1 mb-2 mb-lg-0 \"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n    </DropdownType>\n))}\n\n{[DropdownButton, SplitButton].map((DropdownType, idx) => (\n    <DropdownType\n        as={ButtonGroup}\n        key={idx}\n        id={\\`dropdown-button-drop-\\${idx}\\`}\n        size=\"sm\"\n        variant=\"secondary\"\n        title={idx===0 ? \"Small button\" : \"Small split button\"}\n        className=\"me-1\"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n    </DropdownType>\n))}\n`.trim();\n\nexport const DirectionsCode = `   \n<div className=\"mb-2\">\n    {['up', 'down', 'left', 'right'].map((direction) => (\n        <DropdownButton\n            as={ButtonGroup}\n            key={direction}\n            id={\\`dropdown-button-drop-\\${direction}\\`}\n            drop={direction}\n            variant=\"secondary\"\n            title={\\` Drop \\${direction} \\`}\n            className=\"me-1 mb-2 mb-lg-0\"\n            >\n            <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n            <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n            <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n            <Dropdown.Divider />\n            <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n        </DropdownButton>\n    ))}\n</div>   \n<div>\n    {['up', 'down', 'left', 'right'].map((direction) => (\n        <SplitButton\n            key={direction}\n            id={\\`dropdown-button-drop-\\${direction}\\`}\n            drop={direction}\n            variant=\"secondary\"\n            title={\\`Drop \\${direction}\\`}\n            className=\"me-1 mb-2 mb-lg-0\"\n            >\n            <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n            <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n            <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n            <Dropdown.Divider />\n            <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n        </SplitButton>\n    ))}\n</div>\n`.trim();\n\nexport const MenuAlignmentCode = `   \n<ButtonGroup aria-label=\"Basic example\">\n    <DropdownButton\n        align=\"start\"\n        title=\"Left aligned dropdown \"\n        id=\"dropdown-menu-align-start\"\n        className=\"me-1 mb-2 mb-lg-0\"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">\n            Another action\n        </Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">\n            Something else here\n        </Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">\n            Separated link\n        </Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup>\n<ButtonGroup aria-label=\"Basic example\">\t\n    <DropdownButton\n        align=\"end\"\n        title=\"Right aligned dropdown \"\n        id=\"dropdown-menu-align-end\"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">\n            Another action\n        </Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">\n            Something else here\n        </Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">\n            Separated link\n        </Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup>\n`.trim();\n\nexport const ResponsiveMenuAlignmentCode1 = `   \n<ButtonGroup aria-label=\"Basic example\">                               \n    <DropdownButton\n        align={ {lg : \"right\"} }\n        title=\"Left-aligned but right aligned when large screen\"\n        id=\"dropdown-menu-align-left\"\n        className=\"me-1\"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup>\n`.trim();\n\nexport const ResponsiveMenuAlignmentCode2 = `   \n<ButtonGroup aria-label=\"Basic example\">                               \n    <DropdownButton\n        align={ {lg : \"left\"} }\n        title=\"Right aligned but left aligned when large screen\"\n        id=\"dropdown-menu-align-right\"\n        className=\"me-1\"\n        >\n        <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n        <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n        <Dropdown.Divider />\n        <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n    </DropdownButton>\n</ButtonGroup>\n`.trim();\n\nexport const MenuContentCode = `   \n<Dropdown.Menu show className=\"position-static\" >\n    <Dropdown.Header>Dropdown header</Dropdown.Header>\n    <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n    <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n</Dropdown.Menu> \n`.trim();\n\nexport const DividersCode = `   \n<Dropdown.Menu show className=\"position-static\">\n    <Dropdown.Item eventKey=\"1\">Action</Dropdown.Item>\n    <Dropdown.Item eventKey=\"2\">Another action</Dropdown.Item>\n    <Dropdown.Item eventKey=\"3\">Something else here</Dropdown.Item>\n    <Dropdown.Divider />\n    <Dropdown.Item eventKey=\"4\">Separated link</Dropdown.Item>\n</Dropdown.Menu> \n`.trim();\n\nexport const FormsCode1 = `   \n<Dropdown.Menu show className=\"position-static\">  \n        <Form className=\"dropdown-form p-4\"> \n            <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n                <Form.Label>Email address</Form.Label>\n                <Form.Control type=\"email\" placeholder=\"Enter email\" />\n                <Form.Text className=\"text-muted\">We'll never share your email with anyone else.</Form.Text>\n            </Form.Group>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n                <Form.Label>Password</Form.Label>\n                <Form.Control type=\"password\" placeholder=\"Password\" />\n            </Form.Group>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicCheckbox\">\n                <Form.Check type=\"checkbox\" label=\"Remember me\" />\n            </Form.Group>\n            <Button variant=\"primary\" type=\"submit\">Sign in</Button>\n        </Form> \n    <Dropdown.Divider />\n    <Dropdown.Item >New around here? Sign up</Dropdown.Item>                          \n    <Dropdown.Item >Forgot password?</Dropdown.Item>\n</Dropdown.Menu> \n`.trim();\n\nexport const FormsCode2 = `   \n<Dropdown.Menu show className=\"position-static\">  \n        <Form className=\"dropdown-form p-4\">  \n            <Form.Group className=\"mb-3\" controlId=\"formBasicEmail\">\n                <Form.Label>Email address</Form.Label>\n                <Form.Control type=\"email\" placeholder=\"Enter email\" />\n                <Form.Text className=\"text-muted\"> We'll never share your email with anyone else. </Form.Text>\n            </Form.Group>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicPassword\">\n                <Form.Label>Password</Form.Label>\n                <Form.Control type=\"password\" placeholder=\"Password\" />\n            </Form.Group>\n            <Form.Group className=\"mb-3\" controlId=\"formBasicCheckbox\">\n                <Form.Check type=\"checkbox\" label=\"Remember me\" />\n            </Form.Group>\n            <Button variant=\"primary\" type=\"submit\">Sign in </Button>\n        </Form> \n</Dropdown.Menu> \n`.trim();\n\nexport const DropdownsCode = [\n\tBasicDropdownCode,\n\tSplitDropdownCode,\n\tDropdownVariantCode,\n\tDropdownSizingCode,\n\tDirectionsCode,\n\tMenuAlignmentCode,\n\tResponsiveMenuAlignmentCode1,\n\tResponsiveMenuAlignmentCode2,\n\tMenuContentCode,\n\tDividersCode,\n\tFormsCode1,\n\tFormsCode2\n];\n\nexport default DropdownsCode;\n"
  },
  {
    "path": "data/code/ListgroupsCode.js",
    "content": "export const BasicListgroupCode = `   \n<ListGroup>\n    <ListGroup.Item>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const ActiveItemCode = `   \n<ListGroup>\n    <ListGroup.Item active>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const DisabledItemsCode = `   \n<ListGroup>\n    <ListGroup.Item disabled>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const LinksButtonsCode = `   \n<ListGroup defaultActiveKey=\"#link1\">\n    <ListGroup.Item action href=\"#link1\" active >Cras justo odio</ListGroup.Item>\n    <ListGroup.Item action href=\"#link2\">Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item action href=\"#link3\">Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item action href=\"#link4\">Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item action href=\"#link5\" disabled>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const ListButtonCode = `   \n<ListGroup defaultActiveKey=\"#link1\">\n    <ListGroup.Item action onClick={alertClicked} active >Cras justo odio</ListGroup.Item>\n    <ListGroup.Item action onClick={alertClicked}>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item action onClick={alertClicked}>Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item action onClick={alertClicked}>Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item action onClick={alertClicked} disabled>Vestibulum at eros</ListGroup.Item>                                \n</ListGroup>\n`.trim();\n\nexport const FlushListgroupCode = `   \n<ListGroup variant=\"flush\">\n    <ListGroup.Item>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Morbi leo risus</ListGroup.Item>\n    <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>\n    <ListGroup.Item>Vestibulum at eros</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const HorizontalListgroupCode = `   \n<ListGroup horizontal>\n    <ListGroup.Item>Cras justo odio</ListGroup.Item>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item>Morbi leo risus</ListGroup.Item>                                \n</ListGroup>\n`.trim();\n\nexport const HorizontalListgroupCode2 = `   \n<ListGroup horizontal>\n    <ListGroup.Item className=\"flex-fill\">Cras justo odio</ListGroup.Item>\n    <ListGroup.Item className=\"flex-fill\">Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item className=\"flex-fill\">Morbi leo risus</ListGroup.Item>                                \n</ListGroup>\n`.trim();\n\nexport const ContextualClassesCode = `   \n<ListGroup>\n    <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>\n    <ListGroup.Item variant=\"primary\">This is a Primary list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"secondary\">This is a Secondary list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"success\">This is a Success list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"danger\">This is a Danger list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"warning\">This is a Warning list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"info\">This is a Info list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"light\">This is a Light list group item</ListGroup.Item>\n    <ListGroup.Item variant=\"dark\">This is a Dark list group item</ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const WithBadgesCode = `   \n<ListGroup>\n    <ListGroup.Item className=\"d-flex justify-content-between\" >Cras justo odio <Badge bg=\"primary\">14</Badge> </ListGroup.Item>\n    <ListGroup.Item className=\"d-flex justify-content-between\" >Dapibus ac facilisis in <Badge bg=\"primary\">2</Badge></ListGroup.Item>\n    <ListGroup.Item className=\"d-flex justify-content-between\" >Morbi leo risus <Badge bg=\"primary\">1</Badge></ListGroup.Item>                                \n</ListGroup>\n`.trim();\n\nexport const CustomContentCode = `   \n<ListGroup defaultActiveKey=\"#link1\" >\n    <ListGroup.Item action href=\"#link1\" active> \n        <div className=\"d-flex w-100 justify-content-between\">\n            <h5 className=\"mb-1\">List group item heading</h5>\n            <small>3 days ago</small>\n        </div>\n        <p className=\"mb-1\">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n        <small>Donec id elit non mi porta.</small>\n    </ListGroup.Item>\n    <ListGroup.Item action href=\"#link2\" > \n        <div className=\"d-flex w-100 justify-content-between\">\n            <h5 className=\"mb-1\">List group item heading</h5>\n            <small>3 days ago</small>\n        </div>\n        <p className=\"mb-1\">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n        <small>Donec id elit non mi porta.</small>\n    </ListGroup.Item>\n    <ListGroup.Item action href=\"#link3\" > \n        <div className=\"d-flex w-100 justify-content-between\">\n            <h5 className=\"mb-1\">List group item heading</h5>\n            <small>3 days ago</small>\n        </div>\n        <p className=\"mb-1\">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>\n        <small>Donec id elit non mi porta.</small>\n    </ListGroup.Item>                                \n</ListGroup>\n`.trim();\n\nexport const WithIconCode = `   \n<ListGroup variant=\"flush\">\n    <ListGroup.Item>\n        <PlayCircle size=\"15px\" className=\"align-middle me-2 text-primary\"/>\n        12 hours video\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <Award size=\"15px\" className=\"align-middle me-2 text-success\"/>\n        Certificate\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <Calendar size=\"15px\" className=\"align-middle me-2 text-info\"/>\n        12 Article\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <Video size=\"15px\" className=\"align-middle me-2 text-secondary\"/>\n        Watch Offline\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <Clock size=\"15px\" className=\"align-middle me-2 text-warning\"/>\n        Lifetime access\n    </ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const GroupWithIconCode = ` \n// Below import is required to use DotBadge custom component\n// import DotBadge from './DotBadge'; \n\n<ListGroup variant=\"flush\">\n    <ListGroup.Item>\n        <span>Post ID</span>\n        <h5>8693637308</h5>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>Status</span>\n        <h5><DotBadge bg=\"success\" >Published (unsaved changes)</DotBadge></h5>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>Created by</span>\n        <div className=\"d-flex mt-2\">\n            <Image src=\"/images/avatar/avatar-1.jpg\" alt=\"\" className=\"avatar-sm rounded-circle\"/>\n            <div className=\"ms-2\">\n                <h5 className=\"mb-n1\">Geeks Courses</h5>\n                <small>Admin</small>\n            </div>\n        </div>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>Created at</span>\n        <h5>Jul 30, 2:21 PM</h5>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>First published at</span>\n        <h5>Jul 30, 2:21 PM</h5>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>Last update</span>\n        <h5>Aug 31, 12:21 PM</h5>\n    </ListGroup.Item>\n    <ListGroup.Item>\n        <span>Last Published</span>\n        <h5>Aug 31, 12:21 PM</h5>\n    </ListGroup.Item>\n</ListGroup>\n`.trim();\n\nexport const ListgroupsCode = [\n\tBasicListgroupCode,\n\tActiveItemCode,\n\tDisabledItemsCode,\n\tLinksButtonsCode,\n\tListButtonCode,\n\tFlushListgroupCode,\n\tHorizontalListgroupCode,\n\tHorizontalListgroupCode2,\n\tContextualClassesCode,\n\tWithBadgesCode,\n\tCustomContentCode,\n\tWithIconCode,\n\tGroupWithIconCode\n];\n\nexport default ListgroupsCode;\n"
  },
  {
    "path": "data/code/ModalsCode.js",
    "content": "export const SampleExamplesCode = `   \n<div className=\"modal show\" style={{ display: 'block', position: 'initial' }}>\n  <Modal.Dialog>\n    <Modal.Header closeButton>\n      <Modal.Title>Modal title</Modal.Title>\n    </Modal.Header>\n    <Modal.Body>\n      <p>Modal body text goes here.</p>\n    </Modal.Body>\n    <Modal.Footer>\n      <Button variant=\"secondary\">Close</Button>\n      <Button variant=\"primary\">Save changes</Button>\n    </Modal.Footer>\n  </Modal.Dialog>\n</div>\n`.trim();\n\nexport const LiveDemoCode = ` \nconst Modals = () => {   \n    const handleClose = () => setShow(false);\n    const handleShow = () => setShow(true);\n    return (\n        <Fragment> \n            <Button variant=\"primary\" onClick={handleShow}>\n                Launch demo modal\n            </Button>\n            <Modal show={show} onHide={handleClose}>\n                <Modal.Header closeButton>\n                    <Modal.Title>Modal title</Modal.Title>\n                </Modal.Header>\n                <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>\n                <Modal.Footer>\n                    <Button variant=\"secondary\" onClick={handleClose}>\n                        Close\n                    </Button>\n                    <Button variant=\"primary\" onClick={handleClose}>\n                        Save Changes\n                    </Button>\n                </Modal.Footer>\n            </Modal>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const LongContentCode = ` \nconst Modals = () => {   \n    const handleClose = () => setShow(false);\n    const handleShow = () => setShow(true);\n    const longContent =\\`<p>Cras mattis consectetur purus sit amet fermentum.\n    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum.   Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl  consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\`\n    \n    return (\n        <Fragment> \n            <Button variant=\"primary\" onClick={() => setScrollShow(true)}>\n                Launch demo modal \n            </Button>\n            <Modal show={scrollShow} onHide={() => setScrollShow(false)}>\n                <Modal.Header closeButton>\n                    <Modal.Title>Modal title</Modal.Title>\n                </Modal.Header>\n                <Modal.Body dangerouslySetInnerHTML={{__html: longContent}}></Modal.Body>\n                <Modal.Footer>\n                    <Button variant=\"secondary\" onClick={() => setScrollShow(false)} >\n                        Close\n                    </Button>\n                    <Button variant=\"primary\" onClick={() => setScrollShow(false)}>\n                        Save Changes\n                    </Button>\n                </Modal.Footer>\n            </Modal>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const ScrollableModalCode = `   \nconst Modals = () => {      \n     \n    const [scrollShow, setScrollShow] = useState(false);\n    const longContent =\\`<p>Cras mattis consectetur purus sit amet fermentum.\n    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum.   Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl  consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas\n    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue\n    laoreet rutrum faucibus dolor auctor.</p>\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl\n    consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\`\n\n    return (\n        <Fragment> \n            <Button variant=\"primary\" onClick={() => setScrollShow(true)}>\n                Launch demo modal \n            </Button>\n            <Modal className=\"modal-dialog-scrollable\" show={scrollShow} onHide={() => setScrollShow(false)}  >\n                <Modal.Header closeButton>\n                    <Modal.Title>Modal title</Modal.Title>\n                </Modal.Header>\n                <Modal.Body  style={{height:'500px'}} dangerouslySetInnerHTML={{__html: longContent}}></Modal.Body>\n                <Modal.Footer >\n                    <Button variant=\"secondary\" onClick={() => setScrollShow(false)} >\n                        Close\n                    </Button>\n                    <Button variant=\"primary\" onClick={() => setScrollShow(false)}>\n                        Save Changes\n                    </Button>\n                </Modal.Footer>\n            </Modal>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const VerticallyCenteredCode = `   \nconst Modals = () => {      \n    function MyVerticallyCenteredModal(props) {\n        return (\n          <Modal\n            {...props}            \n            aria-labelledby=\"contained-modal-title-vcenter\"\n            centered\n          >\n            <Modal.Header closeButton>\n              <Modal.Title id=\"contained-modal-title-vcenter\">\n                Modal title\n              </Modal.Title>\n            </Modal.Header>\n            <Modal.Body>\n                Cras mattis consectetur purus sit amet fermentum. Cras justo odio,\n                dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac\n                consectetur ac, vestibulum at eros.\n            </Modal.Body>\n            <Modal.Footer>\n              <Button onClick={props.onHide}>Close</Button>\n            </Modal.Footer>\n          </Modal>\n        );\n    }\n\n    const [modalShow, setModalShow] = React.useState(false);\n\n    return (\n        <Fragment> \n            <Button variant=\"primary\" onClick={() => setModalShow(true)}>\n                Launch demo modal \n            </Button>\n            <MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} />\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const TooltipsPopoversCode = `  \nconst Modals = () => {          \n    const [popoverTipShow ,  setpopoverTipShow] = useState(false);\n    return (\n        <Fragment> \n            <Button variant=\"primary\" onClick={() => setpopoverTipShow(true)}>\n            Launch demo modal \n            </Button>\n            <Modal show={popoverTipShow} onHide={() => setpopoverTipShow(false)}>\n                <Modal.Header closeButton>\n                    <Modal.Title>Modal title</Modal.Title>\n                </Modal.Header>\n                <Modal.Body>\n                    <h5>Popover in a modal</h5>\n                    <p>This{' '}\n                        <OverlayTrigger trigger=\"click\" placement=\"right\" overlay={(\n                                <Popover>\n                                    <Popover.Header as=\"h3\">Popover title</Popover.Header>\n                                    <Popover.Body>\n                                        Popover body content is set in this attribute.\n                                    </Popover.Body>\n                                </Popover>\n                            )}>\n                            <Button variant=\"secondary\">button</Button>\n                        </OverlayTrigger> triggers a popover on click.\n                    </p>\n                    <hr/>\n                    <h5>Tooltips in a modal</h5>\n                    <div>\n                        <OverlayTrigger trigger={['hover', 'focus']} \n                            overlay={\n                            <Tooltip>Tooltip</Tooltip>\n                            }>\n                            <Link href=\"#\" variant=\"secondary\" size=\"sm\" >This Link</Link>\n                        </OverlayTrigger> and \n                        <OverlayTrigger trigger={['hover', 'focus']} \n                            overlay={\n                            <Tooltip>Tooltip</Tooltip>\n                            }>\n                            <Link href=\"#\" variant=\"secondary\" size=\"sm\" className=\"m-1\">That Link</Link>\n                        </OverlayTrigger> have tooltips on hover.\n                    </div>\n                </Modal.Body>\n                <Modal.Footer>\n                    <Button variant=\"secondary\" onClick={() => setpopoverTipShow(false)} >\n                        Close\n                    </Button>\n                    <Button variant=\"primary\" onClick={() => setpopoverTipShow(false)}>\n                        Save Changes\n                    </Button>\n                </Modal.Footer>\n            </Modal>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const OptionalSizesCode = ` \nconst Modals = () => {          \n\n    const [smShow, setSmShow] = useState(false);\n    const [mdShow, setMdShow] = useState(false);\n    const [lgShow, setLgShow] = useState(false);\n\n    return (\n        <Fragment> \n            <Button onClick={() => setLgShow(true)}>Extra large modal</Button>{' '}\n            <Button onClick={() => setMdShow(true)}>Large modal</Button>{' '}\n            <Button onClick={() => setSmShow(true)}>Small modal</Button>\n            <Modal size=\"sm\" show={smShow} onHide={() => setSmShow(false)} aria-labelledby=\"example-modal-sizes-title-sm\" >\n                <Modal.Header closeButton>\n                    <Modal.Title id=\"example-modal-sizes-title-sm\">\n                        Small modal\n                    </Modal.Title>\n                </Modal.Header>\n                <Modal.Body>...</Modal.Body>\n            </Modal>\n            <Modal size=\"lg\" show={lgShow} onHide={() => setLgShow(false)} aria-labelledby=\"example-modal-sizes-title-lg\" >\n                <Modal.Header closeButton>\n                    <Modal.Title id=\"example-modal-sizes-title-lg\">\n                        Extra large modal\n                    </Modal.Title>\n                </Modal.Header>\n                <Modal.Body>...</Modal.Body>\n            </Modal>\n            <Modal show={mdShow} onHide={() => setMdShow(false)} aria-labelledby=\"example-modal-sizes-title-lg\" >\n                <Modal.Header closeButton>\n                    <Modal.Title id=\"example-modal-sizes-title-lg\">\n                        Large modal\n                    </Modal.Title>\n                </Modal.Header>\n                <Modal.Body>...</Modal.Body>\n            </Modal>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const ModalsCode = [\n\tSampleExamplesCode,\n\tLiveDemoCode,\n\tLongContentCode,\n\tScrollableModalCode,\n\tVerticallyCenteredCode,\n\tTooltipsPopoversCode,\n\tOptionalSizesCode\n];\n\nexport default ModalsCode;\n"
  },
  {
    "path": "data/code/NavbarsCode.js",
    "content": "export const DefaultNavbar = `   \n<Navbar expand=\"lg\">                             \n    <Navbar.Brand href=\"#home\">\n        <Image src=\"/images/brand/logo/logo-primary.svg\" alt=\"\" loading=\"lazy\"/> \n    </Navbar.Brand>\n    <Navbar.Toggle aria-controls=\"basic-navbar-nav\" />\n    <Navbar.Collapse id=\"basic-navbar-nav\">\n    <Nav className=\"me-auto\">\n        <Nav.Link href=\"#home\">Home</Nav.Link>\n        <Nav.Link href=\"#link\">Link</Nav.Link>\n            <NavDropdown title=\"Dropdown\" id=\"basic-nav-dropdown\">\n            <NavDropdown.Item href=\"#action/3.1\">Action</NavDropdown.Item>\n            <NavDropdown.Item href=\"#action/3.2\">Another action</NavDropdown.Item>\n            <NavDropdown.Item href=\"#action/3.3\">Something</NavDropdown.Item>\n            <NavDropdown.Divider />\n            <NavDropdown.Item href=\"#action/3.4\">Separated link</NavDropdown.Item>\n        </NavDropdown>\n        <Nav.Link href=\"#link\" disabled>Disabled</Nav.Link>\n    </Nav>\n    </Navbar.Collapse>\n</Navbar>\n    `.trim();\n\nexport const BrandNavbar = `   \n<Navbar>\n    <Navbar.Brand href=\"#home\">\n        <Image src=\"/images/brand/logo/brand-logo.png\" width=\"30\" height=\"30\" alt=\"\" loading=\"lazy\"/>                                        \n    </Navbar.Brand>\n</Navbar> \n    `.trim();\n\nexport const ColorSchemesCode = `   \n<Navbar bg=\"dark\" variant=\"dark\">\n    <Container>\n        <Navbar.Brand href=\"#home\">\n            <Image src=\"/images/brand/logo/logo.svg\" alt=\"\" loading=\"lazy\" />\n        </Navbar.Brand>\n        <Nav className=\"me-auto\">\n            <Nav.Link href=\"#home\">Home</Nav.Link>\n            <Nav.Link href=\"#features\">Features</Nav.Link>\n            <Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n        </Nav>\n    </Container>\n</Navbar>\n<br />\n<Navbar bg=\"primary\" variant=\"dark\">\n    <Container>\n        <Navbar.Brand href=\"#home\"> <Image src=\"/images/brand/logo/logo.svg\" alt=\"\" loading=\"lazy\" /></Navbar.Brand>\n        <Nav className=\"me-auto\">\n            <Nav.Link href=\"#home\">Home</Nav.Link>\n            <Nav.Link href=\"#features\">Features</Nav.Link>\n            <Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n        </Nav>\n    </Container>\n</Navbar>\n<br />\n<Navbar bg=\"light\" variant=\"light\">\n    <Container>\n        <Navbar.Brand href=\"#home\"> <Image src=\"/images/brand/logo/logo.svg\" alt=\"\" loading=\"lazy\" /></Navbar.Brand>\n        <Nav className=\"me-auto\">\n            <Nav.Link href=\"#home\">Home</Nav.Link>\n            <Nav.Link href=\"#features\">Features</Nav.Link>\n            <Nav.Link href=\"#pricing\">Pricing</Nav.Link>\n        </Nav>\n    </Container>\n</Navbar>\n`.trim();\nexport const NavbarsCode = [DefaultNavbar, BrandNavbar, ColorSchemesCode];\n\nexport default NavbarsCode;\n"
  },
  {
    "path": "data/code/NavsCode.js",
    "content": "export const MenuNavCode = `   \n<Nav defaultActiveKey=\"/#\" as=\"ul\">\n    <Nav.Item as=\"li\">\n        <Nav.Link href=\"/#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav>\n`.trim();\n\nexport const MenuNavFlexCode = `   \n<Nav>\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link href=\"#\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link href=\"#\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const AlignmentCenterCode = `   \n<Nav className=\"justify-content-center\" defaultActiveKey=\"/#\" as=\"ul\">\n    <Nav.Item as=\"li\">\n        <Nav.Link href=\"/#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav>\n`.trim();\n\nexport const AlignmentRightCode = `   \n<Nav className=\"justify-content-end\" defaultActiveKey=\"/#\" as=\"ul\">\n    <Nav.Item as=\"li\">\n        <Nav.Link href=\"/#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const VerticalFlexCode = `   \n<Nav defaultActiveKey=\"/#\" className=\"flex-column\" as=\"ul\">\n    <Nav.Item as=\"li\">\n        <Nav.Link href=\"/#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n    </Nav.Item>                                \n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n    </Nav.Item>                                \n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const VerticalULLICode = `   \n<Nav defaultActiveKey=\"/#\" className=\"flex-column\">\n    <Nav.Link href=\"/#\">Active</Nav.Link>\n    <Nav.Link eventKey=\"link-1\">Link</Nav.Link>\n    <Nav.Link eventKey=\"link-2\">Link</Nav.Link>\n    <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n</Nav>\n`.trim();\n\nexport const TabsNavCode = `   \n<Nav variant=\"tabs\" defaultActiveKey=\"#\">\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-1\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav>  \n`.trim();\n\nexport const PillsNavsCode = `   \n<Nav variant=\"pills\" defaultActiveKey=\"#\">\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-1\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav>  \n`.trim();\n\nexport const FillPillsULLICode = `   \n<Nav fill variant=\"pills\"  defaultActiveKey=\"#\" as=\"ul\">\n    <Nav.Item as=\"li\">\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-1\">Much longer nav link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item as=\"li\">\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const FillPillsLinkCode = `   \n<Nav fill variant=\"pills\" defaultActiveKey=\"#\">\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-1\">Much longer nav link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const FillPillsJustifyCode = `   \n<Nav justify variant=\"pills\" defaultActiveKey=\"#\">\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-1\">Much longer nav link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav> \n`.trim();\n\nexport const NavsFlexUtilitiesCode = `   \n<Nav fill variant=\"pills\" defaultActiveKey=\"#\" className=\"flex-column flex-sm-row\">\n    <Nav.Item>\n        <Nav.Link href=\"#\">Active</Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-1\">Much longer nav link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"link-2\">Link </Nav.Link>\n    </Nav.Item>\n    <Nav.Item>\n        <Nav.Link eventKey=\"disabled\" disabled>Disabled</Nav.Link>\n    </Nav.Item>\n</Nav>\n`.trim();\n\nexport const NavsTabsCode = `   \n<Tabs defaultActiveKey=\"home\" id=\"uncontrolled-tab-example\" className=\"mb-3\">\n    <Tab eventKey=\"home\" title=\"Home\">\n        <strong>Home Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n    <Tab eventKey=\"profile\" title=\"Profile\">\n        <strong>Profile Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n    <Tab eventKey=\"contact\" title=\"Contact\">\n        <strong>Contact Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n</Tabs> \n`.trim();\n\nexport const NavsTabsPillsCode = `  \n<Tabs  variant=\"pills\" defaultActiveKey=\"home\" id=\"uncontrolled-tab-example\" className=\"mb-3\">\n    <Tab eventKey=\"home\" title=\"Home\">\n        <strong>Home Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n    <Tab eventKey=\"profile\" title=\"Profile\">\n        <strong>Profile Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n    <Tab eventKey=\"contact\" title=\"Contact\">\n        <strong>Contact Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n        Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n        veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n        cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n    </Tab>\n</Tabs>\n`.trim();\n\nexport const VerticalPillsCode = `  \n<Tab.Container id=\"left-tabs-example\" defaultActiveKey=\"home\">\n    <Row>\n        <Col sm={3}>\n            <Nav variant=\"pills\" className=\"flex-column\">\n                <Nav.Item>\n                    <Nav.Link eventKey=\"home\">Home</Nav.Link>\n                </Nav.Item>\n                <Nav.Item>\n                    <Nav.Link eventKey=\"profile\">Profile</Nav.Link>\n                </Nav.Item>\n                <Nav.Item>\n                    <Nav.Link eventKey=\"messages\">Messages</Nav.Link>\n                </Nav.Item>\n                <Nav.Item>\n                    <Nav.Link eventKey=\"settings\">Settings</Nav.Link>\n                </Nav.Item>\n            </Nav>\n        </Col>\n        <Col sm={9}>\n            <Tab.Content>\n                <Tab.Pane eventKey=\"home\">\n                    <strong>Home Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n                    Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n                    veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n                    cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n                </Tab.Pane>\n                <Tab.Pane eventKey=\"profile\">\n                    <strong>Profile Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n                    Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n                    veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n                    cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n                </Tab.Pane>\n                <Tab.Pane eventKey=\"messages\">\n                    <strong>Messages Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n                    Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n                    veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n                    cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n                </Tab.Pane>\n                <Tab.Pane eventKey=\"settings\">\n                    <strong>Settings Tab</strong> - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. \n                    Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex \n                    veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip \n                    cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.\n                </Tab.Pane>\n            </Tab.Content>\n        </Col>\n    </Row>\n</Tab.Container>\n`.trim();\n\nexport const NavsCode = [\n\tMenuNavCode,\n\tMenuNavFlexCode,\n\tAlignmentCenterCode,\n\tAlignmentRightCode,\n\tVerticalFlexCode,\n\tVerticalULLICode,\n\tTabsNavCode,\n\tPillsNavsCode,\n\tFillPillsULLICode,\n\tFillPillsLinkCode,\n\tFillPillsJustifyCode,\n\tNavsFlexUtilitiesCode,\n\tNavsTabsCode,\n\tNavsTabsPillsCode,\n\tVerticalPillsCode\n];\n\nexport default NavsCode;\n"
  },
  {
    "path": "data/code/OffcanvasCode.js",
    "content": "export const OffcanvasBasicCode = `\nconst BSOffCanvas = () => {\n    const [show, setShow] = useState(false);\n  \n    const handleClose = () => setShow(false);\n    const handleShow = () => setShow(true);\n  \n    return (\n        <Fragment>\n            <Button variant=\"primary\" onClick={handleShow}>Launch</Button>  \n            <Offcanvas show={show} onHide={handleClose}>\n                <Offcanvas.Header closeButton>\n                    <Offcanvas.Title>Offcanvas</Offcanvas.Title>\n                </Offcanvas.Header>\n                <Offcanvas.Body>\n                    Some text as placeholder. In real life you can have the elements you\n                    have chosen. Like, text, images, lists, etc.\n                </Offcanvas.Body>\n            </Offcanvas>\n      </Fragment>\n    );\n}\nexport default BSOffCanvas;\n`.trim();\n\nexport const OffCanvasPlacementCode = `\nconst BSOffCanvas = () => {\n     \n    function OffCanvasPlacement({ name, ...props }) {\n        const [show, setShow] = useState(false);\n    \n        const handleClose = () => setShow(false);\n        const handleShow = () => setShow(true);\n    \n        return (\n          <>\n            <Button variant=\"primary\" onClick={handleShow} className=\"me-2 mb-2 mb-lg-0\">\n              {name}\n            </Button>\n            <Offcanvas show={show} onHide={handleClose} {...props}>\n              <Offcanvas.Header closeButton>\n                <Offcanvas.Title>Offcanvas</Offcanvas.Title>\n              </Offcanvas.Header>\n              <Offcanvas.Body>\n                Some text as placeholder. In real life you can have the elements you\n                have chosen. Like, text, images, lists, etc.\n              </Offcanvas.Body>\n            </Offcanvas>\n          </>\n        );\n    }\n\n    return (\n        <Fragment>\n            {['start', 'end', 'top', 'bottom'].map((placement, idx) => (\n                <OffCanvasPlacement key={idx} placement={placement} name={placement} />\n            ))}\n        </Fragment>\n    );\n}\nexport default BSOffCanvas;\n`.trim();\n\nexport const OffCanvasBackdropCode = `\nconst BSOffCanvas = () => {\n            \n    const options = [\n        {\n          name: 'Enable backdrop (default)',\n          scroll: false,\n          backdrop: true,\n        },\n        {\n          name: 'Disable backdrop',\n          scroll: false,\n          backdrop: false,\n        },\n        {\n          name: 'Enable body scrolling',\n          scroll: true,\n          backdrop: false,\n        },\n        {\n          name: 'Enable both scrolling & backdrop',\n          scroll: true,\n          backdrop: true,\n        },\n    ];\n    \n    function OffCanvasBackdrop({ name, ...props }) {\n        const [show, setShow] = useState(false);\n    \n        const handleClose = () => setShow(false);\n        const toggleShow = () => setShow((s) => !s);\n    \n        return (\n          <>\n            <Button variant=\"primary\" onClick={toggleShow} className=\"me-2 mb-2 mb-lg-0\">\n              {name}\n            </Button>\n            <Offcanvas show={show} onHide={handleClose} {...props}>\n              <Offcanvas.Header closeButton>\n                <Offcanvas.Title>Offcanvas</Offcanvas.Title>\n              </Offcanvas.Header>\n              <Offcanvas.Body>\n                Some text as placeholder. In real life you can have the elements you\n                have chosen. Like, text, images, lists, etc.\n              </Offcanvas.Body>\n            </Offcanvas>\n          </>\n        );\n    }\n\n    return (\n        <Fragment>\n            {options.map((props, idx) => (\n                <OffCanvasBackdrop key={idx} {...props} />\n            ))}\n        </Fragment>\n    );\n}\nexport default BSOffCanvas;\n`.trim();\n\nexport const OffcanvasCode = [\n\tOffcanvasBasicCode,\n\tOffCanvasPlacementCode,\n\tOffCanvasBackdropCode\n];\n\nexport default OffcanvasCode;\n"
  },
  {
    "path": "data/code/OverlaysCode.js",
    "content": "export const OverlayBasicCode = `\nconst Overlays = () => {\n    const [show, setShow] = useState(false);\n    const target = useRef(null);\n  \n    return (\n        <Fragment>\n            <Button variant=\"primary\" ref={target} onClick={() => setShow(!show)}>\n                Click me to see\n            </Button>\n            <Overlay target={target.current} show={show} placement=\"right\">\n                {({ placement, arrowProps, show: _show, popper, ...props }) => (\n                    <div\n                        {...props}\n                        style={{\n                            backgroundColor: 'rgba(117, 79, 254, 0.50)',\n                            padding: '2px 10px',\n                            color: 'white',\n                            borderRadius: 3,\n                            ...props.style,\n                        }}\n                    >\n                        Simple tooltip\n                    </div>\n                )}\n            </Overlay>\n      </Fragment>\n    );\n}\nexport default Overlays;\n`.trim();\n\nexport const OverlayTriggerCode = `\n<OverlayTrigger\n    placement=\"right\"\n    delay={{ show: 250, hide: 400 }}\n    overlay={(\n        <Tooltip id=\"button-tooltip\">\n            Simple tooltip\n        </Tooltip>\n        )}\n    >\n    <Button variant=\"primary\">Hover me to see</Button>\n</OverlayTrigger>\n`.trim();\n\nexport const TriggerBehaviorCode = `\nconst Overlays = () => {\n    return (\n        <Fragment>\n            <OverlayTrigger\n                placement=\"bottom\"\n                overlay={<Tooltip id=\"button-tooltip-2\">Check out this avatar</Tooltip>}\n                >\n                {({ ref, ...triggerHandler }) => (\n                <Button\n                    variant=\"light\"\n                    {...triggerHandler}\n                    className=\"d-inline-flex align-items-center\"                                            >\n                    <Image\n                        ref={ref}\n                        roundedCircle\n                        src=\"https://i.pravatar.cc/30?img=3\"\n                        width={30}\n                    />\n                    <span className=\"ms-1\">Hover to see</span>\n                </Button>\n                )}\n            </OverlayTrigger>\n        </Fragment>\n    );\n}\nexport default Overlays;\n`.trim();\n\nexport const OffcanvasCode = [\n\tOverlayBasicCode,\n\tOverlayTriggerCode,\n\tTriggerBehaviorCode\n];\n\nexport default OffcanvasCode;\n"
  },
  {
    "path": "data/code/PaginationsCode.js",
    "content": "export const DefaultPaginationCode = `   \n<Pagination>\n    <Pagination.Prev>Previous</Pagination.Prev> \n    <Pagination.Item>{1}</Pagination.Item>\n    <Pagination.Item>{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>      \n    <Pagination.Next>Next</Pagination.Next>\n</Pagination>\n`.trim();\n\nexport const PaginationWithIconsCode = `   \n<Pagination>\n    <Pagination.First><ChevronsLeft size=\"18px\" /></Pagination.First> \n    <Pagination.Prev><ChevronLeft size=\"18px\" /></Pagination.Prev> \n    <Pagination.Item>{1}</Pagination.Item>\n    <Pagination.Item>{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>      \n    <Pagination.Next><ChevronRight size=\"18px\"  /></Pagination.Next>\n    <Pagination.Last><ChevronsRight size=\"18px\" /></Pagination.Last> \n</Pagination>\n`.trim();\n\nexport const DisabledActiveCode = `   \n<Pagination>\n    <Pagination.Prev disabled>Previous</Pagination.Prev> \n    <Pagination.Item>{1}</Pagination.Item>\n    <Pagination.Item active>{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>      \n    <Pagination.Next>Next</Pagination.Next>\n</Pagination>\n`.trim();\n\nexport const PaginationSizingCode = `   \n<Pagination size=\"lg\">                                \n    <Pagination.Item active>{1}</Pagination.Item>\n    <Pagination.Item >{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>                                      \n</Pagination>\n`.trim();\n\nexport const PaginationSizingSmallCode = `   \n<Pagination size=\"sm\">                                \n    <Pagination.Item active>{1}</Pagination.Item>\n    <Pagination.Item >{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>                                      \n</Pagination>\n`.trim();\n\nexport const AlignmentCode = `   \n<Pagination className=\"justify-content-center\">\n    <Pagination.Prev disabled>Previous</Pagination.Prev> \n    <Pagination.Item>{1}</Pagination.Item>\n    <Pagination.Item>{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>      \n    <Pagination.Next>Next</Pagination.Next>\n</Pagination>\n`.trim();\n\nexport const JustifyContentEndCode = `   \n<Pagination className=\"justify-content-end\">\n    <Pagination.Prev disabled>Previous</Pagination.Prev> \n    <Pagination.Item>{1}</Pagination.Item>\n    <Pagination.Item>{2}</Pagination.Item>                                \n    <Pagination.Item>{3}</Pagination.Item>      \n    <Pagination.Next>Next</Pagination.Next>\n</Pagination>\n`.trim();\n\nexport const PaginationsCode = [\n\tDefaultPaginationCode,\n\tPaginationWithIconsCode,\n\tDisabledActiveCode,\n\tPaginationSizingCode,\n\tPaginationSizingSmallCode,\n\tAlignmentCode,\n\tJustifyContentEndCode\n];\n\nexport default PaginationsCode;\n"
  },
  {
    "path": "data/code/PopoversCode.js",
    "content": "export const copyAction = (event) => {\n\tevent.target.innerHTML = 'Copied';\n\tsetTimeout(() => {\n\t\tevent.target.innerHTML = 'Copy';\n\t}, 3000);\n};\n\nexport const DefaultPopoverCode = `   \n<OverlayTrigger trigger=\"click\" placement=\"right\" overlay={\n    <Popover id=\"popover-basic\">\n        <Popover.Header as=\"h3\">Popover title</Popover.Header>\n        <Popover.Body>\n            And here's some amazing content. It's very engaging. Right?\n        </Popover.Body>\n    </Popover>\n    }>\n    <Button variant=\"danger\">Click to toggle popover</Button>\n</OverlayTrigger>\n`.trim();\n\nexport const FourDirectionsCode = `   \n{['top', 'right', 'bottom', 'left'].map((placement) => (\n    <OverlayTrigger\n        trigger=\"click\"\n        key={placement}\n        placement={placement}\n        overlay={\n            <Popover id={\\`popover-positioned-\\${placement}\\`}>\n                <Popover.Header as=\"h3\">{\\`Popover \\${placement}\\`}</Popover.Header>\n                <Popover.Body>\n                    <strong>Holy guacamole!</strong> Check this info.\n                </Popover.Body>\n            </Popover>\n        }\n    >\n        <Button variant=\"secondary\" className=\"me-2 mb-2 mb-lg-0\">Popover on {placement}</Button>\n    </OverlayTrigger>\n))}\n`.trim();\n\nexport const DismissableCode = `   \n<OverlayTrigger trigger=\"focus\" placement=\"right\" overlay={\n    <Popover id=\"popover-basic\">\n        <Popover.Header as=\"h3\">Popover title</Popover.Header>\n        <Popover.Body>\n            And here's some amazing content. It's very engaging. Right?\n        </Popover.Body>\n    </Popover>\n}>\n    <Button variant=\"danger\">Dismissible popover</Button>\n</OverlayTrigger>\n`.trim();\n\nexport const PopoversCode = [\n\tDefaultPopoverCode,\n\tFourDirectionsCode,\n\tDismissableCode\n];\n\nexport default PopoversCode;\n"
  },
  {
    "path": "data/code/ProgressCode.js",
    "content": "export const DefaultProgressCode = `   \n<ProgressBar now={0} className=\"mb-2\" />\n<ProgressBar now={25} className=\"mb-2\" />\n<ProgressBar now={50} className=\"mb-2\" />\n<ProgressBar now={75} className=\"mb-2\" />\n<ProgressBar now={100} className=\"mb-2\" />\n`.trim();\n\nexport const ProgressLabelsCode = `   \n<ProgressBar now={25} label={\\`\\${25}%\\`} />\n`.trim();\n\nexport const ProgressHeightCode = `   \n<ProgressBar now={25} className=\"mb-2\" style={ { height : '1px'}}  />\n<ProgressBar now={25} className=\"mb-2\" style={ { height : '20px'}}  />\n`.trim();\n\nexport const ProgressBackgroundsCode = `   \n<ProgressBar variant=\"success\" now={25} className=\"mb-2\" />\n<ProgressBar variant=\"info\" now={50} className=\"mb-2\" />\n<ProgressBar variant=\"warning\" now={75} className=\"mb-2\" />\n<ProgressBar variant=\"danger\" now={100} className=\"mb-2\" />\n`.trim();\n\nexport const MultipleBarsCode = `   \n<ProgressBar variant=\"primary\" now={15} key={1} className=\"mb-2\" />\n<ProgressBar variant=\"success\" now={30} key={2} className=\"mb-2\" />\n<ProgressBar variant=\"info\" now={20} key={3} className=\"mb-2\" />\n`.trim();\n\nexport const StripedCode = `   \n<ProgressBar striped variant=\"primary\" now={10} className=\"mb-2\" />\n<ProgressBar striped variant=\"success\" now={25} className=\"mb-2\" />\n<ProgressBar striped variant=\"info\" now={50} className=\"mb-2\" />\n<ProgressBar striped variant=\"warning\" now={75} className=\"mb-2\" />\n<ProgressBar striped variant=\"danger\" now={100} className=\"mb-2\" />\n`.trim();\n\nexport const AnimatedCode = `   \n<ProgressBar animated now={75} />\n`.trim();\n\nexport const ProgressCode = [\n\tDefaultProgressCode,\n\tProgressLabelsCode,\n\tProgressHeightCode,\n\tProgressBackgroundsCode,\n\tMultipleBarsCode,\n\tStripedCode,\n\tAnimatedCode\n];\n\nexport default ProgressCode;\n"
  },
  {
    "path": "data/code/SpinnersCode.js",
    "content": "export const BorderSpinnerCode = `   \n<Spinner animation=\"border\" role=\"status\">\n    <span className=\"visually-hidden\">Loading...</span>\n</Spinner>\n`.trim();\n\nexport const SpinnersColorsCode = `   \n<Spinner animation=\"border\" variant=\"primary\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"secondary\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"success\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"danger\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"warning\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"info\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"light\" className=\"me-2\" />\n<Spinner animation=\"border\" variant=\"dark\" />\n`.trim();\n\nexport const GrowingSpinnerCode = `   \n<Spinner animation=\"grow\" />\n`.trim();\n\nexport const GrowColorsCode = `   \n<Spinner animation=\"grow\" variant=\"primary\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"secondary\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"success\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"danger\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"warning\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"info\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"light\" className=\"me-2\" />\n<Spinner animation=\"grow\" variant=\"dark\" />\n`.trim();\n\nexport const AlignmentCode = `   \n<Spinner animation=\"border\" role=\"status\" className=\"m-5\">\n    <span className=\"visually-hidden\">Loading...</span>\n</Spinner>\n`.trim();\n\nexport const PlacementCenterCode = `   \n<div className=\"d-flex justify-content-center\">\n    <Spinner animation=\"border\" role=\"status\">\n        <span className=\"visually-hidden\">Loading...</span>\n    </Spinner>\n</div>\n`.trim();\n\nexport const PlacementLoadingCode = `   \n<div className=\"d-flex  align-items-center\">\n    <strong>Loading...</strong>\n    <Spinner animation=\"border\" role=\"status\" className=\"ms-auto\">\n        <span className=\"visually-hidden\">Loading...</span>\n    </Spinner>\n</div>\n`.trim();\n\nexport const FloatsCode = `   \n<Spinner animation=\"border\" role=\"status\" className=\"float-end\">\n    <span className=\"visually-hidden\">Loading...</span>\n</Spinner>\n`.trim();\n\nexport const TextAlignCode = `   \n<div className=\"text-center\">\n    <Spinner animation=\"border\" role=\"status\">\n        <span className=\"visually-hidden\">Loading...</span>\n    </Spinner>\n</div>\n`.trim();\n\nexport const SizeSpinnersCode = `   \n<Spinner animation=\"border\" size=\"sm\" className=\"me-2\"/> \n<Spinner animation=\"grow\" size=\"sm\" />\n`.trim();\n\nexport const StyleCSSCode = `   \n<Spinner animation=\"border\" style={{ width: '3rem', height: '3rem' }} className=\"me-2\" />\n<Spinner animation=\"grow\" style={{ width: '3rem', height: '3rem' }} />\n`.trim();\n\nexport const ButtonsCode = `   \n<Button variant=\"primary\" disabled className=\"me-2\">\n    <Spinner\n        as=\"span\"\n        animation=\"border\"\n        size=\"sm\"\n        role=\"status\"\n        aria-hidden=\"true\"\n    />\n    <span className=\"visually-hidden\">Loading...</span>\n    </Button>\n    <Button variant=\"primary\" disabled>\n    <Spinner\n        as=\"span\"\n        animation=\"border\"\n        size=\"sm\"\n        role=\"status\"\n        aria-hidden=\"true\"\n    />\n    Loading...\n</Button>\n`.trim();\n\nexport const Buttons2Code = `   \n<Button variant=\"primary\" disabled className=\"me-2\">\n    <Spinner\n        as=\"span\"\n        animation=\"grow\"\n        size=\"sm\"\n        role=\"status\"\n        aria-hidden=\"true\"\n    />\n    <span className=\"visually-hidden\">Loading...</span>\n</Button>\n<Button variant=\"primary\" disabled>\n    <Spinner\n        as=\"span\"\n        animation=\"grow\"\n        size=\"sm\"\n        role=\"status\"\n        aria-hidden=\"true\"\n    />\n    Loading...\n</Button>\n`.trim();\n\nexport const SpinnersCode = [\n\tBorderSpinnerCode,\n\tSpinnersColorsCode,\n\tGrowingSpinnerCode,\n\tGrowColorsCode,\n\tAlignmentCode,\n\tPlacementCenterCode,\n\tPlacementLoadingCode,\n\tFloatsCode,\n\tTextAlignCode,\n\tSizeSpinnersCode,\n\tStyleCSSCode,\n\tButtonsCode,\n\tButtons2Code\n];\n\nexport default SpinnersCode;\n"
  },
  {
    "path": "data/code/TablesCode.js",
    "content": "export const BasicTableCode = `   \n<Table className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table>\n`.trim();\n\nexport const DarkTableCode = `   \n<Table variant=\"dark\" className=\"text-nowrap\">\n    <thead>\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const TableHeadCode = `   \n<Table className=\"text-nowrap\">\n    <thead className=\"table-light\">\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table>  \n<Table className=\"text-nowrap\">\n    <thead className=\"table-dark\">\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table>\n`.trim();\n\nexport const StripedTableCode = `   \n<Table striped className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const TableVariantCode = `   \n<Table variant=\"success\" className=\"text-nowrap\">\n    <thead>\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Larry</td>\n            <td>the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table>  \n`.trim();\n\nexport const BorderedTableCode = `   \n<Table bordered className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td colSpan=\"2\">Larry the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const BorderlessTableCode = `   \n<Table borderless className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td colSpan=\"2\">Larry the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const HoverableRowsCode = `   \n<Table hover className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td colSpan=\"2\">Larry the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const SmallTableCode = `   \n<Table size=\"sm\" className=\"text-nowrap\">\n    <thead >\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">First</th>\n            <th scope=\"col\">Last</th>\n            <th scope=\"col\">Handle</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Mark</td>\n            <td>Otto</td>\n            <td>@mdo</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Jacob</td>\n            <td>Thornton</td>\n            <td>@fat</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td colSpan=\"2\">Larry the Bird</td>\n            <td>@twitter</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const ContextualClassesCode = `   \n<Table className=\"text-nowrap\">\n    <thead className=\"thead-light\">\n        <tr>\n            <th scope=\"col\">Class</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr className=\"table-active\">\n            <th scope=\"row\">Active</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">Default</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-primary\">\n            <th scope=\"row\">Primary</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-secondary\">\n            <th scope=\"row\">Secondary</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-success\">\n            <th scope=\"row\">Success</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-danger\">\n            <th scope=\"row\">Danger</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-warning\">\n            <th scope=\"row\">Warning</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-info\">\n            <th scope=\"row\">Info</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-light\">\n            <th scope=\"row\">Light</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr className=\"table-dark\">\n            <th scope=\"row\">Dark</th>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n    </tbody>\n</Table> \n`.trim();\n\nexport const ResponsiveTableCode = `   \n<Table responsive className=\"text-nowrap\">\n    <thead>\n        <tr>\n            <th scope=\"col\">#</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n            <th scope=\"col\">Heading</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <th scope=\"row\">1</th>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">2</th>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n        <tr>\n            <th scope=\"row\">3</th>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n            <td>Cell</td>\n        </tr>\n    </tbody>\n</Table>  \n`.trim();\n\nexport const TablesCode = [\n\tBasicTableCode,\n\tDarkTableCode,\n\tTableHeadCode,\n\tStripedTableCode,\n\tTableVariantCode,\n\tBorderedTableCode,\n\tBorderlessTableCode,\n\tHoverableRowsCode,\n\tSmallTableCode,\n\tContextualClassesCode,\n\tResponsiveTableCode\n];\n\nexport default TablesCode;\n"
  },
  {
    "path": "data/code/ToastsCode.js",
    "content": "export const BasicExampleCode = `  \n<Toast>\n    <Toast.Header>\n        <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n        <strong className=\"me-auto\">Bootstrap</strong>\n        <small>11 mins ago</small>\n    </Toast.Header>\n    <Toast.Body>Hello, world! This is a toast message.</Toast.Body>\n</Toast>\n`.trim();\n\nexport const TranslucentToastsCode = `   \n<Toast className=\"mb-4\" >\n    <Toast.Header>\n        <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n        <strong className=\"me-auto\">Bootstrap</strong>\n        <small>just now</small>\n    </Toast.Header>\n    <Toast.Body>See? Just like this.</Toast.Body>\n</Toast>\n`.trim();\n\nexport const StackingCode = `   \n<Toast className=\"mb-4\">\n    <Toast.Header>\n        <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n        <strong className=\"me-auto\">Bootstrap</strong>\n        <small>just now</small>\n    </Toast.Header>\n    <Toast.Body>See? Just like this.</Toast.Body>\n</Toast>\n<Toast animation={false}>\n    <Toast.Header>\n        <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n        <strong className=\"me-auto\">Bootstrap</strong>\n        <small>2 seconds ago</small>\n    </Toast.Header>\n    <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>\n</Toast>\n`.trim();\n\nexport const PlacementCode1 = `   \n<div className=\"mb-3\">\n    <label htmlFor=\"selectToastPlacement\">Toast position</label>\n    <Form.Select\n        id=\"selectToastPlacement\"\n        className=\"mt-2\"\n        onChange={(e) => setPosition(e.currentTarget.value)}\n        >\n        {[\n            'top-start',\n            'top-center',\n            'top-end',\n            'middle-start',\n            'middle-center',\n            'middle-end',\n            'bottom-start',\n            'bottom-center',\n            'bottom-end',\n        ].map((p) => (\n            <option key={p} value={p}>\n                {p}\n            </option>\n        ))}\n    </Form.Select>\n</div>\n<div\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    className=\"position-relative\"\n    style={{ minHeight: '240px' }}\n    >\n    <ToastContainer className=\"p-3\" position={position}>\n        <Toast>\n            <Toast.Header closeButton={false}>\n                <Image src=\"/images/avatar/avatar-1.jpg\" className=\"rounded me-2 avatar-xs\" alt=\"...\" />\n                <strong className=\"me-auto\">Bootstrap</strong>\n                <small>11 mins ago</small>\n            </Toast.Header>\n            <Toast.Body>Hello, world! This is a toast message.</Toast.Body>\n        </Toast>\n    </ToastContainer>\n</div>   \n`.trim();\n\nexport const PlacementCode2 = `   \n<div\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n    style={{\n        position: 'relative',\n        minHeight: '250px',\n    }}\n    >\n    <div\n        style={{\n            position: 'absolute',\n            top: 0,\n            right: 0,\n        }}\n        >\n        <Toast className=\"mb-4\">\n            <Toast.Header>\n                <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n                <strong className=\"me-auto\">Bootstrap</strong>\n                <small>just now</small>\n            </Toast.Header>\n            <Toast.Body>See? Just like this.</Toast.Body>\n        </Toast>\n        <Toast className=\"mb-4\">\n            <Toast.Header>\n                <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n                <strong className=\"me-auto\">Bootstrap</strong>\n                <small>2 seconds ago</small>\n            </Toast.Header>\n            <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>\n        </Toast>\n    </div>\n</div>\n`.trim();\n\nexport const PlacementCode3 = `   \n<div aria-live=\"polite\" aria-atomic=\"true\" className=\"d-flex justify-content-center align-items-center\" \n    style={{\n        position: 'relative',\n        minHeight: '250px',\n    }}>\n    <Toast>\n        <Toast.Header>\n            <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n            <strong className=\"me-auto\">Bootstrap</strong>\n            <small>11 mins ago</small>\n        </Toast.Header>\n        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>\n    </Toast>\n</div>\n`.trim();\n\nexport const DismissibleCode = `  \nconst Toasts = () => {\n\n    const [showA, setShowA] = useState(true);\n    const [showB, setShowB] = useState(true);\n  \n    const toggleShowA = () => setShowA(!showA);\n    const toggleShowB = () => setShowB(!showB);\n\n    return ( \n        <Fragment> \n            <Row>\n                <Col md={6} className=\"mb-2\">\n                    <Button onClick={toggleShowA} className=\"mb-2\">\n                        Toggle Toast <strong>with</strong> Animation\n                    </Button>\n                    <Toast className=\"mb-4\" show={showA} onClose={toggleShowA}>\n                        <Toast.Header>\n                            <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n                            <strong className=\"me-auto\">Bootstrap</strong>\n                            <small>just now</small>\n                        </Toast.Header>\n                        <Toast.Body>See? Just like this.</Toast.Body>\n                    </Toast>\n                </Col>\n                <Col md={6} className=\"mb-2\">\n                    <Button onClick={toggleShowB} className=\"mb-2\">\n                        Toggle Toast <strong>without</strong> Animation\n                    </Button>\n                    <Toast onClose={toggleShowB} show={showB} animation={false}>\n                        <Toast.Header>\n                            <Image src=\"https://fakeimg.pl/20x20/754FFE/754FFE/\" className=\"rounded me-2\" alt=\"\" />\n                            <strong className=\"me-auto\">Bootstrap</strong>\n                            <small>2 seconds ago</small>\n                        </Toast.Header>\n                        <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>\n                    </Toast>\n                </Col>\n            </Row>\n        </Fragment>\n    )\n}\n`.trim();\n\nexport const ToastsCode = [\n\tBasicExampleCode,\n\tTranslucentToastsCode,\n\tStackingCode,\n\tPlacementCode1,\n\tPlacementCode2,\n\tPlacementCode3,\n\tDismissibleCode\n];\n\nexport default ToastsCode;\n"
  },
  {
    "path": "data/code/TooltipsCode.js",
    "content": "export const BasicTooltip = `   \n{['top', 'right', 'bottom', 'left'].map((placement) => (\n    <OverlayTrigger\n    key={placement}\n    placement={placement}                                \n    overlay={\n        <Tooltip id={\\`tooltip-\\${placement}\\`}>\n        Tooltip on <strong>{placement}</strong>.\n        </Tooltip>\n    }\n    >\n        <Button variant=\"secondary\" className=\"me-1 mb-2 mb-lg-0\">Tooltip on {placement}</Button>\n    </OverlayTrigger>\n))}  \n`.trim();\n\nexport default BasicTooltip;\n"
  },
  {
    "path": "data/dashboard/ActiveProjectsData.js",
    "content": "export const ActiveProjectsData = [\n    {\n       id:1,\n       projectName : \"Dropbox Design System\",\n       priority : \"Medium\",\n       priorityBadgeBg : 'warning',\n       hours: 34,\n       progress: 15,\n       brandLogo:'/images/brand/dropbox-logo.svg',\n       brandLogoBg : 'bg-white',\n       members:[\n        {image:'images/avatar/avatar-1.jpg'},\n        {image:'images/avatar/avatar-2.jpg'},\n        {image:'images/avatar/avatar-3.jpg'}\n       ] \n    },\n    {\n        id:2,\n        projectName : \"Slack Team UI Design\",\n        priority : \"High\",\n        priorityBadgeBg : 'danger',\n        hours: 47,\n        progress: 35,\n        brandLogo:'/images/brand/slack-logo.svg',\n        brandLogoBg : 'bg-white',\n        members:[\n            {image:'images/avatar/avatar-4.jpg'},\n            {image:'images/avatar/avatar-5.jpg'},\n            {image:'images/avatar/avatar-6.jpg'}\n        ] \n     },\n     {\n        id:3,\n        projectName : \"GitHub Satellite\",\n        priority : \"Low\",\n        priorityBadgeBg : 'info',\n        hours: 120,\n        progress: 75,\n        brandLogo:'/images/brand/github-logo.svg',\n        brandLogoBg : 'bg-white',\n        members:[\n            {image:'images/avatar/avatar-7.jpg'},\n            {image:'images/avatar/avatar-8.jpg'},\n            {image:'images/avatar/avatar-9.jpg'}\n        ] \n     },\n     {\n        id:4,\n        projectName : \"3D Character Modelling\",\n        priority : \"Medium\",\n        priorityBadgeBg : 'warning',\n        hours: 89,\n        progress: 63,\n        brandLogo:'/images/brand/3dsmax-logo.svg',\n        brandLogoBg : 'bg-white',\n        members:[\n            {image:'images/avatar/avatar-10.jpg'},\n            {image:'images/avatar/avatar-11.jpg'},\n            {image:'images/avatar/avatar-12.jpg'}\n        ] \n     },\n     {\n        id:3,\n        projectName : \"Webapp Design System\",\n        priority : \"Track\",\n        priorityBadgeBg : 'success',\n        hours: 108,\n        progress: 100,\n        brandLogo:'/images/brand/layers-logo.svg',\n        brandLogoBg : 'bg-primary',\n        members:[\n            {image:'images/avatar/avatar-13.jpg'},\n            {image:'images/avatar/avatar-14.jpg'},\n            {image:'images/avatar/avatar-15.jpg'}\n        ] \n     },\n     {\n        id:4,\n        projectName : \"Github Event Design\",\n        priority : \"Low\",\n        priorityBadgeBg : 'info',\n        hours: 120,\n        progress: 75,\n        brandLogo:'/images/brand/github-logo.svg',\n        brandLogoBg : 'bg-white',\n        members:[\n            {image:'images/avatar/avatar-16.jpg'},\n            {image:'images/avatar/avatar-17.jpg'},\n            {image:'images/avatar/avatar-18.jpg'}\n        ] \n     }\n];\nexport default ActiveProjectsData;\n"
  },
  {
    "path": "data/dashboard/ProjectsStatsData.js",
    "content": "import {\n\tBriefcase,\n    ListTask,\n    People,\n    Bullseye\n} from 'react-bootstrap-icons';\n\nexport const ProjectsStats = [\n    {\n       id:1,\n       title : \"Projects\",\n       value : 18,\n       icon: <Briefcase size={18}/>,\n       statInfo: '<span className=\"text-dark me-2\">2</span> Completed' \n    },\n    {\n        id:2,\n        title : \"Active Task\",\n        value : 132,\n        icon: <ListTask size={18}/>,\n        statInfo: '<span className=\"text-dark me-2\">28</span> Completed' \n     },\n     {\n        id:3,\n        title : \"Teams\",\n        value : 12,\n        icon: <People size={18}/>,\n        statInfo: '<span className=\"text-dark me-2\">1</span> Completed' \n     },\n     {\n        id:4,\n        title : \"Productivity\",\n        value : '76%',\n        icon: <Bullseye size={18}/>,\n        statInfo: '<span className=\"text-dark me-2\">5%</span> Completed' \n     }\n];\nexport default ProjectsStats;\n"
  },
  {
    "path": "data/dashboard/TeamsData.js",
    "content": "export const TeamsData = [\n    {\n       id:1,\n       name : \"Anita Parmar\",\n       email : \"anita@example.com\",\n       role: \"Front End Developer\",\n       lastActivity: '3 May, 2023',\n       image:'/images/avatar/avatar-2.jpg' \n    },\n    {\n        id:2,\n        name : \"Jitu Chauhan\",\n        email : \"jituchauhan@example.com\",\n        role: \"Project Director\",\n        lastActivity: 'Today',\n        image:'/images/avatar/avatar-1.jpg' \n     },\n     {\n        id:3,\n        name : \"Sandeep Chauhan\",\n        email : \"sandeepchauhan@example.com\",\n        role: \"Full- Stack Developer\",\n        lastActivity: 'Yesterday',\n        image:'/images/avatar/avatar-3.jpg' \n     },\n     {\n        id:4,\n        name : \"Amanda Darnell\",\n        email : \"amandadarnell@example.com\",\n        role: \"Account Manager\",\n        lastActivity: '3 May, 2023',\n        image:'/images/avatar/avatar-4.jpg' \n     },\n     {\n        id:3,\n        name : \"Patricia Murrill\",\n        email : \"patriciamurrill@example.com\",\n        role: \"Digital Marketer\",\n        lastActivity: '3 May, 2023',\n        image:'/images/avatar/avatar-5.jpg' \n     },\n     {\n        id:4,\n        name : \"Darshini Nair\",\n        email : \"darshininair@example.com\",\n        role: \"Front End Developer\",\n        lastActivity: '3 May, 2023',\n        image:'/images/avatar/avatar-6.jpg' \n     }\n];\nexport default TeamsData;\n"
  },
  {
    "path": "data/pricing/FAQsData.js",
    "content": "export const FAQsData = [\n\t{\n\t\tid: 1,\n\t\tquestion: 'Will I be charged now for?',\n\t\tanswer:\n\t\t\t'Vestibulum pulvinar est at erat laoreet fringilla. Nullam imperdiet, augue non vestibulum triuam quam, at maximus ex mauris a felis.'\n\t},\n\t{\n\t\tid: 2,\n\t\tquestion: 'How does a subscription work?',\n\t\tanswer:\n\t\t\t'Donec tempus imperdiet libero quis ultricies. Donec nunc nisi, imperdiet nec porta ultrices, accumsan a nibh.'\n\t},\n\t{\n\t\tid: 3,\n\t\tquestion: 'Can I cancel anytime?',\n\t\tanswer:\n\t\t\t'Yes, Pellentesque habitant morbi tristique senectus et netus fficitur eget lacus eu, gravida blandit sem. Duis aliquam convallis tempor.'\n\t},\n\t{\n\t\tid: 4,\n\t\tquestion: 'How long is my personal?',\n\t\tanswer:\n\t\t\t'Aliquam vel sodales est. Mauris eu dignissim dolor. Praesent scelerisque dolor risus, quis viverra interdum turpis tincidunt interdum.'\n\t},\n\t{\n\t\tid: 5,\n\t\tquestion: 'What are Multisite plan?',\n\t\tanswer:\n\t\t\t'Quisque accumsan odio sed congue u eleifend est porttitor nisi lobortis, sit aget dolor rhoncus tincidunt vel a mauris.'\n\t},\n\t{\n\t\tid: 6,\n\t\tquestion: 'Are the files downloadable?',\n\t\tanswer:\n\t\t\t'Pellentesque habitant morbi tristique senectus et netus et malesuada fitur eget lacus eu, gravida blandit sem.'\n\t}\n];\nexport default FAQsData;\n"
  },
  {
    "path": "data/pricing/FeaturesData.js",
    "content": "export const FeaturesData = [\n\t{\n\t\tid: 1,\n\t\ticon:'edit',\n\t\ttitle: 'Create and Edit Projects',\n\t\tdescription:'Donec posuere felis sit amet felis max imus roin consectetur quis leo id eleifuet, sapien quis fringilla finibus.'\n\t},\n\t{\n\t\tid: 2,\n\t\ticon:'filter',\n\t\ttitle: 'Search and Filter',\n\t\tdescription:'Vestibulum in neque augue. Vivamus sed tempor mi. Integer dolor urna, dictum a arcu vitae, efficitur semper lorem.'\n\t}\t,\n\t{\n\t\tid: 3,\n\t\ticon:'rotate-ccw',\n\t\ttitle: 'Real Time Updates',\n\t\tdescription:'Maecenas nec mauris dui. Sed ut mi a nibh rhoncus blandit. Cras accumsan, eros in malesuada convallis.'\n\t},\n\t{\n\t\tid: 4,\n\t\ticon:'tag',\n\t\ttitle: 'Meta Information',\n\t\tdescription:'Aenean justo lorem, semper non lectus quis, porta semper enim. Integer posuere lorem eu neque pellentesque.'\n\t},\n\t{\n\t\tid: 5,\n\t\ticon:'file-text',\n\t\ttitle: 'Pre rendered Results',\n\t\tdescription:'Donec cursus libero non nibh consectetur sodales tincidunt vitae turpis. Duis feugiat at lorem id iaculis.'\n\t},\n\t{\n\t\tid: 6,\n\t\ticon:'trending-up',\n\t\ttitle: 'Simple Analytics',\n\t\tdescription:'Nulla imperdiet sem quis ipsum condi mentum po ris sit amet libero et turpis vestibulum faucibus at nec lacus.'\n\t}\n];\nexport default FeaturesData;\n"
  },
  {
    "path": "data/pricing/PricingPlansData.js",
    "content": "export const standard = [\n\t{\n\t\tplantitle: 'Standard',\n\t\tdescription: `For early-stage startups that want to spend more time developing and less on manual operations.`,\n\t\tmonthly: 49,\n\t\tbuttonText: 'Buy Standard',\n\t\tbuttonClass: 'outline-primary',\n\t\tfeatureHeading: 'All core features, including',\n\t\tfeatures: [\n\t\t\t{ feature: 'Only Basic Components' },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">12+ </span> Adv. Components` },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">5 - </span>Landing page` },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">3 </span>Dashboard Layouts` },\n\t\t\t{ feature: 'Documentation' },\n\t\t\t{ feature: 'Access to support forums' }\n\t\t]\n\t}\n];\n\nexport const multisite = [\n\t{\n\t\tplantitle: 'Multisite',\n\t\tdescription: `For agile startups that want to grow their revenue with quick experiments and data-driven decision making.`,\n\t\tmonthly: 149,\n\t\tbuttonText: 'Buy Multisite',\n\t\tbuttonClass: 'primary',\n\t\tfeatureHeading: 'Everything in Standard +:',\n\t\tfeatures: [\n\t\t\t{ feature: 'Offline viewing' },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">Unlimited </span>projects` },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">Unlimited </span>storage` },\n\t\t\t{ feature: 'Custom domain support' },\n\t\t\t{ feature: 'Bulk editing' },\n\t\t\t{ feature: '12 / 5 support' }\n\t\t]\n\t}\n];\n\nexport const extended = [\n\t{\n\t\tplantitle: 'Extended',\n\t\tdescription: `For fast-growth scaleups that want to grow by maximizing efficiencies in their revenue operations.`,\n\t\tmonthly: 490,\n\t\tbuttonText: 'Buy Extended',\n\t\tbuttonClass: 'outline-primary',\n\t\tfeatureHeading: 'Everything in Multisite +',\n\t\tfeatures: [\n\t\t\t{ feature: 'Workshop' },\n\t\t\t{ feature: `<span class=\"fw-bold text-dark\">Dedicated  </span>hardware` },\n\t\t\t{\n\t\t\t\tfeature: `<span class=\"fw-bold text-dark\">99.9% uptime </span>guarantee`\n\t\t\t},\n\t\t\t{ feature: 'Advanced analytics' },\n\t\t\t{ feature: '3rd party integrations' },\n\t\t\t{ feature: '24 / 7 support' }\n\t\t]\n\t}\n];\n\nexport const PricingPlansData = [standard, multisite, extended];\n\nexport default PricingPlansData;\n"
  },
  {
    "path": "data/profile/ProjectsContributionsData.js",
    "content": "export const ProjectsContributionsData = [\n    {\n        id: 1,\n        projectName: \"Slack Figma Design UI\",\n        description: \"Project description and details about...\",\n        brandLogo: '/images/brand/slack-logo.svg',\n        brandLogoBg: 'bg-white',\n        members: [\n            { image: '/images/avatar/avatar-4.jpg' },\n            { image: '/images/avatar/avatar-5.jpg' },\n            { image: '/images/avatar/avatar-6.jpg' }\n        ]\n    },\n    {\n        id: 2,\n        projectName: \"Design 3d Character\",\n        description: \"Project description and details about...\",\n        brandLogo: '/images/brand/3dsmax-logo.svg',\n        brandLogoBg: 'bg-white',\n        members: [\n            { image: '/images/avatar/avatar-10.jpg' },\n            { image: '/images/avatar/avatar-11.jpg' },\n            { image: '/images/avatar/avatar-12.jpg' }\n        ]\n    },\n    {\n        id: 3,\n        projectName: \"Github Development\",\n        description: \"Project description and details about...\",\n        brandLogo: '/images/brand/github-logo.svg',\n        brandLogoBg: 'bg-white',\n        members: [\n            { image: '/images/avatar/avatar-7.jpg' },\n            { image: '/images/avatar/avatar-8.jpg' },\n            { image: '/images/avatar/avatar-9.jpg' }\n        ]\n    },\n    {\n        id: 4,\n        projectName: \"Dropbox Design System\",\n        description: \"Project description and details about...\",\n        brandLogo: '/images/brand/dropbox-logo.svg',\n        brandLogoBg: 'bg-white',\n        members: [\n            { image: '/images/avatar/avatar-1.jpg' },\n            { image: '/images/avatar/avatar-2.jpg' },\n            { image: '/images/avatar/avatar-3.jpg' }\n        ]\n    },\n    {\n        id: 5,\n        projectName: \"Project Management\",\n        description: \"Project description and details about...\",\n        brandLogo: '/images/brand/layers-logo.svg',\n        brandLogoBg: 'bg-primary',\n        members: [\n            { image: '/images/avatar/avatar-13.jpg' },\n            { image: '/images/avatar/avatar-14.jpg' },\n            { image: '/images/avatar/avatar-15.jpg' }\n        ]\n    }\n];\nexport default ProjectsContributionsData;\n"
  },
  {
    "path": "hooks/useMounted.js",
    "content": "// This hook is used to fix React Hydration Error on any page\n\n// import node module libraries\nimport { useState, useEffect } from 'react';\n\nconst useMounted = () => {\n    const [hasMounted, setHasMounted] = useState(false);\n\tuseEffect(() => { setHasMounted(true); }, []);\n\treturn hasMounted;\n};\n\nexport default useMounted;\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"*\": [\"./*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "layouts/QuickMenu.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { Fragment } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport {\n    Row,\n    Col,\n    Image,\n    Dropdown,\n    ListGroup,\n} from 'react-bootstrap';\n\n// simple bar scrolling used for notification item scrolling\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar/dist/simplebar.min.css';\n\n// import data files\nimport NotificationList from 'data/Notification';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst QuickMenu = () => {\n\n    const hasMounted = useMounted();\n    \n    const isDesktop = useMediaQuery({\n        query: '(min-width: 1224px)'\n    })\n\n    const Notifications = () => {\n        return (\n            <SimpleBar style={{ maxHeight: '300px' }}>\n                <ListGroup variant=\"flush\">\n                    {NotificationList.map(function (item, index) {\n                        return (\n                            <ListGroup.Item className={index === 0 ? 'bg-light' : ''} key={index}>\n                                <Row>\n                                    <Col>\n                                        <Link href=\"#\" className=\"text-muted\">\n                                            <h5 className=\" mb-1\">{item.sender}</h5>\n                                            <p className=\"mb-0\"> {item.message}</p>\n                                        </Link>\n                                    </Col>\n                                </Row>\n                            </ListGroup.Item>\n                        );\n                    })}\n                </ListGroup>\n            </SimpleBar>\n        );\n    }\n\n    const QuickMenuDesktop = () => {\n        return (\n        <ListGroup as=\"ul\" bsPrefix='navbar-nav' className=\"navbar-right-wrap ms-auto d-flex nav-top-wrap\">\n            <Dropdown as=\"li\" className=\"stopevent\">\n                <Dropdown.Toggle as=\"a\"\n                    bsPrefix=' '\n                    id=\"dropdownNotification\"\n                    className=\"btn btn-light btn-icon rounded-circle indicator indicator-primary text-muted\">\n                    <i className=\"fe fe-bell\"></i>\n                </Dropdown.Toggle>\n                <Dropdown.Menu\n                    className=\"dashboard-dropdown notifications-dropdown dropdown-menu-lg dropdown-menu-end py-0\"\n                    aria-labelledby=\"dropdownNotification\"\n                    align=\"end\"\n                    show\n                    >\n                    <Dropdown.Item className=\"mt-3\" bsPrefix=' ' as=\"div\"  >\n                        <div className=\"border-bottom px-3 pt-0 pb-3 d-flex justify-content-between align-items-end\">\n                            <span className=\"h4 mb-0\">Notifications</span>\n                            <Link href=\"/\" className=\"text-muted\">\n                                <span className=\"align-middle\">\n                                    <i className=\"fe fe-settings me-1\"></i>\n                                </span>\n                            </Link>\n                        </div>\n                        <Notifications />\n                        <div className=\"border-top px-3 pt-3 pb-3\">\n                            <Link href=\"/dashboard/notification-history\" className=\"text-link fw-semi-bold\">\n                                See all Notifications\n                            </Link>\n                        </div>\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n            <Dropdown as=\"li\" className=\"ms-2\">\n                <Dropdown.Toggle\n                    as=\"a\"\n                    bsPrefix=' '\n                    className=\"rounded-circle\"\n                    id=\"dropdownUser\">\n                    <div className=\"avatar avatar-md avatar-indicators avatar-online\">\n                        <Image alt=\"avatar\" src='/images/avatar/avatar-1.jpg' className=\"rounded-circle\" />\n                    </div>\n                </Dropdown.Toggle>\n                <Dropdown.Menu\n                    className=\"dropdown-menu dropdown-menu-end \"\n                    align=\"end\"\n                    aria-labelledby=\"dropdownUser\"\n                    show\n                    >\n                    <Dropdown.Item as=\"div\" className=\"px-4 pb-0 pt-2\" bsPrefix=' '>\n                            <div className=\"lh-1 \">\n                                <h5 className=\"mb-1\"> John E. Grainger</h5>\n                                <Link href=\"#\" className=\"text-inherit fs-6\">View my profile</Link>\n                            </div>\n                            <div className=\" dropdown-divider mt-3 mb-2\"></div>\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"2\">\n                        <i className=\"fe fe-user me-2\"></i> Edit Profile\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"3\">\n                        <i className=\"fe fe-activity me-2\"></i> Activity Log\n                    </Dropdown.Item>\n                    <Dropdown.Item className=\"text-primary\">\n                        <i className=\"fe fe-star me-2\"></i> Go Pro\n                    </Dropdown.Item>\n                    <Dropdown.Item >\n                        <i className=\"fe fe-settings me-2\"></i> Account Settings\n                    </Dropdown.Item>\n                    <Dropdown.Item>\n                        <i className=\"fe fe-power me-2\"></i>Sign Out\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n        </ListGroup>\n    )}\n\n    const QuickMenuMobile = () => {\n        return (\n        <ListGroup as=\"ul\" bsPrefix='navbar-nav' className=\"navbar-right-wrap ms-auto d-flex nav-top-wrap\">\n            <Dropdown as=\"li\" className=\"stopevent\">\n                <Dropdown.Toggle as=\"a\"\n                    bsPrefix=' '\n                    id=\"dropdownNotification\"\n                    className=\"btn btn-light btn-icon rounded-circle indicator indicator-primary text-muted\">\n                    <i className=\"fe fe-bell\"></i>\n                </Dropdown.Toggle>\n                <Dropdown.Menu\n                    className=\"dashboard-dropdown notifications-dropdown dropdown-menu-lg dropdown-menu-end py-0\"\n                    aria-labelledby=\"dropdownNotification\"\n                    align=\"end\"\n                    >\n                    <Dropdown.Item className=\"mt-3\" bsPrefix=' ' as=\"div\"  >\n                        <div className=\"border-bottom px-3 pt-0 pb-3 d-flex justify-content-between align-items-end\">\n                            <span className=\"h4 mb-0\">Notifications</span>\n                            <Link href=\"/\" className=\"text-muted\">\n                                <span className=\"align-middle\">\n                                    <i className=\"fe fe-settings me-1\"></i>\n                                </span>\n                            </Link>\n                        </div>\n                        <Notifications />\n                        <div className=\"border-top px-3 pt-3 pb-3\">\n                            <Link href=\"/dashboard/notification-history\" className=\"text-link fw-semi-bold\">\n                                See all Notifications\n                            </Link>\n                        </div>\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n            <Dropdown as=\"li\" className=\"ms-2\">\n                <Dropdown.Toggle\n                    as=\"a\"\n                    bsPrefix=' '\n                    className=\"rounded-circle\"\n                    id=\"dropdownUser\">\n                    <div className=\"avatar avatar-md avatar-indicators avatar-online\">\n                        <Image alt=\"avatar\" src='/images/avatar/avatar-1.jpg' className=\"rounded-circle\" />\n                    </div>\n                </Dropdown.Toggle>\n                <Dropdown.Menu\n                    className=\"dropdown-menu dropdown-menu-end \"\n                    align=\"end\"\n                    aria-labelledby=\"dropdownUser\"\n                    >\n                    <Dropdown.Item as=\"div\" className=\"px-4 pb-0 pt-2\" bsPrefix=' '>\n                            <div className=\"lh-1 \">\n                                <h5 className=\"mb-1\"> John E. Grainger</h5>\n                                <Link href=\"#\" className=\"text-inherit fs-6\">View my profile</Link>\n                            </div>\n                            <div className=\" dropdown-divider mt-3 mb-2\"></div>\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"2\">\n                        <i className=\"fe fe-user me-2\"></i> Edit Profile\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"3\">\n                        <i className=\"fe fe-activity me-2\"></i> Activity Log\n                    </Dropdown.Item>\n                    <Dropdown.Item className=\"text-primary\">\n                        <i className=\"fe fe-star me-2\"></i> Go Pro\n                    </Dropdown.Item>\n                    <Dropdown.Item >\n                        <i className=\"fe fe-settings me-2\"></i> Account Settings\n                    </Dropdown.Item>\n                    <Dropdown.Item>\n                        <i className=\"fe fe-power me-2\"></i>Sign Out\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n        </ListGroup>\n    )}\n\n    return (\n        <Fragment>\n            { hasMounted && isDesktop ? <QuickMenuDesktop /> : <QuickMenuMobile />}\n        </Fragment>\n    )\n}\n\nexport default QuickMenu;"
  },
  {
    "path": "layouts/navbars/NavbarTop.js",
    "content": "// import node module libraries\nimport { Menu } from 'react-feather';\nimport Link from 'next/link';\nimport {\n\tNav,\n\tNavbar,\n\tForm\n} from 'react-bootstrap';\n\n// import sub components\nimport QuickMenu from 'layouts/QuickMenu';\n\nconst NavbarTop = (props) => {\n\treturn (\n\t\t<Navbar expanded=\"lg\" className=\"navbar-classic navbar navbar-expand-lg\">\n\t\t\t<div className='d-flex justify-content-between w-100'>\n\t\t\t\t<div className=\"d-flex align-items-center\">\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref=\"#\"\n\t\t\t\t\t\tid=\"nav-toggle\"\n\t\t\t\t\t\tclassName=\"nav-icon me-2 icon-xs\"\n\t\t\t\t\t\tonClick={() => props.data.SidebarToggleMenu(!props.data.showMenu)}>\n\t\t\t\t\t\t<Menu size=\"18px\" />\n\t\t\t\t\t</Link>\n\t\t\t\t\t<div className=\"ms-lg-3 d-none d-md-none d-lg-block\">\n\t\t\t\t\t\t{/* Search Form */}\n\t\t\t\t\t\t<Form className=\"d-flex align-items-center\">\n\t\t\t\t\t\t\t<Form.Control type=\"search\" placeholder=\"Search\" />\n\t\t\t\t\t\t</Form>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{/* Quick Menu */}\n\t\t\t\t<Nav className=\"navbar-right-wrap ms-2 d-flex nav-top-wrap\">\n\t\t\t\t\t<QuickMenu />\n\t\t\t\t</Nav>\n\t\t\t</div>\n\t\t</Navbar>\n\t);\n};\n\nexport default NavbarTop;\n"
  },
  {
    "path": "layouts/navbars/NavbarVertical.js",
    "content": "'use client'\n// import node module libraries\nimport { Fragment, useContext } from 'react';\nimport Link from 'next/link';\nimport { usePathname   } from 'next/navigation'\nimport { useMediaQuery } from 'react-responsive';\nimport {\n\tListGroup,\n\tCard,\n\tImage,\n\tBadge,\n} from 'react-bootstrap';\nimport Accordion from 'react-bootstrap/Accordion';\nimport AccordionContext from 'react-bootstrap/AccordionContext';\nimport { useAccordionButton } from 'react-bootstrap/AccordionButton';\n\n// import simple bar scrolling used for notification item scrolling\nimport SimpleBar from 'simplebar-react';\nimport 'simplebar/dist/simplebar.min.css';\n\n// import routes file\nimport { DashboardMenu } from 'routes/DashboardRoutes';\n\nconst NavbarVertical = (props) => {\n\tconst location = usePathname ()\n\tconst CustomToggle = ({ children, eventKey, icon }) => {\n\t\tconst { activeEventKey } = useContext(AccordionContext);\n\t\tconst decoratedOnClick = useAccordionButton(eventKey, () =>\n\t\t\tconsole.log('totally custom!')\n\t\t);\n\t\tconst isCurrentEventKey = activeEventKey === eventKey;\n\t\treturn (\n\t\t\t<li className=\"nav-item\">\n\t\t\t\t<Link\n\t\t\t\t\thref=\"#\"\n\t\t\t\t\tclassName=\"nav-link \"\n\t\t\t\t\tonClick={decoratedOnClick}\n\t\t\t\t\tdata-bs-toggle=\"collapse\"\n\t\t\t\t\tdata-bs-target=\"#navDashboard\"\n\t\t\t\t\taria-expanded={isCurrentEventKey ? true : false}\n\t\t\t\t\taria-controls=\"navDashboard\">\n\t\t\t\t\t{icon ? <i className={`nav-icon fe fe-${icon} me-2`}></i> : ''}{' '}\n\t\t\t\t\t{children}\n\t\t\t\t</Link>\n\t\t\t</li>\n\t\t);\n\t};\n\tconst CustomToggleLevel2 = ({ children, eventKey, icon }) => {\n\t\tconst { activeEventKey } = useContext(AccordionContext);\n\t\tconst decoratedOnClick = useAccordionButton(eventKey, () =>\n\t\t\tconsole.log('totally custom!')\n\t\t);\n\t\tconst isCurrentEventKey = activeEventKey === eventKey;\n\t\treturn (\n\t\t\t(<Link\n\t\t\t\thref=\"#\"\n\t\t\t\tclassName=\"nav-link \"\n\t\t\t\tonClick={decoratedOnClick}\n\t\t\t\tdata-bs-toggle=\"collapse\"\n\t\t\t\tdata-bs-target=\"#navDashboard\"\n\t\t\t\taria-expanded={isCurrentEventKey ? true : false}\n\t\t\t\taria-controls=\"navDashboard\">\n\t\t\t\t{children}\n\t\t\t</Link>)\n\t\t);\n\t};\n\n\tconst generateLink = (item) => {\n\t\treturn (\n\t\t\t(<Link\n\t\t\t\thref={item.link}\n\t\t\t\tclassName={`nav-link ${location === item.link ? 'active' : ''\n\t\t\t\t\t}`}\n\t\t\t\tonClick={(e) =>\n\t\t\t\t\tisMobile ? props.onClick(!props.showMenu) : props.showMenu\n\t\t\t\t}>\n\n\t\t\t\t{item.name}\n\t\t\t\t{''}\n\t\t\t\t{item.badge ? (\n\t\t\t\t\t<Badge\n\t\t\t\t\t\tclassName=\"ms-1\"\n\t\t\t\t\t\tbg={item.badgecolor ? item.badgecolor : 'primary'}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t</Badge>\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\n\t\t\t</Link>)\n\t\t);\n\t};\n\n\tconst isMobile = useMediaQuery({ maxWidth: 767 });\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<SimpleBar style={{ maxHeight: '100vh' }}>\n\t\t\t\t<div className=\"nav-scroller\">\n\t\t\t\t\t<Link href=\"/\" className=\"navbar-brand\">\n\t\t\t\t\t\t<Image src=\"/images/brand/logo/logo.svg\" alt=\"\" />\n\t\t\t\t\t</Link>\n\t\t\t\t</div>\t\t\t\t\n\t\t\t\t{/* Dashboard Menu */}\n\t\t\t\t<Accordion defaultActiveKey=\"0\" as=\"ul\" className=\"navbar-nav flex-column\">\n\t\t\t\t\t{DashboardMenu.map(function (menu, index) {\n\t\t\t\t\t\tif (menu.grouptitle) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Card bsPrefix=\"nav-item\" key={index}>\n\t\t\t\t\t\t\t\t\t{/* group title item */}\n\t\t\t\t\t\t\t\t\t<div className=\"navbar-heading\">{menu.title}</div>\n\t\t\t\t\t\t\t\t\t{/* end of group title item */}\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (menu.children) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t\t\t\t\t{/* main menu / root menu level / root items */}\n\t\t\t\t\t\t\t\t\t\t<CustomToggle eventKey={index} icon={menu.icon}>\n\t\t\t\t\t\t\t\t\t\t\t{menu.title}\n\t\t\t\t\t\t\t\t\t\t\t{menu.badge ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge className=\"ms-1\" bg={menu.badgecolor ? menu.badgecolor : 'primary'}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{menu.badge}\n\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t) : ('')}\n\t\t\t\t\t\t\t\t\t\t</CustomToggle>\n\t\t\t\t\t\t\t\t\t\t<Accordion.Collapse eventKey={index} as=\"li\" bsPrefix=\"nav-item\">\n\t\t\t\t\t\t\t\t\t\t\t<ListGroup as=\"ul\" bsPrefix=\"\" className=\"nav flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t{menu.children.map(function (menuLevel1Item, menuLevel1Index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (menuLevel1Item.children) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\"nav-item\" key={menuLevel1Index}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* first level menu started  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Accordion defaultActiveKey=\"0\" className=\"navbar-nav flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<CustomToggleLevel2 eventKey={0}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel1Item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel1Item.badge ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge className=\"ms-1\" bg={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmenuLevel1Item.badgecolor ? menuLevel1Item.badgecolor : 'primary'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel1Item.badge}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : ('')}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</CustomToggleLevel2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Collapse eventKey={0} bsPrefix=\"nav-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup as=\"ul\" bsPrefix=\"\" className=\"nav flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* second level menu started  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel1Item.children.map(function (menuLevel2Item,menuLevel2Index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (menuLevel2Item.children) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\"nav-item\" key={menuLevel2Index}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* second level accordion menu started  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Accordion defaultActiveKey=\"0\" className=\"navbar-nav flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<CustomToggleLevel2 eventKey={0}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel2Item.title}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel2Item.badge ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Badge className=\"ms-1\" bg={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmenuLevel2Item.badgecolor ? menuLevel2Item.badgecolor : 'primary'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel2Item.badge}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : ('')}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</CustomToggleLevel2>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Accordion.Collapse eventKey={0} bsPrefix=\"nav-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup as=\"ul\" bsPrefix=\"\" className=\"nav flex-column\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* third level menu started  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{menuLevel2Item.children.map(function (menuLevel3Item,menuLevel3Index) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item key={menuLevel3Index} as=\"li\" bsPrefix=\"nav-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{generateLink(menuLevel3Item)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* end of third level menu  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Collapse>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* end of second level accordion */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item key={menuLevel2Index} as=\"li\" bsPrefix=\"nav-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{generateLink(menuLevel2Item)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* end of second level menu  */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Accordion.Collapse>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* end of first level menu */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ListGroup.Item as=\"li\" bsPrefix=\"nav-item\" key={menuLevel1Index}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* first level menu items */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{generateLink(menuLevel1Item)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{/* end of first level menu items */}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</ListGroup.Item>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t</ListGroup>\n\t\t\t\t\t\t\t\t\t\t</Accordion.Collapse>\n\t\t\t\t\t\t\t\t\t\t{/* end of main menu / menu level 1 / root items */}\n\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Card bsPrefix=\"nav-item\" key={index}>\n\t\t\t\t\t\t\t\t\t\t{/* menu item without any childern items like Documentation and Changelog items*/}\n\t\t\t\t\t\t\t\t\t\t<Link href={menu.link} className={`nav-link ${location === menu.link ? 'active' : ''} ${menu.title === 'Download' ? 'bg-primary text-white' : ''}`}>\n\t\t\t\t\t\t\t\t\t\t\t{typeof menu.icon === 'string' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<i className={`nav-icon fe fe-${menu.icon} me-2`}></i>\n\t\t\t\t\t\t\t\t\t\t\t) : (menu.icon)}\n\t\t\t\t\t\t\t\t\t\t\t{menu.title} \n\t\t\t\t\t\t\t\t\t\t\t{menu.badge ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge className=\"ms-1\" bg={menu.badgecolor ? menu.badgecolor : 'primary'}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{menu.badge}\n\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t) : ('')}\n\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t{/* end of menu item without any childern items */}\n\t\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t})}\n\t\t\t\t</Accordion>\n\t\t\t\t{/* end of Dashboard Menu */}\n\t\t\t\t\n\t\t\t</SimpleBar>\n\t\t</Fragment>\n\t);\n};\n\nexport default NavbarVertical;\n"
  },
  {
    "path": "next.config.js",
    "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"dashui-free-nextjs-admin-template\",\n  \"version\": \"1.1.1\",\n  \"private\": true,\n  \"author\": {\n    \"name\": \"codescandy\",\n    \"url\": \"https://codescandy.com\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"javascript\",\n    \"admin\",\n    \"dashboard\",\n    \"nextjs\",\n    \"nextjs13\",\n    \"admin-dashboard\",\n    \"free\",\n    \"admin-template\",\n    \"admin-panel\",\n    \"freebies\",\n    \"nextjs-template\",\n    \"react-dashboard\",\n    \"bootstrap 5\"\n  ],\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\",\n    \"lint\": \"next lint\"\n  },\n  \"dependencies\": {\n    \"@vercel/analytics\": \"^1.6.1\",\n    \"apexcharts\": \"^5.3.6\",\n    \"bootstrap\": \"^5.3.8\",\n    \"eslint\": \"9.39.1\",\n    \"eslint-config-next\": \"16.0.8\",\n    \"next\": \"16.0.8\",\n    \"node-sass\": \"^9.0.0\",\n    \"prism-react-renderer\": \"^2.4.1\",\n    \"react\": \"19.2.1\",\n    \"react-apexcharts\": \"^1.9.0\",\n    \"react-bootstrap\": \"^2.10.10\",\n    \"react-bootstrap-icons\": \"^1.11.6\",\n    \"react-dom\": \"19.2.1\",\n    \"react-dropzone\": \"^14.3.8\",\n    \"react-feather\": \"^2.0.10\",\n    \"react-responsive\": \"^10.0.1\",\n    \"react-syntax-highlighter\": \"^16.1.0\",\n    \"sass\": \"^1.77.6\",\n    \"sass-loader\": \"^16.0.6\",\n    \"simplebar\": \"^6.3.3\",\n    \"simplebar-react\": \"^3.3.2\",\n    \"uuid\": \"^13.0.0\"\n  }\n}"
  },
  {
    "path": "public/fonts/feather-icons/feather.css",
    "content": "@font-face {\n  font-family: 'Feather';\n  src:\n    url('fonts/feather.ttf?sdxovp') format('truetype'),\n    url('fonts/feather.woff?sdxovp') format('woff'),\n    url('fonts/feather.svg?sdxovp#Feather') format('svg');\n  font-weight: normal;\n  font-style: normal;\n}\n\n.fe {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'Feather' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.fe-activity:before {\n  content: \"\\e900\";\n}\n.fe-airplay:before {\n  content: \"\\e901\";\n}\n.fe-alert-circle:before {\n  content: \"\\e902\";\n}\n.fe-alert-octagon:before {\n  content: \"\\e903\";\n}\n.fe-alert-triangle:before {\n  content: \"\\e904\";\n}\n.fe-align-center:before {\n  content: \"\\e905\";\n}\n.fe-align-justify:before {\n  content: \"\\e906\";\n}\n.fe-align-left:before {\n  content: \"\\e907\";\n}\n.fe-align-right:before {\n  content: \"\\e908\";\n}\n.fe-anchor:before {\n  content: \"\\e909\";\n}\n.fe-aperture:before {\n  content: \"\\e90a\";\n}\n.fe-archive:before {\n  content: \"\\e90b\";\n}\n.fe-arrow-down:before {\n  content: \"\\e90c\";\n}\n.fe-arrow-down-circle:before {\n  content: \"\\e90d\";\n}\n.fe-arrow-down-left:before {\n  content: \"\\e90e\";\n}\n.fe-arrow-down-right:before {\n  content: \"\\e90f\";\n}\n.fe-arrow-left:before {\n  content: \"\\e910\";\n}\n.fe-arrow-left-circle:before {\n  content: \"\\e911\";\n}\n.fe-arrow-right:before {\n  content: \"\\e912\";\n}\n.fe-arrow-right-circle:before {\n  content: \"\\e913\";\n}\n.fe-arrow-up:before {\n  content: \"\\e914\";\n}\n.fe-arrow-up-circle:before {\n  content: \"\\e915\";\n}\n.fe-arrow-up-left:before {\n  content: \"\\e916\";\n}\n.fe-arrow-up-right:before {\n  content: \"\\e917\";\n}\n.fe-at-sign:before {\n  content: \"\\e918\";\n}\n.fe-award:before {\n  content: \"\\e919\";\n}\n.fe-bar-chart:before {\n  content: \"\\e91a\";\n}\n.fe-bar-chart-2:before {\n  content: \"\\e91b\";\n}\n.fe-battery:before {\n  content: \"\\e91c\";\n}\n.fe-battery-charging:before {\n  content: \"\\e91d\";\n}\n.fe-bell:before {\n  content: \"\\e91e\";\n}\n.fe-bell-off:before {\n  content: \"\\e91f\";\n}\n.fe-bluetooth:before {\n  content: \"\\e920\";\n}\n.fe-bold:before {\n  content: \"\\e921\";\n}\n.fe-book:before {\n  content: \"\\e922\";\n}\n.fe-book-open:before {\n  content: \"\\e923\";\n}\n.fe-bookmark:before {\n  content: \"\\e924\";\n}\n.fe-box:before {\n  content: \"\\e925\";\n}\n.fe-briefcase:before {\n  content: \"\\e926\";\n}\n.fe-calendar:before {\n  content: \"\\e927\";\n}\n.fe-camera:before {\n  content: \"\\e928\";\n}\n.fe-camera-off:before {\n  content: \"\\e929\";\n}\n.fe-cast:before {\n  content: \"\\e92a\";\n}\n.fe-check:before {\n  content: \"\\e92b\";\n}\n.fe-check-circle:before {\n  content: \"\\e92c\";\n}\n.fe-check-square:before {\n  content: \"\\e92d\";\n}\n.fe-chevron-down:before {\n  content: \"\\e92e\";\n}\n.fe-chevron-left:before {\n  content: \"\\e92f\";\n}\n.fe-chevron-right:before {\n  content: \"\\e930\";\n}\n.fe-chevron-up:before {\n  content: \"\\e931\";\n}\n.fe-chevrons-down:before {\n  content: \"\\e932\";\n}\n.fe-chevrons-left:before {\n  content: \"\\e933\";\n}\n.fe-chevrons-right:before {\n  content: \"\\e934\";\n}\n.fe-chevrons-up:before {\n  content: \"\\e935\";\n}\n.fe-chrome:before {\n  content: \"\\e936\";\n}\n.fe-circle:before {\n  content: \"\\e937\";\n}\n.fe-clipboard:before {\n  content: \"\\e938\";\n}\n.fe-clock:before {\n  content: \"\\e939\";\n}\n.fe-cloud:before {\n  content: \"\\e93a\";\n}\n.fe-cloud-drizzle:before {\n  content: \"\\e93b\";\n}\n.fe-cloud-lightning:before {\n  content: \"\\e93c\";\n}\n.fe-cloud-off:before {\n  content: \"\\e93d\";\n}\n.fe-cloud-rain:before {\n  content: \"\\e93e\";\n}\n.fe-cloud-snow:before {\n  content: \"\\e93f\";\n}\n.fe-code:before {\n  content: \"\\e940\";\n}\n.fe-codepen:before {\n  content: \"\\e941\";\n}\n.fe-command:before {\n  content: \"\\e942\";\n}\n.fe-compass:before {\n  content: \"\\e943\";\n}\n.fe-copy:before {\n  content: \"\\e944\";\n}\n.fe-corner-down-left:before {\n  content: \"\\e945\";\n}\n.fe-corner-down-right:before {\n  content: \"\\e946\";\n}\n.fe-corner-left-down:before {\n  content: \"\\e947\";\n}\n.fe-corner-left-up:before {\n  content: \"\\e948\";\n}\n.fe-corner-right-down:before {\n  content: \"\\e949\";\n}\n.fe-corner-right-up:before {\n  content: \"\\e94a\";\n}\n.fe-corner-up-left:before {\n  content: \"\\e94b\";\n}\n.fe-corner-up-right:before {\n  content: \"\\e94c\";\n}\n.fe-cpu:before {\n  content: \"\\e94d\";\n}\n.fe-credit-card:before {\n  content: \"\\e94e\";\n}\n.fe-crop:before {\n  content: \"\\e94f\";\n}\n.fe-crosshair:before {\n  content: \"\\e950\";\n}\n.fe-database:before {\n  content: \"\\e951\";\n}\n.fe-delete:before {\n  content: \"\\e952\";\n}\n.fe-disc:before {\n  content: \"\\e953\";\n}\n.fe-dollar-sign:before {\n  content: \"\\e954\";\n}\n.fe-download:before {\n  content: \"\\e955\";\n}\n.fe-download-cloud:before {\n  content: \"\\e956\";\n}\n.fe-droplet:before {\n  content: \"\\e957\";\n}\n.fe-edit:before {\n  content: \"\\e958\";\n}\n.fe-edit-2:before {\n  content: \"\\e959\";\n}\n.fe-edit-3:before {\n  content: \"\\e95a\";\n}\n.fe-external-link:before {\n  content: \"\\e95b\";\n}\n.fe-eye:before {\n  content: \"\\e95c\";\n}\n.fe-eye-off:before {\n  content: \"\\e95d\";\n}\n.fe-facebook:before {\n  content: \"\\e95e\";\n}\n.fe-fast-forward:before {\n  content: \"\\e95f\";\n}\n.fe-feather:before {\n  content: \"\\e960\";\n}\n.fe-file:before {\n  content: \"\\e961\";\n}\n.fe-file-minus:before {\n  content: \"\\e962\";\n}\n.fe-file-plus:before {\n  content: \"\\e963\";\n}\n.fe-file-text:before {\n  content: \"\\e964\";\n}\n.fe-film:before {\n  content: \"\\e965\";\n}\n.fe-filter:before {\n  content: \"\\e966\";\n}\n.fe-flag:before {\n  content: \"\\e967\";\n}\n.fe-folder:before {\n  content: \"\\e968\";\n}\n.fe-folder-minus:before {\n  content: \"\\e969\";\n}\n.fe-folder-plus:before {\n  content: \"\\e96a\";\n}\n.fe-gift:before {\n  content: \"\\e96b\";\n}\n.fe-git-branch:before {\n  content: \"\\e96c\";\n}\n.fe-git-commit:before {\n  content: \"\\e96d\";\n}\n.fe-git-merge:before {\n  content: \"\\e96e\";\n}\n.fe-git-pull-request:before {\n  content: \"\\e96f\";\n}\n.fe-github:before {\n  content: \"\\e970\";\n}\n.fe-gitlab:before {\n  content: \"\\e971\";\n}\n.fe-globe:before {\n  content: \"\\e972\";\n}\n.fe-grid:before {\n  content: \"\\e973\";\n}\n.fe-hard-drive:before {\n  content: \"\\e974\";\n}\n.fe-hash:before {\n  content: \"\\e975\";\n}\n.fe-headphones:before {\n  content: \"\\e976\";\n}\n.fe-heart:before {\n  content: \"\\e977\";\n}\n.fe-help-circle:before {\n  content: \"\\e978\";\n}\n.fe-home:before {\n  content: \"\\e979\";\n}\n.fe-image:before {\n  content: \"\\e97a\";\n}\n.fe-inbox:before {\n  content: \"\\e97b\";\n}\n.fe-info:before {\n  content: \"\\e97c\";\n}\n.fe-instagram:before {\n  content: \"\\e97d\";\n}\n.fe-italic:before {\n  content: \"\\e97e\";\n}\n.fe-layers:before {\n  content: \"\\e97f\";\n}\n.fe-layout:before {\n  content: \"\\e980\";\n}\n.fe-life-buoy:before {\n  content: \"\\e981\";\n}\n.fe-link:before {\n  content: \"\\e982\";\n}\n.fe-link-2:before {\n  content: \"\\e983\";\n}\n.fe-linkedin:before {\n  content: \"\\e984\";\n}\n.fe-list:before {\n  content: \"\\e985\";\n}\n.fe-loader:before {\n  content: \"\\e986\";\n}\n.fe-lock:before {\n  content: \"\\e987\";\n}\n.fe-log-in:before {\n  content: \"\\e988\";\n}\n.fe-log-out:before {\n  content: \"\\e989\";\n}\n.fe-mail:before {\n  content: \"\\e98a\";\n}\n.fe-map:before {\n  content: \"\\e98b\";\n}\n.fe-map-pin:before {\n  content: \"\\e98c\";\n}\n.fe-maximize:before {\n  content: \"\\e98d\";\n}\n.fe-maximize-2:before {\n  content: \"\\e98e\";\n}\n.fe-menu:before {\n  content: \"\\e98f\";\n}\n.fe-message-circle:before {\n  content: \"\\e990\";\n}\n.fe-message-square:before {\n  content: \"\\e991\";\n}\n.fe-mic:before {\n  content: \"\\e992\";\n}\n.fe-mic-off:before {\n  content: \"\\e993\";\n}\n.fe-minimize:before {\n  content: \"\\e994\";\n}\n.fe-minimize-2:before {\n  content: \"\\e995\";\n}\n.fe-minus:before {\n  content: \"\\e996\";\n}\n.fe-minus-circle:before {\n  content: \"\\e997\";\n}\n.fe-minus-square:before {\n  content: \"\\e998\";\n}\n.fe-monitor:before {\n  content: \"\\e999\";\n}\n.fe-moon:before {\n  content: \"\\e99a\";\n}\n.fe-more-horizontal:before {\n  content: \"\\e99b\";\n}\n.fe-more-vertical:before {\n  content: \"\\e99c\";\n}\n.fe-move:before {\n  content: \"\\e99d\";\n}\n.fe-music:before {\n  content: \"\\e99e\";\n}\n.fe-navigation:before {\n  content: \"\\e99f\";\n}\n.fe-navigation-2:before {\n  content: \"\\e9a0\";\n}\n.fe-octagon:before {\n  content: \"\\e9a1\";\n}\n.fe-package:before {\n  content: \"\\e9a2\";\n}\n.fe-paperclip:before {\n  content: \"\\e9a3\";\n}\n.fe-pause:before {\n  content: \"\\e9a4\";\n}\n.fe-pause-circle:before {\n  content: \"\\e9a5\";\n}\n.fe-percent:before {\n  content: \"\\e9a6\";\n}\n.fe-phone:before {\n  content: \"\\e9a7\";\n}\n.fe-phone-call:before {\n  content: \"\\e9a8\";\n}\n.fe-phone-forwarded:before {\n  content: \"\\e9a9\";\n}\n.fe-phone-incoming:before {\n  content: \"\\e9aa\";\n}\n.fe-phone-missed:before {\n  content: \"\\e9ab\";\n}\n.fe-phone-off:before {\n  content: \"\\e9ac\";\n}\n.fe-phone-outgoing:before {\n  content: \"\\e9ad\";\n}\n.fe-pie-chart:before {\n  content: \"\\e9ae\";\n}\n.fe-play:before {\n  content: \"\\e9af\";\n}\n.fe-play-circle:before {\n  content: \"\\e9b0\";\n}\n.fe-plus:before {\n  content: \"\\e9b1\";\n}\n.fe-plus-circle:before {\n  content: \"\\e9b2\";\n}\n.fe-plus-square:before {\n  content: \"\\e9b3\";\n}\n.fe-pocket:before {\n  content: \"\\e9b4\";\n}\n.fe-power:before {\n  content: \"\\e9b5\";\n}\n.fe-printer:before {\n  content: \"\\e9b6\";\n}\n.fe-radio:before {\n  content: \"\\e9b7\";\n}\n.fe-refresh-ccw:before {\n  content: \"\\e9b8\";\n}\n.fe-refresh-cw:before {\n  content: \"\\e9b9\";\n}\n.fe-repeat:before {\n  content: \"\\e9ba\";\n}\n.fe-rewind:before {\n  content: \"\\e9bb\";\n}\n.fe-rotate-ccw:before {\n  content: \"\\e9bc\";\n}\n.fe-rotate-cw:before {\n  content: \"\\e9bd\";\n}\n.fe-rss:before {\n  content: \"\\e9be\";\n}\n.fe-save:before {\n  content: \"\\e9bf\";\n}\n.fe-scissors:before {\n  content: \"\\e9c0\";\n}\n.fe-search:before {\n  content: \"\\e9c1\";\n}\n.fe-send:before {\n  content: \"\\e9c2\";\n}\n.fe-server:before {\n  content: \"\\e9c3\";\n}\n.fe-settings:before {\n  content: \"\\e9c4\";\n}\n.fe-share:before {\n  content: \"\\e9c5\";\n}\n.fe-share-2:before {\n  content: \"\\e9c6\";\n}\n.fe-shield:before {\n  content: \"\\e9c7\";\n}\n.fe-shield-off:before {\n  content: \"\\e9c8\";\n}\n.fe-shopping-bag:before {\n  content: \"\\e9c9\";\n}\n.fe-shopping-cart:before {\n  content: \"\\e9ca\";\n}\n.fe-shuffle:before {\n  content: \"\\e9cb\";\n}\n.fe-sidebar:before {\n  content: \"\\e9cc\";\n}\n.fe-skip-back:before {\n  content: \"\\e9cd\";\n}\n.fe-skip-forward:before {\n  content: \"\\e9ce\";\n}\n.fe-slack:before {\n  content: \"\\e9cf\";\n}\n.fe-slash:before {\n  content: \"\\e9d0\";\n}\n.fe-sliders:before {\n  content: \"\\e9d1\";\n}\n.fe-smartphone:before {\n  content: \"\\e9d2\";\n}\n.fe-speaker:before {\n  content: \"\\e9d3\";\n}\n.fe-square:before {\n  content: \"\\e9d4\";\n}\n.fe-star:before {\n  content: \"\\e9d5\";\n}\n.fe-stop-circle:before {\n  content: \"\\e9d6\";\n}\n.fe-sun:before {\n  content: \"\\e9d7\";\n}\n.fe-sunrise:before {\n  content: \"\\e9d8\";\n}\n.fe-sunset:before {\n  content: \"\\e9d9\";\n}\n.fe-tablet:before {\n  content: \"\\e9da\";\n}\n.fe-tag:before {\n  content: \"\\e9db\";\n}\n.fe-target:before {\n  content: \"\\e9dc\";\n}\n.fe-terminal:before {\n  content: \"\\e9dd\";\n}\n.fe-thermometer:before {\n  content: \"\\e9de\";\n}\n.fe-thumbs-down:before {\n  content: \"\\e9df\";\n}\n.fe-thumbs-up:before {\n  content: \"\\e9e0\";\n}\n.fe-toggle-left:before {\n  content: \"\\e9e1\";\n}\n.fe-toggle-right:before {\n  content: \"\\e9e2\";\n}\n.fe-trash:before {\n  content: \"\\e9e3\";\n}\n.fe-trash-2:before {\n  content: \"\\e9e4\";\n}\n.fe-trending-down:before {\n  content: \"\\e9e5\";\n}\n.fe-trending-up:before {\n  content: \"\\e9e6\";\n}\n.fe-triangle:before {\n  content: \"\\e9e7\";\n}\n.fe-truck:before {\n  content: \"\\e9e8\";\n}\n.fe-tv:before {\n  content: \"\\e9e9\";\n}\n.fe-twitter:before {\n  content: \"\\e9ea\";\n}\n.fe-type:before {\n  content: \"\\e9eb\";\n}\n.fe-umbrella:before {\n  content: \"\\e9ec\";\n}\n.fe-underline:before {\n  content: \"\\e9ed\";\n}\n.fe-unlock:before {\n  content: \"\\e9ee\";\n}\n.fe-upload:before {\n  content: \"\\e9ef\";\n}\n.fe-upload-cloud:before {\n  content: \"\\e9f0\";\n}\n.fe-user:before {\n  content: \"\\e9f1\";\n}\n.fe-user-check:before {\n  content: \"\\e9f2\";\n}\n.fe-user-minus:before {\n  content: \"\\e9f3\";\n}\n.fe-user-plus:before {\n  content: \"\\e9f4\";\n}\n.fe-user-x:before {\n  content: \"\\e9f5\";\n}\n.fe-users:before {\n  content: \"\\e9f6\";\n}\n.fe-video:before {\n  content: \"\\e9f7\";\n}\n.fe-video-off:before {\n  content: \"\\e9f8\";\n}\n.fe-voicemail:before {\n  content: \"\\e9f9\";\n}\n.fe-volume:before {\n  content: \"\\e9fa\";\n}\n.fe-volume-1:before {\n  content: \"\\e9fb\";\n}\n.fe-volume-2:before {\n  content: \"\\e9fc\";\n}\n.fe-volume-x:before {\n  content: \"\\e9fd\";\n}\n.fe-watch:before {\n  content: \"\\e9fe\";\n}\n.fe-wifi:before {\n  content: \"\\e9ff\";\n}\n.fe-wifi-off:before {\n  content: \"\\ea00\";\n}\n.fe-wind:before {\n  content: \"\\ea01\";\n}\n.fe-x:before {\n  content: \"\\ea02\";\n}\n.fe-x-circle:before {\n  content: \"\\ea03\";\n}\n.fe-x-square:before {\n  content: \"\\ea04\";\n}\n.fe-youtube:before {\n  content: \"\\ea05\";\n}\n.fe-zap:before {\n  content: \"\\ea06\";\n}\n.fe-zap-off:before {\n  content: \"\\ea07\";\n}\n.fe-zoom-in:before {\n  content: \"\\ea08\";\n}\n.fe-zoom-out:before {\n  content: \"\\ea09\";\n}\n"
  },
  {
    "path": "routes/DashboardRoutes.js",
    "content": "import { v4 as uuid } from 'uuid';\n/**\n *  All Dashboard Routes\n *\n *  Understanding name/value pairs for Dashboard routes\n *\n *  Applicable for main/root/level 1 routes\n *  icon \t\t: String - It's only for main menu or you can consider 1st level menu item to specify icon name.\n *\n *  Applicable for main/root/level 1 and subitems routes\n * \tid \t\t\t: Number - You can use uuid() as value to generate unique ID using uuid library, you can also assign constant unique ID for react dynamic objects.\n *  title \t\t: String - If menu contains childern use title to provide main menu name.\n *  badge \t\t: String - (Optional - Default - '') If you specify badge value it will be displayed beside the menu title or menu item.\n * \tbadgecolor \t: String - (Optional - Default - 'primary' ) - Used to specify badge background color.\n *\n *  Applicable for subitems / children items routes\n *  name \t\t: String - If it's menu item in which you are specifiying link, use name ( don't use title for that )\n *  children\t: Array - Use to specify submenu items\n *\n *  Used to segrigate menu groups\n *  grouptitle : Boolean - (Optional - Default - false ) If you want to group menu items you can use grouptitle = true,\n *  ( Use title : value to specify group title  e.g. COMPONENTS , DOCUMENTATION that we did here. )\n *\n */\n\nexport const DashboardMenu = [\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Dashboard',\n\t\ticon: 'home',\n\t\tlink: '/'\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'LAYOUTS & PAGES',\n\t\tgrouptitle: true\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Pages',\n\t\ticon: 'layers',\n\t\tchildren: [\n\t\t\t{ id: uuid(), link: '/pages/profile', name: 'Profile' },\n\t\t\t{ id: uuid(), link: '/pages/settings', name: 'Settings'},\n\t\t\t{ id: uuid(), link: '/pages/billing', name: 'Billing' },\n\t\t\t{ id: uuid(), link: '/pages/pricing', name: 'Pricing'},\n\t\t\t{ id: uuid(), link: '/not-found', name: '404 Error' }\n\t\t]\n\t},\t\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Authentication',\n\t\ticon: 'lock',\n\t\tchildren: [\n\t\t\t{ id: uuid(), link: '/authentication/sign-in', name: 'Sign In' },\n\t\t\t{ id: uuid(), link: '/authentication/sign-up', name: 'Sign Up' },\n\t\t\t{ id: uuid(), link: '/authentication/forget-password', name: 'Forget Password'}\t\t\t\n\t\t]\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Layouts',\n\t\ticon: 'layout',\n\t\tlink: '/layout-vertical'\n\t},\t\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'UI COMPONENTS',\n\t\tgrouptitle: true\n\t},\t\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Components',\n\t\ticon: 'monitor',\n\t\tchildren: [\n\t\t\t{ id: uuid(), link: '/components/accordions', name: 'Accordions' },\n\t\t\t{ id: uuid(), link: '/components/alerts', name: 'Alerts' },\n\t\t\t{ id: uuid(), link: '/components/badges', name: 'Badges' },\n\t\t\t{ id: uuid(), link: '/components/breadcrumbs', name: 'Breadcrumbs' },\n\t\t\t{ id: uuid(), link: '/components/buttons', name: 'Buttons' },\n\t\t\t{ id: uuid(), link: '/components/button-group', name: 'ButtonGroup' },\n\t\t\t{ id: uuid(), link: '/components/cards', name: 'Cards' },\n\t\t\t{ id: uuid(), link: '/components/carousels', name: 'Carousel' },\n\t\t\t{ id: uuid(), link: '/components/close-button', name: 'Close Button' },\n\t\t\t{ id: uuid(), link: '/components/collapse', name: 'Collapse' },\n\t\t\t{ id: uuid(), link: '/components/dropdowns', name: 'Dropdowns' },\n\t\t\t{ id: uuid(), link: '/components/list-group', name: 'Listgroup' },\n\t\t\t{ id: uuid(), link: '/components/modal', name: 'Modal' },\n\t\t\t{ id: uuid(), link: '/components/navs', name: 'Navs' },\n\t\t\t{ id: uuid(), link: '/components/navbar', name: 'Navbar' },\n\t\t\t{ id: uuid(), link: '/components/offcanvas', name: 'Offcanvas' },\n\t\t\t{ id: uuid(), link: '/components/overlays', name: 'Overlays' },\n\t\t\t{ id: uuid(), link: '/components/pagination', name: 'Pagination' },\n\t\t\t{ id: uuid(), link: '/components/popovers', name: 'Popovers' },\n\t\t\t{ id: uuid(), link: '/components/progress', name: 'Progress' },\n\t\t\t{ id: uuid(), link: '/components/spinners', name: 'Spinners' },\n\t\t\t{ id: uuid(), link: '/components/tables', name: 'Tables' },\n\t\t\t{ id: uuid(), link: '/components/toasts', name: 'Toasts' },\n\t\t\t{ id: uuid(), link: '/components/tooltips', name: 'Tooltips' }\n\t\t]\n\t},\t\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Menu Level',\n\t\ticon: 'corner-left-down',\n\t\tchildren: [\n\t\t\t{ \n\t\t\t\tid: uuid(), \n\t\t\t\tlink: '#', \n\t\t\t\ttitle: 'Two Level',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ id: uuid(), link: '#', name: 'NavItem 1'},\n\t\t\t\t\t{ id: uuid(), link: '#', name: 'NavItem 2' }\n\t\t\t\t]\n\t\t\t},\n\t\t\t{ \n\t\t\t\tid: uuid(), \n\t\t\t\tlink: '#', \n\t\t\t\ttitle: 'Three Level',\n\t\t\t\tchildren: [\n\t\t\t\t\t{ \n\t\t\t\t\t\tid: uuid(), \n\t\t\t\t\t\tlink: '#', \n\t\t\t\t\t\ttitle: 'NavItem 1',\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t{ id: uuid(), link: '#', name: 'NavChildItem 1'},\n\t\t\t\t\t\t\t{ id: uuid(), link: '#', name: 'NavChildItem 2'}\n\t\t\t\t\t\t]\n\t\t\t\t\t},\n\t\t\t\t\t{ id: uuid(), link: '#', name: 'NavItem 2' }\n\t\t\t\t]\n\t\t\t}\n\t\t]\n\t},\t\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Documentation',\n\t\tgrouptitle: true\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Docs',\n\t\ticon: 'clipboard',\n\t\tlink: '/documentation'\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Changelog',\n\t\ticon: 'git-pull-request',\n\t\tlink: '/changelog'\n\t},\n\t{\n\t\tid: uuid(),\n\t\ttitle: 'Download',\n\t\ticon: 'download',\n\t\tlink: 'https://codescandy.gumroad.com/l/dashui-nextjs'\n\t}\n];\n\nexport default DashboardMenu;\n"
  },
  {
    "path": "styles/_user-variables.scss",
    "content": "//\n// user-variables.scss\n// Use this to overwrite Bootstrap and Dashui variables\n//\n// Example of a variable override to change Dashui primary color\n// Remove the \"//\" to comment it in and see it in action!\n// $primary: #000;\n"
  },
  {
    "path": "styles/_user.scss",
    "content": "// \n// user.scss\n// Use this to write your custom SCSS\n//"
  },
  {
    "path": "styles/theme/_theme.scss",
    "content": "// Components\n@import \"components/_navbar-vertical.scss\";\n@import \"components/_navbar.scss\";\n@import \"components/_layout.scss\";\n@import \"components/_nav.scss\";\n@import \"components/_scrollspy.scss\";\n@import \"components/_reboot.scss\";\n@import \"components/_docs.scss\";\n@import \"components/_card.scss\";\n@import \"components/_avatar.scss\";\n@import \"components/_button.scss\";\n@import \"components/_social-button.scss\";\n@import \"components/_dropdown.scss\";\n@import \"components/_forms.scss\";\n@import \"components/_badge.scss\";\n@import \"components/_table.scss\";\n@import \"components/_sidenav.scss\";\n\n\n// Vendors\n @import \"vendor/apexChart/_apexchart.scss\";\n @import \"vendor/prismJs/_prism.scss\";\n"
  },
  {
    "path": "styles/theme/_utilities.scss",
    "content": "//\n// utilities.scss\n// Extended from Bootstrap\n//\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variables\";\n@import \"~bootstrap/scss/variables-dark\";\n@import \"~bootstrap/scss/maps\";\n@import \"~bootstrap/scss/mixins\";\n@import \"~bootstrap/scss/utilities\";\n\n\n$utilities: () !default;\n\n$utilities: map-merge(\n  $utilities,\n  (\n    \"font-weight\": (\n      property: font-weight,\n      class: fw,\n      values: (\n        light: $font-weight-light,\n        lighter: $font-weight-lighter,\n        normal: $font-weight-normal,\n        semi-bold: $font-weight-semi-bold,\n        medium: $font-weight-medium,\n        bold: $font-weight-bold,\n        bolder: $font-weight-bolder,\n      ),\n    ),\n    \"line-height\": (\n      property: line-height,\n      class: lh,\n      values: (\n        1: 1,\n        2: 1.5,\n        3: 1.8,\n        sm: $line-height-sm,\n        base: $line-height-base,\n        md: $line-height-md,\n        lg: $line-height-lg,\n      ),\n    ),\n    \"letter-spacing\": (\n      property: letter-spacing,\n      class: ls,\n      values: (\n        xs: $letter-spacing-xs,\n        sm: $letter-spacing-sm,\n        base: $letter-spacing-base,\n        md: $letter-spacing-md,\n        lg: $letter-spacing-lg,\n        xl: $letter-spacing-xl,\n        xxl: $letter-spacing-xxl,\n      ),\n    ),\n    \"width\": (\n      property: width,\n      responsive: true,\n      class: w,\n      values: (\n        15: 15%,\n        25: 25%,\n        30: 30%,\n        40: 40%,\n        50: 50%,\n        65: 65%,\n        75: 75%,\n        100: 100%,\n        auto: auto,\n      ),\n    ),\n    \"max-width\": (\n      property: max-width,\n      responsive: true,\n      class: mw,\n      values: (\n        25: 25%,\n        30: 30%,\n        40: 40%,\n        50: 50%,\n        65: 65%,\n        75: 75%,\n        100: 100%,\n        auto: auto,\n      ),\n    ),\n    \"viewport-width\": (\n      property: width,\n      responsive: true,\n      class: vw,\n      values: (\n        100: 100vw,\n      ),\n    ),\n    \"min-viewport-width\": (\n      property: min-width,\n      responsive: true,\n      class: min-vw,\n      values: (\n        100: 100vw,\n      ),\n    ),\n    \"height\": (\n      property: height,\n      responsive: true,\n      class: h,\n      values: (\n        25: 25%,\n        30: 30%,\n        40: 40%,\n        50: 50%,\n        65: 65%,\n        75: 75%,\n        100: 100%,\n        auto: auto,\n      ),\n    ),\n    \"max-height\": (\n      property: max-height,\n      responsive: true,\n      class: mh,\n      values: (\n        25: 25%,\n        30: 30%,\n        40: 40%,\n        50: 50%,\n        65: 65%,\n        75: 75%,\n        100: 100%,\n        auto: auto,\n      ),\n    ),\n    \"viewport-height\": (\n      property: height,\n      responsive: true,\n      class: vh,\n      values: (\n        100: 100vh,\n      ),\n    ),\n    \"min-viewport-height\": (\n      property: min-height,\n      responsive: true,\n      class: min-vh,\n      values: (\n        100: 100vh,\n      ),\n    ),\n\n    \"z-index\": (\n      property: z-index,\n      class: z,\n      values: (\n        0: 0,\n        1: 1,\n        2: 2,\n        3: 3,\n        4: 4,\n        5: 5,\n      ),\n    ),\n\n    \"color\": (\n      property: color,\n      class: text,\n      values:\n        map-merge(\n          $theme-colors,\n          (\n            \"gray-100\": $gray-100,\n            \"gray-200\": $gray-200,\n            \"gray-300\": $gray-300,\n            \"gray-400\": $gray-400,\n            \"gray-500\": $gray-500,\n            \"gray-600\": $gray-600,\n            \"gray-700\": $gray-700,\n            \"gray-800\": $gray-800,\n            \"gray-900\": $gray-900,\n            \"white\": $white,\n            \"body\": $body-color,\n            \"muted\": $text-muted,\n            \"black-50\": rgba($black, 0.5),\n            \"white-50\": rgba($white, 0.5),\n            \"reset\": inherit,\n          )\n        ),\n    ),\n    // scss-docs-end utils-color\n    // scss-docs-start utils-bg-color\n    \"background-color\":\n      (\n        property: background-color,\n        class: bg,\n        values:\n          map-merge(\n            $theme-colors,\n            (\n              \"gray-100\": $gray-100,\n              \"gray-200\": $gray-200,\n              \"gray-300\": $gray-300,\n              \"gray-400\": $gray-400,\n              \"gray-500\": $gray-500,\n              \"gray-600\": $gray-600,\n              \"gray-700\": $gray-700,\n              \"gray-800\": $gray-800,\n              \"gray-900\": $gray-900,\n              \"body\": $body-bg,\n              \"white\": $white,\n              \"transparent\": transparent,\n            )\n          ),\n      ),\n  )\n);\n\n@import \"~bootstrap/scss/utilities/api\";\n\n// Utilities\n\n@import \"utilities/_background.scss\";\n@import \"utilities/_shadows.scss\";\n@import \"utilities/_position.scss\";\n@import \"utilities/_border.scss\";\n@import \"utilities/_icon-shape.scss\";\n@import \"utilities/_text.scss\";\n"
  },
  {
    "path": "styles/theme/_variables.scss",
    "content": "$white: #fff !default;\n$gray-100: #f1f5f9 !default;\n$gray-200: #f4f6f8 !default;\n$gray-300: #dfe3e8 !default;\n$gray-400: #c4cdd5 !default;\n$gray-500: #919eab !default;\n$gray-600: #637381 !default;\n$gray-700: #454f5b !default;\n$gray-800: #212b36 !default;\n$gray-900: #161c24 !default;\n$black: #000 !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #f59e0b !default;\n$green: #198754 !default;\n$teal: #20c997 !default;\n$cyan: #0ea5e9 !default;\n$primary: #624bff !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-800 !default;\n\n// Light color\n$light-primary: #e0dcfe !default; // NEW\n$light-secondary: #e9ecef !default; // NEW\n$light-success: #eaf6ec !default; // NEW\n$light-danger: #fbebec !default; // NEW\n$light-warning: #fff3cd !default; // NEW\n$light-info: #e7fafe !default; // NEW\n$light-dark: #d1cfd8 !default; // NEW\n\n// Dark color\n$dark-primary: #593cc1 !default; // NEW\n$dark-secondary: #5c596d !default; // NEW\n$dark-success: #139a74 !default; // NEW\n$dark-danger: #ae302e !default; // NEW\n$dark-warning: #c28135 !default; // NEW\n$dark-info: #51a0c2 !default; // NEW\n\n$theme-colors: () !default;\n$theme-colors: (\n    \"primary\": $primary,\n    \"secondary\": $secondary,\n    \"success\": $success,\n    \"info\": $info,\n    \"warning\": $warning,\n    \"danger\": $danger,\n    \"light\": $light,\n    \"dark\": $dark,\n    \"white\": $white,\n    \"light-primary\": $light-primary,\n    \"light-danger\": $light-danger,\n    \"light-info\": $light-info,\n    \"light-warning\": $light-warning,\n    \"light-secondary\": $light-secondary,\n    \"light-success\": $light-success,\n    \"light-dark\": $light-dark,\n    \"dark-primary\": $dark-primary,\n    \"dark-warning\": $dark-warning,\n    \"dark-info\": $dark-info,\n    \"dark-danger\": $dark-danger,\n    \"dark-success\": $dark-success,\n    \"dark-secondary\": $dark-secondary,\n);\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-color: $gray-600 !default;\n// Typography\n// Font, line-height, and color for body text, headings, and more.\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: \"Inter\", \"sans-serif\" !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-heading: $font-family-sans-serif;\n// stylelint-enable value-keyword-case\n$font-size-base: 0.9375rem !default; // Assumes the browser default, typically `15px`\n$font-size-lg: $font-size-base * 1.25 !default;\n$font-size-sm: $font-size-base * 0.875 !default;\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-medium: 500 !default;\n$font-weight-semi-bold: 500 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n$font-weight-base: $font-weight-normal !default;\n$line-height-base: 1.5 !default;\n$link-hover-decoration: none !default;\n\n$h1-font-size: 2.25rem !default;\n$h2-font-size: 1.875rem !default;\n$h3-font-size: 1.5rem !default;\n$h4-font-size: 1.125rem !default;\n$h5-font-size: 0.938rem !default;\n$h6-font-size: 0.75rem !default;\n\n$headings-color: $gray-800 !default;\n\n// Line height\n$line-height-base: 1.6 !default;\n$line-height-1: 1 !default;\n$line-height-2: 2 !default;\n$line-height-sm: 1.2 !default;\n$line-height-md: 1.6 !default;\n$line-height-lg: 1.8 !default;\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n$spacer: 1rem !default;\n$spacers: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$spacers: map-merge(\n    (\n        0: 0,\n        1: (\n            $spacer * 0.25,\n        ),\n        // 4px\n        2:\n            (\n                $spacer * 0.5,\n            ),\n        // 8px\n        3:\n            (\n                $spacer * 1,\n            ),\n        // 16px\n        4:\n            (\n                $spacer * 1.25,\n            ),\n        // 20px\n        5:\n            (\n                $spacer * 1.5,\n            ),\n        // 24px\n        6:\n            (\n                $spacer * 2,\n            ),\n        // 32px\n        7:\n            (\n                $spacer * 2.5,\n            ),\n        // 40px\n        8:\n            (\n                $spacer * 3,\n            ),\n        // 48px\n        9:\n            (\n                $spacer * 3.5,\n            ),\n        // 56px\n        10:\n            (\n                $spacer * 4,\n            ),\n        // 64px\n        11:\n            (\n                $spacer * 4.5,\n            ),\n        // 72px\n        12:\n            (\n                $spacer * 5,\n            ),\n        // 80px\n        13:\n            (\n                $spacer * 5.5,\n            ),\n        // 88px\n        14:\n            (\n                $spacer * 6,\n            ),\n        // 96px\n        15:\n            (\n                $spacer * 6.5,\n            ),\n        // 104px\n        16:\n            (\n                $spacer * 7,\n            ),\n        // 112px\n        17:\n            (\n                $spacer * 7.5,\n            ),\n        // 120px\n        18:\n            (\n                $spacer * 8,\n            ),\n        // 128px\n        19:\n            (\n                $spacer * 8.5,\n            ),\n        // 136px\n        20:\n            (\n                $spacer * 9,\n            ),\n        // 144px\n        21:\n            (\n                $spacer * 9.5,\n            ),\n        // 152px\n        22:\n            (\n                $spacer * 10,\n            ),\n        // 160px\n        23:\n            (\n                $spacer * 12,\n            ),\n        // 288px\n    ),\n    $spacers\n);\n$border-radius: 0.375rem !default;\n$border-radius-lg: 0.5rem !default;\n$border-radius-sm: 0.2rem !default;\n\n$smooth-shadow-sm: 0px 2px 4px rgba(0, 0, 20, 0.08), 0px 1px 2px rgba(0, 0, 20, 0.08) !default;\n\n$smooth-shadow-md: 0 1px 2px rgba(21, 30, 40, 0.07), 0 2px 4px rgba(21, 30, 40, 0.07), 0 4px 8px rgba(21, 30, 40, 0.07),\n    0 8px 16px rgba(21, 30, 40, 0.07), 0 16px 32px rgba(21, 30, 40, 0.07), 0 32px 64px rgba(21, 30, 40, 0.07) !default;\n\n$smooth-shadow-lg: 0 1px 1px rgba(21, 30, 40, 0.11), 0 2px 2px rgba(21, 30, 40, 0.11), 0 4px 4px rgba(21, 30, 40, 0.11),\n    0 8px 8px rgba(21, 30, 40, 0.11), 0 16px 16px rgba(21, 30, 40, 0.11), 0 32px 32px rgba(21, 30, 40, 0.11) !default;\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n$input-btn-padding-y: 0.5rem !default;\n$input-btn-padding-x: 1rem !default;\n$input-btn-font-family: null !default;\n$btn-font-weight: $font-weight-medium !default;\n\n$form-label-color: $gray-800 !default;\n\n// Avatar\n$avatar-size-xs: 1.5rem !default;\n$avatar-size-sm: 2rem !default;\n$avatar-size-md: 2.5rem !default;\n$avatar-size-lg: 3.5rem !default;\n$avatar-size-xl: 5rem !default;\n$avatar-size-xxl: 7.5rem !default;\n\n// Icon\n$icon-size-xxs: 0.875rem !default;\n$icon-size-xs: 1rem !default;\n$icon-size-sm: 1.5rem !default;\n$icon-size-md: 2.5rem !default;\n$icon-size-lg: 3rem !default;\n$icon-size-xl: 3.5rem !default;\n$icon-size-xxl: 4rem !default;\n$enable-responsive-font-sizes: false !default;\n\n// Position\n// Define the edge positioning anchors of the position utilities.\n$position-values: (\n    0: 0,\n    1: 1,\n    2: 2,\n    50: 50%,\n    100: 100%,\n) !default;\n\n// Negative margins\n$enable-negative-margins: true !default;\n\n// Link Decoration\n\n$link-decoration: none !default;\n\n// grid gutter space\n$grid-gutter-width: 1.5rem !default;\n\n// Cards\n\n$card-spacer-y: 1.25rem !default;\n$card-spacer-x: 1.25rem !default;\n$card-inner-border-radius: 0.5rem !default;\n$card-title-spacer-y: $spacer * 1.5 !default;\n\n// Letter Spacing\n\n$letter-spacing-sm: -0.04em;\n$letter-spacing-xs: -0.08em;\n$letter-spacing-base: 0em;\n$letter-spacing-md: 0.1em;\n$letter-spacing-lg: 0.15em;\n$letter-spacing-xl: 0.2em;\n$letter-spacing-xxl: 0.25em;\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-head-color: $gray-700 !default;\n\n$table-cell-padding-y: 0.75rem !default;\n$table-cell-padding-x: 1.5rem !default;\n$table-cell-padding-y-sm: 0.3rem !default;\n$table-cell-padding-x-sm: 0.6rem !default;\n\n$table-hover-bg: rgba($gray-100, 0.7) !default;\n\n// table striped\n\n$table-striped-bg-factor: 1 !default;\n$table-striped-bg: rgba($gray-100, $table-striped-bg-factor) !default;\n\n// table active\n\n$table-active-bg-factor: 1 !default;\n$table-active-bg: rgba($gray-100, $table-active-bg-factor) !default;\n\n$table-group-separator-color: $gray-200 !default;\n"
  },
  {
    "path": "styles/theme/components/_avatar.scss",
    "content": "// Avatar\n.avatar {\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    height: 3rem;\n}\n\n// Avatar Size\n.avatar-xs {\n    width: $avatar-size-xs;\n    height: $avatar-size-xs;\n}\n\n.avatar-sm {\n    width: $avatar-size-sm;\n    height: $avatar-size-sm;\n}\n\n.avatar-md {\n    width: $avatar-size-md;\n    height: $avatar-size-md;\n}\n\n.avatar-lg {\n    width: $avatar-size-lg;\n    height: $avatar-size-lg;\n}\n\n.avatar-xl {\n    width: $avatar-size-xl;\n    height: $avatar-size-xl;\n}\n\n.avatar-xxl {\n    width: $avatar-size-xxl;\n    height: $avatar-size-xxl;\n}\n\n// Avatar img\n.avatar img {\n    width: 100%;\n    height: 100%;\n    -o-object-fit: cover;\n    object-fit: cover;\n}\n\n.avatar-indicators {\n    position: relative;\n}\n\n.avatar-indicators:before {\n    content: \"\";\n    position: absolute;\n    bottom: 0px;\n    right: 5%;\n    width: 30%;\n    height: 30%;\n    border-radius: 50%;\n    border: 2px solid $white;\n    display: table;\n}\n\n.avatar-xxl.avatar-indicators:before {\n    bottom: 5px;\n    right: 17%;\n    width: 16%;\n    height: 16%;\n}\n\n// Avatar indicators\n.avatar-offline:before {\n    background-color: $gray-400;\n}\n\n.avatar-online:before {\n    background-color: $success;\n}\n\n.avatar-away:before {\n    background-color: $warning;\n}\n\n.avatar-busy:before {\n    background-color: $danger;\n}\n\n.avatar-info:before {\n    background-color: $info;\n}\n\n// Avatar intials\n.avatar-initials {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -ms-flex-align: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  text-transform: uppercase;\n}\n// Color varient\n\n.avatar-primary .avatar-initials {\n  color: $white;\n  background-color: $primary;\n}\n.avatar-secondary .avatar-initials {\n  color: $white;\n  background-color: $secondary;\n}\n.avatar-success .avatar-initials {\n  color: $white;\n  background-color: $success;\n}\n.avatar-warning .avatar-initials {\n  color: $white;\n  background-color: $warning;\n}\n.avatar-info .avatar-initials {\n  color: $white;\n  background-color: $info;\n}\n.avatar-danger .avatar-initials {\n  color: $white;\n  background-color: $danger;\n}\n.avatar-light .avatar-initials {\n  color: $white;\n  background-color: $light;\n}\n.avatar-dark .avatar-initials {\n  color: $white;\n  background-color: $dark;\n}\n\n\n// Avatar Group\n.avatar-group .avatar+.avatar {\n    margin-left: -1.2rem;\n}\n\n.avatar-group .avatar:hover {\n    z-index: 2;\n}\n\n// Avatar border\n.avatar-group img,\n.avatar-group .avatar .avatar-initials {\n    border: 2px solid $white;\n}\n\n// Image aspect ratio 4:3\n// .img-4by3-xxl {\n//   width: $img-4by3-xxl;\n// }\n// .img-4by3-xl {\n//   width: $img-4by3-xl;\n// }\n// .img-4by3-lg {\n//   width: $img-4by3-lg;\n// }\n// .img-4by3-md {\n//   width: $img-4by3-md;\n// }\n// .img-4by3-sm {\n//   width: $img-4by3-sm;\n// }\n// .img-4by3-xs {\n//   width: $img-4by3-xs;\n// }"
  },
  {
    "path": "styles/theme/components/_badge.scss",
    "content": "//\n// Extended from bootstrap\n//\n\n\n// Badge dot\n\n.badge-dot{\n    font-size: 0;\n    vertical-align: middle;\n    padding: 0;\n    border-radius: 50%;\n    line-height: 1;\n    height: .5rem;\n    min-height: .5rem;\n    width: .5rem;\n    min-width: .5rem;\n    display: inline-block !important;\n\n}"
  },
  {
    "path": "styles/theme/components/_button.scss",
    "content": "//\n// Extended from bootstrap\n//\n\n// btn outline white\n.btn-outline-white {\n  border-color: $gray-300;\n  color: $body-color;\n  &:hover,\n  &:focus {\n    background-color: $gray-100;\n    border-color: $gray-400;\n    color: $body-color;\n  }\n  &.active {\n    background-color: $gray-100;\n    border-color: $gray-400;\n    color: $body-color;\n  }\n}\n\n// btn icon\n.btn-icon {\n  position: relative;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -ms-flex-align: center;\n  align-items: center;\n  font-size: 0.92969rem;\n  font-weight: 400;\n  width: 2.5rem;\n  height: 2.5rem;\n  padding: 0;\n}\n\n.btn-icon.btn-xs {\n  font-size: 0.75rem;\n  width: 1.53125rem;\n  height: 1.53125rem;\n}\n\n.btn-icon.btn-sm {\n  font-size: 0.875rem;\n  width: 2.1875rem;\n  height: 2.1875rem;\n}\n\n.btn-icon.btn-lg {\n  font-size: 1rem;\n  width: 3.36875rem;\n  height: 3.36875rem;\n}\n\n.btn-float-button {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n}\n"
  },
  {
    "path": "styles/theme/components/_card.scss",
    "content": "//\n// Extended from bootstrap\n//\n// card\n\n\n.card{\n    box-shadow: $smooth-shadow-sm;\n    border: 0px;\n    border-radius: $border-radius-lg;\n}"
  },
  {
    "path": "styles/theme/components/_docs.scss",
    "content": "\n// Copy Button\n\n.copy-button {\n  cursor: pointer;\n  border: 0;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  text-transform: capitalize;\n  font-weight: 600;\n  padding: 0.25rem 0.5rem;\n  color: $primary;\n  background-color: $white;\n  position: absolute;\n  top: 0.875rem;\n  right: 0.625rem;\n  border-radius: 0.25rem;\n  border: 1px solid $primary;\n  &:hover {\n    outline: 0;\n    background-color: $white;\n    color: $primary;\n  }\n  &:focus {\n    outline: 0;\n    background-color: $white;\n    color: $primary;\n  }\n  &:active {\n    outline: 0;\n    background-color: $white;\n    color: $primary;\n  }\n}"
  },
  {
    "path": "styles/theme/components/_dropdown.scss",
    "content": "\n//\n// Extended from bootstrap dropdown\n//\n\n// Dropdown menu\n.dropdown-menu {\n    font-size: 0.875rem;\n    line-height: 1.375rem;\n    color: $gray-700;\n    border: none;\n    box-shadow: 0px 0px 1px rgba(60, 66, 87, 0.05), 0px 3px 6px rgba(60, 66, 87, 0.1), 0px 9px 24px rgba(60, 66, 87, 0.2);\n    border-radius: 0.5rem;\n    z-index: 1040;\n}\n\n// Dropdown header\n.dropdown-header {\n    color: $gray-500;\n    padding: 0.25rem 1.2rem;\n    margin-bottom: 0.2rem;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    font-size: 0.6875rem;\n    font-weight: 500;\n}\n\n// Dropdown text\n.dropdown-text {\n    padding: 0.25rem 1.2rem;\n    color: $gray-500;\n    font-size: 0.75rem;\n    line-height: 1.4;\n}\n\n// Dropdown item\n.dropdown-item {\n    font-size: 0.875rem;\n    line-height: 28px;\n    font-weight: 500;\n    color: $gray-900;\n    padding: 0.125rem 1.2rem;\n    &:hover {\n        color: $primary;\n        text-decoration: none;\n        background-color: $light;\n        border-radius: 0rem;\n    }\n    &.active {\n        color: $primary;\n        text-decoration: none;\n        background-color: $light;\n    }\n    &:last-child {\n        border-bottom: 0rem;\n    }\n    &:focus {\n        color: $primary;\n        text-decoration: none;\n        background-color: $gray-300;\n        border-radius: 0rem;\n        color: $primary;\n        text-decoration: none;\n        background-color: $light;\n        border-radius: 0rem;\n        .dropdown-toggle {\n            &::after {\n                color: $primary;\n            }\n        }\n        &:hover {\n            color: $primary;\n            text-decoration: none;\n            background-color: $light;\n            border-radius: 0rem;\n        }\n        &:active {\n            color: $black;\n            text-decoration: none;\n            background-color: $light;\n            border-radius: 0.25rem;\n        }\n    }\n    &:hover.dropdown-toggle {\n        &::after {\n            color: $primary;\n        }\n    }\n    &:hover {\n        color: $primary;\n        text-decoration: none;\n        background-color: $light;\n        border-radius: 0px;\n    }\n}\n\n// Dropdown menu sizes\n.dropdown-menu-xs {\n    min-width: 8rem !important;\n    border-radius: 0.5rem;\n}\n\n.dropdown-menu-md {\n    min-width: 17rem !important;\n    border-radius: 0.5rem;\n}\n\n.dropdown-menu-lg {\n    min-width: 22rem !important;\n    border-radius: 0.5rem;\n}\n\n.dropdown-menu-xl {\n    min-width: 24rem !important;\n    border-radius: 0.5rem;\n}\n\n// Dropdown toggle arrow\n.dropdown-toggle::after {\n    margin-left: 0.255em;\n    vertical-align: 0.255em;\n    font-family: \"Material Design Icons\" !important;\n    content: \"\\f0140\";\n    border-top: 0rem;\n    border-right: 0rem;\n    border-bottom: 0;\n    border-left: 0rem;\n    float: right;\n}\n\n// Dropup\n.dropup .dropdown-toggle::after {\n    display: inline-block;\n    margin-left: 0.255em;\n    vertical-align: 0.255em;\n    font-family: \"Material Design Icons\" !important;\n    content: \"\\f0143\";\n    border-top: 0rem;\n    border-right: 0rem;\n    border-bottom: 0;\n    border-left: 0rem;\n}\n\n// dropend\n.dropend .dropdown-toggle::after {\n    display: inline-block;\n    margin-left: 0.255em;\n    vertical-align: 0.255em;\n    font-family: \"Material Design Icons\" !important;\n    content: \"\\f0142\";\n    border-top: 0rem;\n    border-right: 0rem;\n    border-bottom: 0;\n    border-left: 0rem;\n}\n\n// dropstart\n.dropstart .dropdown-toggle::before {\n    display: inline-block;\n    margin-right: 0.255em;\n    font-family: \"Material Design Icons\" !important;\n    content: \"\\f0141\";\n    border-top: 0rem;\n    border-right: 0rem;\n    border-bottom: 0;\n    border-left: 0rem;\n}\n\n// Dropdown item icon\n.dropdown-item-icon {\n    display: inline-block;\n    opacity: 0.7;\n    font-size: 1rem;\n    width: 1.5rem;\n    color: $gray-600;\n}\n\n// Responsive breakpoints for dropdown\n@media (min-width: 990px) {\n    .dropstart-lg {\n        position: relative;\n        .dropdown-menu {\n            top: 0;\n            right: 100%;\n            margin-top: 0;\n            margin-right: 0.125rem;\n        }\n    }\n    .dropstart-toggle-none.dropstart .dropdown-toggle::before {\n        display: none;\n    }\n}\n\n\n\n\n// Toggle none\n\n.dropdown-toggle-none .dropdown-toggle::before {\n    display: none;\n}\n\n\n\n\n// Hover dropdown submenu\n\n.dropdown-animation.dropdown-submenu {\n    .dropdown-menu {\n      top: 0;\n      right: 100%;\n      margin-top: 0;\n      margin-right: 0.125rem;\n    }\n    .dropdown-menu {\n      display: block;\n      visibility: hidden;\n      opacity: 0;\n      -webkit-transform: translateY(20px);\n      -ms-transform: translateY(20px);\n      transform: translateY(20px);\n      -webkit-transition: all 0.3s ease-in;\n      -o-transition: all 0.3s ease-in;\n      transition: all 0.3s ease-in;\n    }\n    &:hover {\n      > .dropdown-menu {\n        -webkit-transform: scaleY(1);\n        -ms-transform: scaleY(1);\n        transform: scaleY(1);\n        opacity: 1;\n        visibility: visible;\n      }\n    }\n  }"
  },
  {
    "path": "styles/theme/components/_forms.scss",
    "content": "//\n// Extended from bootstrap\n//\n// form\n\n.form-control-flush {\n  border-top: 0px;\n  border-left: 0px;\n  border-right: 0px;\n  padding-left: 0px;\n  border-radius: 0px;\n\n  &:focus {\n    color: #495057;\n    background-color: #fff;\n    border-bottom-color: $gray-400;\n    outline: 0;\n    box-shadow: none;\n  }\n}\n"
  },
  {
    "path": "styles/theme/components/_layout.scss",
    "content": "// layouts\n\n\n\n// Header\n\n.header {\n    .navbar {\n      padding: 0.625rem 1.5rem;\n      #nav-toggle {\n        font-size: 20px;\n        color: $gray-700;\n        line-height: 0.5;\n      }\n      .navbar-nav {\n        @media (max-width: 576px) {\n          flex-direction: row;\n        }\n        @media (min-width: 576px) and (max-width: 767.98px) {\n          flex-direction: row;\n        }\n        @media (min-width: 768px) and (max-width: 991.98px) {\n          flex-direction: row;\n        }\n      }\n    }\n  }\n\n\n\n\n  // Layouts\n\n\n  // Dashboard wrapper\n\n  #db-wrapper {\n    overflow-x: hidden;\n    display: flex;\n  }\n\n\n\n  // Dashboard page content\n\n  #page-content {\n    min-height: 100vh;\n    min-width: 100vw;\n    margin-left: 15.625rem;\n    -webkit-transition: margin 0.25s ease-out;\n    -moz-transition: margin 0.25s ease-out;\n    -o-transition: margin 0.25s ease-out;\n    transition: margin 0.25s ease-out;\n  }\n\n\n\n\n  // Dashboard navbar vertical toggled\n\n  #db-wrapper.toggled .navbar-vertical {\n    margin-left: 0;\n  }\n\n\n\n  // Dashboard page content toggled\n\n  #db-wrapper.toggled #page-content {\n    margin-left: 0;\n  }\n\n  #db-wrapper.toggled #page-content .inner-wrapper-sticky {\n   left:20px !important;\n  }\n\n  #db-wrapper.toggled #page-content .inner-wrapper-sticky .setting-nav {\n\n      width: 354px;\n\n      @media(max-width: 1024px){\n        width: 204px;\n      }\n  }\n\n\n\n  // Media query for layout\n\n  @media (max-width: 576px) {\n    #page-content {\n      margin-left: 0rem;\n    }\n\n    #db-wrapper.toggled {\n      #page-content {\n        margin-left: 15.6875rem;\n      }\n    }\n  }\n\n\n  @media (min-width: 768px) {\n    .navbar-vertical {\n      margin-left: 0rem;\n    }\n    #page-content {\n      min-width: 0rem;\n      width: 100%;\n    }\n    #db-wrapper.toggled .navbar-vertical {\n      margin-left: -16rem;\n    }\n  }\n\n\n  @media (min-width: 576px) and (max-width: 767.98px) {\n    #page-content {\n      margin-left: 0rem;\n    }\n    #db-wrapper.toggled {\n      #page-content {\n        margin-left: 15.6875rem;\n      }\n    }\n  }\n\n\n\n\n\n  "
  },
  {
    "path": "styles/theme/components/_nav.scss",
    "content": "// Bottom line nav\n.nav-line-bottom {\n  border-bottom: 1px solid $gray-200;\n  .nav-item {\n    .nav-link {\n      color: $gray-600;\n      border-radius: 0px;\n      margin-bottom: -1px;\n      padding: .875rem 1.25rem;\n      font-weight: 500;\n      @media (max-width: 576px) {\n        padding: 0.8rem;\n      }\n      &.active {\n        color: $primary;\n        background-color: transparent;\n        border-bottom: 1px solid $primary;\n        @media (max-width: 576px) {\n          padding: 0.747rem;\n        }\n      }\n      &:hover {\n        color: $primary;\n        background-color: transparent;\n        border-bottom: 1px solid $primary;\n      }\n      .badge {\n        line-height: 1.4;\n      }\n    }\n  }\n  @media (max-width: 576px) {\n    overflow-x: scroll;\n    flex-wrap: nowrap;\n    overflow-y: hidden;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n\n// Nav line bottom tab (.nav-lb-tab)\n.nav-lb-tab {\n  border-bottom: 1px solid $gray-300;\n  @media (max-width: 576px) {\n    overflow-x: scroll;\n    flex-wrap: nowrap;\n    overflow-y: hidden;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n  .nav-item {\n    margin: 0rem 1.5rem;\n    .nav-link {\n      border-bottom: 2px solid transparent;\n      border-radius: 0px;\n      padding: 16px 0px;\n      margin-bottom: -1px;\n      font-weight: 500;\n      color: $gray-600;\n      white-space: nowrap;\n      &.active {\n        background-color: transparent;\n        border-bottom: 2px solid $primary;\n        color: $primary;\n      }\n      &:hover {\n        background-color: transparent;\n        border-bottom: 2px solid $primary;\n        color: $primary;\n      }\n    }\n  }\n}\n\n// Nav line top tab. (.nav-lt-tab)\n.nav-lt-tab {\n  border-top: 1px solid $gray-300;\n  @media (max-width: 768px) {\n    overflow-x: scroll;\n    flex-wrap: nowrap;\n    overflow-y: hidden;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n  .nav-item {\n    margin: 0rem 1rem;\n    margin-top: -0.0625rem;\n    .nav-link {\n      border-top: 2px solid transparent;\n      border-radius: 0px;\n      padding: 1rem 0rem;\n      font-weight: 500;\n\n      color: $gray-600;\n      &.active {\n        background-color: transparent;\n        border-top: 2px solid $primary;\n        color: $primary;\n      }\n      &:hover {\n        background-color: transparent;\n        border-top: 2px solid $primary;\n        color: $primary;\n      }\n    }\n  }\n}\n\n// nav email\n\n.nav-email-list {\n  .nav-item {\n    .nav-link {\n      color: $gray-600;\n      padding: 6px 10px;\n      border-radius: 8px;\n      margin-bottom: 4px;\n      font-weight: 500;\n\n      &:hover {\n        background-color: $gray-100;\n        color: $primary;\n      }\n      &.active {\n        background-color: $gray-100;\n        color: $primary;\n      }\n    }\n  }\n\n  .nav-text {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    font-weight: 500;\n  }\n}\n"
  },
  {
    "path": "styles/theme/components/_navbar-vertical.scss",
    "content": "// Navbar Vertcial\n\n.navbar-vertical {\n\n  margin-left: -17rem;\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: 250px;\n  padding: 0rem;\n  background-color: $gray-800;\n  border-right: 1px solid $gray-800;\n  -webkit-transition: margin 0.25s ease-out;\n  -moz-transition: margin 0.25s ease-out;\n  -o-transition: margin 0.25s ease-out;\n  transition: margin 0.25s ease-out;\n\n  .slimScrollDiv {\n    height: 100% !important;\n    overflow-y: auto;\n  }\n  .nav-scroller {\n    height: 100% !important;\n    overflow-y: auto;\n  }\n  .navbar-brand {\n    padding: 1rem 1.5rem 1.5rem;\n    margin-right: 0px;\n    display: block;\n    img {\n      height: 1.875rem;\n    }\n  }\n  .navbar-heading {\n      color: $gray-700;\n      padding: 1rem 1.5rem;\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 0.08rem;\n      font-weight: 700;\n  }\n  .navbar-nav {\n    .nav-item {\n      .nav-link {\n        padding: 0.5rem 1.5rem;\n        display: flex;\n        align-items: center;\n        color: $gray-500;\n        font-weight: 500;\n        line-height: 1.8;\n        -webkit-transition: all 0.5s;\n        white-space: nowrap;\n        transition: all 0.5s;\n        &:hover {\n          color: $gray-200;\n        }\n\n        &:hover .nav-icon {\n          color: $gray-200;\n          opacity: 1;\n        }\n\n        &.active {\n          color: $gray-200;\n\n        }\n\n        &.active .nav-icon {\n          color: $gray-200;\n          opacity: 1;\n        }\n      }\n      .nav-link[data-bs-toggle=\"collapse\"]{\n        position: relative;\n        &:after {\n          display: block;\n          content: \"\";\n          background: url(../../../public/fonts/feather-icons/icons/chevron-down.svg);          \n          font-family: Feather;\n          margin-left: auto;\n          transition: 0.5s ease;\n          position: absolute;\n          right: 1.5rem;\n          height: 24px;\n          width: 24px;\n          -webkit-filter: brightness(0) invert(1);\n          filter: brightness(0) invert(1);\n          transform: scale(0.7);\n        }\n\n      }\n\n\n    }\n    .nav-icon {\n      opacity: 0.6;\n      font-size: .875rem;\n      -webkit-transition: all 0.5s;\n      transition: all 0.5s;\n    }\n    .sub-nav-icon{\n      font-size: .35rem;\n      margin-right: .5rem;\n\n    }\n    .nav {\n      .nav-item {\n        .nav-link {\n          color: $gray-500;\n          padding: 0.25rem 3rem;\n          &:hover {\n            color: $white;\n          }\n          &.active {\n            color: $white;\n          }\n        }\n        .nav {\n          .nav-item {\n            .nav-link {\n              color: $gray-500;\n              padding: 0.25rem 3.5rem;\n\n              &:hover {\n                color: $white;\n              }\n              &.active {\n                color: $white;\n              }\n            }\n            .nav {\n              .nav-item {\n                .nav-link {\n                  color: $gray-500;\n                  padding: 0.25rem 4.2rem;\n                  &:hover {\n                    color: $white;\n                  }\n                  &.active {\n                    color: $white;\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n\n\n.collapse.in {\n    display: block;\n\n\n\n\n}\n"
  },
  {
    "path": "styles/theme/components/_navbar.scss",
    "content": "// navbar\n\n.navbar-classic {\n    background-color: #fff;\n    box-shadow: $smooth-shadow-sm;\n\n    .navbar-right-wrap {\n        .list-group-item {\n          padding: 1rem 1.25rem;\n        }\n      }\n      .nav-badge {\n        position: absolute;\n        top: -9px;\n        right: 3px;\n      }\n}\n// Responsive breakpoints\n@media (min-width: 1200px) {\n    .navbar-classic {\n      .dropdown-menu-end {\n        right: 0;\n        left: auto;\n      }\n      .dropdown-menu-start {\n        right: auto;\n        left: 0;\n      }\n      .dropdown-menu {\n        display: block;\n        visibility: hidden;\n        opacity: 0;\n        -webkit-transform: translateY(20px);\n        -ms-transform: translateY(20px);\n        transform: translateY(20px);\n        -webkit-transition: all 0.3s ease-in;\n        -o-transition: all 0.3s ease-in;\n        transition: all 0.3s ease-in;\n      }\n      .dropdown {\n        &:hover {\n          > .dropdown-menu {\n            -webkit-transform: scaleY(1);\n            -ms-transform: scaleY(1);\n            transform: scaleY(1);\n            opacity: 1;\n            visibility: visible;\n          }\n        }\n      }\n      .dropdown-submenu {\n        &:hover {\n          > .dropdown-menu {\n            -webkit-transform: scaleY(1);\n            -ms-transform: scaleY(1);\n            transform: scaleY(1);\n            opacity: 1;\n            visibility: visible;\n          }\n        }\n      }\n    }\n  }\n\n@media (max-width: 992px) {\n    .navbar-classic {\n      .navbar-nav {\n        .dropdown-menu {\n\n          margin: 0px;\n          .dropdown-submenu {\n            .dropdown-menu {\n              box-shadow: none;\n              margin: 0;\n            }\n          }\n        }\n      }\n      .nav-top-wrap {\n        flex-direction: row;\n        .dropdown {\n          position: static;\n        }\n        .dropdown-menu {\n          position: absolute;\n          margin: 0.25rem 0.75rem !important;\n          .dropdown-submenu .dropdown-menu {\n            position: relative;\n            top: -7px !important;\n            padding: 0px !important;\n          }\n        }\n      }\n    }\n  }"
  },
  {
    "path": "styles/theme/components/_reboot.scss",
    "content": "\n\nbody{\n    -webkit-font-smoothing: antialiased;\n\n}"
  },
  {
    "path": "styles/theme/components/_scrollspy.scss",
    "content": "// Scrollspy\n\n\n// Scrollspy\n\n.scrollspy-example {\n    position: relative;\n    height: 12.5rem;\n    margin-top: 0.5rem;\n    overflow: auto;\n  }\n  .scrollspy-example-2 {\n    position: relative;\n    height: 21.875rem;\n    overflow: auto;\n  }\n"
  },
  {
    "path": "styles/theme/components/_sidenav.scss",
    "content": "// Docs Sidebar\n\n\n\n// Docs breakpoints\n\n@media(max-width: 768px) {\n  .docs-content {\n    padding: 3.75rem 1.25rem 8.75rem 1.25rem;\n  }\n}\n@media(max-width: 768px) {\n  // Docs nav sidebar\n  .docs-nav-sidebar {\n    .navbar-toggler {\n      background-color: $white;\n    }\n    width: 100%;\n    position: relative;\n    right: 0rem;\n    top: 0;\n  }\n\n  // Docs wrapper\n\n  .docs-wrapper {\n    margin-left: 0rem;\n  }\n  .docs-main-wrapper {\n    .main-content {\n      margin-left: 0rem;\n      width: auto;\n    }\n  }\n  .docs-content {\n    padding: 0rem;\n  }\n}\n\n\n\n\n.doc-sidebar{\n  z-index: 2;\n  width: 13.625rem;\n  border-right: 1px solid $gray-300;\n  position: fixed;\n  height: 100%;\n  overflow: auto;\n  \n\n\n\n\n  @media(max-width:990px) {\n    width: 100%;\n    position: relative;\n    border: 0;\n    height: auto;\n\n  }\n  @media(min-width: 990px) and (max-width: 1200px) {\n    width: 10rem;\n\n  }\n\n.navbar-nav{\n  padding-top: 1rem;\n  .navbar-header {\n    margin-bottom: .5rem;\n    padding: 0rem 1rem;\n    margin-top: 2rem;\n    font-size: 0.75rem;\n    .heading {\n      font-size: 0.75rem;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      font-weight: 600;\n      color: $gray-400;\n      margin-bottom: 0rem;\n    }\n    span {\n      color: $gray-600;\n    }\n  }\n  .nav-item {\n    .nav-link {\n      color: $gray-800;\n      font-size: .875rem;\n      line-height: 1.25rem;\n      padding: 0.25rem 1rem;\n      font-family: $font-family-sans-serif;\n      font-weight: 500;\n\n      &:hover {\n        color: $primary;\n      }\n    }\n    .nav-link.active {\n      color: $primary;\n    }\n  }\n}\n\n}\n"
  },
  {
    "path": "styles/theme/components/_social-button.scss",
    "content": "// social color\n.color-facebook {\n    color: #4267B2;\n}\n\n.color-twitter {\n    color: #1DA1F2;\n}\n\n.color-github {\n    color: #000000;\n}\n\n.color-google {\n    color: #db3236;\n}\n\n.color-slack {\n    color: #ce375c;\n}\n\n.color-linkedin {\n    color: #0077b5;\n}"
  },
  {
    "path": "styles/theme/components/_table.scss",
    "content": "//\n// Extend from bootstrap\n//\n\n// Table\n\n\n\n.table .thead-light th{\n  color: $gray-600;\n}\n\n\n\n\n.table thead th {\n  font-weight: 500;\n  padding: 0.75rem 1.5rem;\n  text-transform: capitalize;\n  \n  font-size: 0.875rem;\n  color: $gray-600;\n\n}\n"
  },
  {
    "path": "styles/theme/utilities/_background.scss",
    "content": "//\n// Extended from bootstrap\n//\n\n\n// filter invert in to dark\n.filter-invert-white {\n    -webkit-filter: brightness(0) invert(1);\n    filter: brightness(0) invert(1);\n}\n\n.filter-invert-dark {\n    -webkit-filter: brightness(0) invert(0);\n    filter: brightness(0) invert(0);\n}\n\n.bg-gray-400 {\n    background-color: $gray-400;\n}"
  },
  {
    "path": "styles/theme/utilities/_border.scss",
    "content": "//\n// Extend from Bootstrap\n//\n// Border width\n\n\n\n.border-white-color-40 {\n    border-color: rgba(233, 236, 239, 0.4) !important;\n}\n\n.border-dashed {\n    border: 1px dashed $gray-300 !important;\n}\n\n// divider\n\n.divider {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-align: center;\n    align-items: center;\n&::after, &::before {\n    -ms-flex: 1 1 0%;\n    flex: 1 1 0%;\n    border-top: .0625rem solid $gray-400;\n    content: \"\";\n    margin-top: .0625rem;\n}\n\n&::before {\n    margin-right: 1.5rem;\n}\n\n&::after {\n    margin-left: 1.5rem;\n}\n}"
  },
  {
    "path": "styles/theme/utilities/_icon-shape.scss",
    "content": "// Icon shape\n.icon-xxs {\n  width: $icon-size-xxs;\n  height: $icon-size-xxs;\n  line-height: $icon-size-xxs;\n}\n.icon-xs {\n  width: $icon-size-xs;\n  height: $icon-size-xs;\n  line-height: $icon-size-xs;\n}\n.icon-sm {\n  width: $icon-size-sm;\n  height: $icon-size-sm;\n  line-height: $icon-size-sm;\n}\n.icon-md {\n  width: $icon-size-md;\n  height: $icon-size-md;\n  line-height: $icon-size-md;\n}\n.icon-lg {\n  width: $icon-size-lg;\n  height: $icon-size-lg;\n  line-height: $icon-size-lg;\n}\n.icon-xl {\n  width: $icon-size-xl;\n  height: $icon-size-xl;\n  line-height: $icon-size-xl;\n}\n.icon-xxl {\n  width: $icon-size-xxl;\n  height: $icon-size-xxl;\n  line-height: $icon-size-xxl;\n}\n.icon-shape {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  vertical-align: middle;\n}\n"
  },
  {
    "path": "styles/theme/utilities/_position.scss",
    "content": "//\n// Extended from bootstrap\n//\n// Position\n@each $size,\n$value in $position-values {\n    .top-#{$size} {\n        top: $value;\n    }\n    .right-#{$size} {\n        right: $value;\n    }\n    .bottom-#{$size} {\n        bottom: $value;\n    }\n    .left-#{$size} {\n        left: $value;\n    }\n}\n\n.z-index-1030 {\n    z-index: 1030;\n}"
  },
  {
    "path": "styles/theme/utilities/_shadows.scss",
    "content": "//\n// Extended from bootstrap\n//\n// shadows\n\n\n.smooth-shadow-sm { box-shadow: $smooth-shadow-sm !important; }\n.smooth-shadow-md { box-shadow: $smooth-shadow-md!important; }\n.smooth-shadow-lg { box-shadow: $smooth-shadow-lg !important; }"
  },
  {
    "path": "styles/theme/utilities/_text.scss",
    "content": "// text\n\nh1,\nh2,\nh3,\nh4,\n.h1,\n.h2,\n.h3,\n.h4 {\n    letter-spacing: -0.02rem;\n}\n\n.text-inherit {\n    color: $gray-900;\n}\n\n\n.text-primary-hover{\n    &:hover{\n        color: $primary !important;\n    }\n}\n"
  },
  {
    "path": "styles/theme/vendor/apexChart/_apexchart.scss",
    "content": "// Apex Chart\n.apexcharts-tooltip {\n    border-radius: .5rem !important;\n    box-shadow: $box-shadow-sm !important;\n    .apexcharts-tooltip-series-group {\n        background: $white !important;\n        color: $dark;\n        padding: 3px 16px 6px 16px !important;\n        display: none;\n        text-align: left;\n        justify-content: left;\n        align-items: center;\n        line-height: 1 !important;\n    }\n}\n\n.apexcharts-tooltip-marker {\n    width: 8px !important;\n    height: 8px !important;\n    position: relative;\n    top: 0px;\n    margin-right: 6px !important;\n    border-radius: 50%;\n}\n\n// .apexcharts-tooltip-series-group.apexcharts-active,\n// .apexcharts-tooltip-series-group:last-child {\n//     padding-bottom: 50px !important;\n// }\n.apexcharts-tooltip.apexcharts-theme-light {\n    border: 1px solid $gray-200 !important;\n    background-color: $gray-100 !important;\n    background: $white !important;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {\n    background: $white !important;\n    border-bottom: 1px solid $gray-200 !important;\n}\n\n.apexcharts-tooltip-title {\n    padding: 8px 16px !important;\n    font-size: 14px !important;\n    margin-bottom: 4px;\n    font-weight: 600 !important;\n}"
  },
  {
    "path": "styles/theme/vendor/prismJs/_prism.scss",
    "content": "// Prism\n\n\n\n/* Code blocks */\ncode[class*=\"language-\"], pre[class*=\"language-\"]{\n  \n  font-family: $font-family-base;\n}\npre[class*=\"language-\"] {\n  padding: 1em;\n  overflow: auto;\n  \n  border-radius: 0.5rem !important;\n  margin: 0;\n}\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  background: $gray-900;\n}\n\n\ndiv.code-toolbar {\n  position: relative;\n\n  > .toolbar {\n    position: absolute;\n    top: 0;\n    right: 0;\n    transition: opacity 0.3s ease-in-out;\n    opacity: 0;\n    padding: .5rem;\n  }\n\n  &:hover > .toolbar, &:focus-within > .toolbar {\n    opacity: 1;\n  }\n\n  > .toolbar > .toolbar-item {\n    display: inline-block;\n\n    > {\n      a {\n        cursor: pointer;\n      }\n\n      button {\n        background: none;\n        border: 0;\n        color: $dark;\n        font: inherit;\n        line-height: normal;\n        overflow: visible;\n        padding: 0;\n\n      }\n\n      a, button, span {\n        color: $dark;\n        font-size: .75rem;\n        padding: .25rem .5rem;\n        background: $white;\n      font-weight: 600;\n        border-radius: .25rem;\n      }\n\n      a {\n        &:hover, &:focus {\n          color: $dark;\n          text-decoration: none;\n        }\n      }\n\n      button {\n        &:hover, &:focus {\n          color: $dark;\n          text-decoration: none;\n        }\n      }\n\n      span {\n        &:hover, &:focus {\n          color: inherit;\n          text-decoration: none;\n        }\n      }\n    }\n  }\n}\n\n/* Separate line b/c rules are thrown out if selector is invalid.\n   IE11 and old Edge versions don't support :focus-within. */"
  },
  {
    "path": "styles/theme.scss",
    "content": "/*\n=========================================================\n* Dash UI - Bootstrap 5 Admin & Dashboard Theme\n=========================================================\n* Product Page: https://codescandy.com/dashui/index.html\n* Copyright 2023 Codescandy (https://codescandy.com/)\n* Designed and coded by https://codescandy.com\n========================================================= */\n\n// Inter Fonts\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\");\n\n// Font Awesome\n@import url(\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css\");\n\n// Material Design Icons\n@import url(\"https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css\");\n\n// Feather Icons\n@import url(\"../public/fonts/feather-icons/feather.css\");\n\n// Bootstrap functions\n@import \"~bootstrap/scss/functions\";\n\n// User Variables\n@import \"user-variables\";\n\n// theme variables\n@import \"theme/variables\";\n\n//utilities\n@import \"theme/utilities\";\n\n// Bootstrap\n@import \"~bootstrap/scss/bootstrap\";\n\n// Theme\n@import \"theme/theme\";\n\n// User\n@import \"user\";\n\n.heading-permalink {\n  color: transparent;\n  margin-left: -2rem;\n  &:hover {\n    color: transparent;\n  }\n\n  &::before {\n    color: rgba(82, 95, 127, 0);\n    content: \"#\";\n  }\n  &:hover:before {\n    color: $primary;\n  }\n}\n"
  },
  {
    "path": "sub-components/billing/BillingAddress.js",
    "content": "// import node module libraries\nimport React, { Fragment, useState } from 'react'\nimport Link from 'next/link';\nimport { Row, Col, Card, Modal, Button, Form } from 'react-bootstrap';\n\n// import widget as custom components\nimport { FormSelect } from 'widgets';\n\nconst BillingAddress = () => {\n  const [modalShow, setModalShow] = useState(false);\n\n  const countryOptions = [\n    { value: 'India', label: 'India' },\n    { value: 'US', label: 'US' },\n    { value: 'UK', label: 'UK' },\n    { value: 'UAE', label: 'UAE' }\n  ];\n\n  const cityOptions = [\n    { value: 'Ahmedabad', label: 'Ahmedabad' },\n    { value: 'New York', label: 'New York' },\n    { value: 'Los Angeles', label: 'Los Angeles' },\n    { value: 'Chicago', label: 'Chicago' }\n  ];\n\n  const NewBillingAddressModal = (props) => {\n    return (\n      <Modal\n        {...props}\n        size=\"lg\"\n        aria-labelledby=\"contained-modal-title-vcenter\"\n        centered\n      >\n        <Modal.Header closeButton>\n          <Modal.Title id=\"contained-modal-title-vcenter\">\n            <h4 className=\"mb-1\" id=\"billingAddressModalLabel\">Billing Address</h4>\n            <p className=\"mb-0\">Please provide the billing address with the credit card you ve provided.</p>\n          </Modal.Title>\n        </Modal.Header>\n        <Modal.Body>\n          <Form className=\"row\">\n            <Col xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"country\">\n                <Form.Label>Country</Form.Label>\n                <Form.Control as={FormSelect} placeholder=\"Select Country\" options={countryOptions} />\n              </Form.Group>\n            </Col>\n            <Col xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"addressOne\">\n                <Form.Label>Address line 1</Form.Label>\n                <Form.Control type=\"text\" placeholder=\"123 Ocean Ave\" required />\n              </Form.Group>\n            </Col>\n            <Col xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"addressTwo\">\n                <Form.Label>Address line 2</Form.Label>\n                <Form.Control type=\"text\" placeholder=\"123 Ocean Ave\" required />\n              </Form.Group>\n            </Col>\n            <Col xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"city\">\n                <Form.Label>City</Form.Label>\n                <Form.Control as={FormSelect} placeholder=\"Select City\" options={cityOptions} />\n              </Form.Group>\n            </Col>\n            <Col md={6} xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"state\">\n                <Form.Label>State</Form.Label>\n                <Form.Control type=\"text\" placeholder=\"Gujarat\" required />\n              </Form.Group>\n            </Col>\n            <Col md={6} xs={12} className=\"mb-3\">\n              <Form.Group controlId=\"zipCode\">\n                <Form.Label>Zip/Postal Code</Form.Label>\n                <Form.Control type=\"text\" placeholder=\"000000\" required />\n              </Form.Group>\n            </Col>\n            <Col xs={12} className=\"mb-3\">\n              <Form.Check type=\"checkbox\" id=\"customCheckAddress\">\n                <Form.Check.Input type=\"checkbox\" />\n                <Form.Check.Label>\n                  Make this my default payment method.\n                </Form.Check.Label>\n              </Form.Check>\n            </Col>\n            <Col xs={12}>\n              <Button type=\"submit\" className=\"d-grid\" >Save Address</Button>\n            </Col>\n          </Form>\n        </Modal.Body>\n      </Modal>\n    );\n  }\n\n  return (\n    <Fragment>\n      <Col xs={12} className=\"mb-6\">\n        <Card>\n          <Card.Header className=\"p-4 bg-white\">\n            <h4 className=\"mb-0\">Billing address</h4>\n          </Card.Header>\n          <Card.Body>\n            <Row className=\"align-items-center\">\n              <Col lg={6} md={12} xs={12} className=\"mb-4 mb-lg-0\">\n                <div className=\"mb-3 mb-lg-0\">\n                  <Form.Check id=\"shippingBillingAddress1\" >\n                    <Form.Check.Input type=\"radio\" name=\"shippingBillingAddress\" />\n                    <Form.Check.Label>\n                      <span className=\"d-block mb-3 text-dark fw-bold\">Shipping Billing Address</span>\n                      <span className=\"d-block text-dark fw-medium fs-4\">Valarie Tarrant</span>\n                      <span className=\"d-block mb-4\">3757 Morgan Street Tallahassee, FL 32301</span>\n                      <Link href=\"#\" className=\"me-2 link-success\">Edit</Link>\n                      <Link href=\"#\" className=\"me-2 link-danger\">Delete</Link>\n                      <Link href=\"#\" className=\"me-2 text-muted text-primary-hover\">Remove as Default Billing</Link>\n                    </Form.Check.Label>\n                  </Form.Check>\n                </div>\n              </Col>\n              <Col lg={6} md={12} xs={12} className=\"d-flex justify-content-lg-end\">\n                <div className=\"mb-2\">\n                  <p className=\"mb-1\">E-mail: <Link href=\"#\">valarietarrant@dashui.com</Link></p>\n                  <p>Phone: 321-654-0987</p>\n                </div>\n              </Col>\n              <Col xs={12}>\n                <hr className=\"my-6\" />\n              </Col>\n              <Col lg={6} md={12} xs={12} className=\"mb-4 mb-lg-0\">\n                <Form.Check id=\"shippingBillingAddress2\" >\n                  <Form.Check.Input type=\"radio\" name=\"shippingBillingAddress\" />\n                  <Form.Check.Label>\n                    <span className=\"d-block mb-3 text-dark fw-bold\">Default Billing Address</span>\n                    <span className=\"d-block text-dark fw-medium fs-4\">Mildred Cantu</span>\n                    <span className=\"d-block mb-4\">3757 Morgan Street Tallahassee, FL 32301</span>\n                    <Link href=\"#\" className=\"me-2 link-success\">Edit</Link>\n                    <Link href=\"#\" className=\"me-2 link-danger\">Delete</Link>\n                    <Link href=\"#\" className=\"me-2 text-muted text-primary-hover\">Set as Default</Link>\n                  </Form.Check.Label>\n                </Form.Check>\n              </Col>\n              <Col lg={6} md={12} xs={12} className=\"d-flex justify-content-lg-end\">\n                <div className=\"mb-2\">\n                  <p className=\"mb-1\">E-mail: <Link href=\"#\">valarietarrant@dashui.com</Link></p>\n                  <p>Phone: 321-654-0987</p>\n                </div>\n              </Col>\n              <Col xs={12}>\n                <hr className=\"mt-6 mb-4\" />\n              </Col>\n              <Col xs={12}>\n                <Button variant=\"primary\" onClick={() => setModalShow(true)}>\n                  Add New Address\n                </Button>\n                <NewBillingAddressModal show={modalShow} onHide={() => setModalShow(false)} />\n              </Col>\n            </Row>\n          </Card.Body>\n        </Card>\n      </Col>\n    </Fragment>\n  )\n}\n\nexport default BillingAddress"
  },
  {
    "path": "sub-components/billing/CurrentPlan.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { useState } from 'react'\nimport { Row, Col, Card, Image, Modal, Button, Form, Badge } from 'react-bootstrap';\n\nconst CurrentPlan = () => {\n    const [modalShow, setModalShow] = useState(false);\n\n    const ChangePlanModal = (props) => {\n        return (\n            <Modal\n                {...props}\n                size=\"lg\"\n                aria-labelledby=\"contained-modal-title-vcenter\"\n                centered\n            >\n                <Modal.Header closeButton>\n                    <Modal.Title id=\"contained-modal-title-vcenter\">\n                        Update Your Plan\n                    </Modal.Title>\n                </Modal.Header>\n                <Modal.Body className=\"p-5\">\n                    <h4 className=\"mb-1\">Change your plan</h4>\n                    <p>You can choose from one of the available plans bellow.</p>\n                    <Card className=\"border shadow-none\">\n                        <Card.Body className=\"border-bottom\">\n                            <div className=\"d-flex justify-content-between align-items-center\">\n                                <div>\n                                    <Form.Check id=\"plan1\">\n                                        <Form.Check.Input type=\"radio\" name=\"plan\" />\n                                        <Form.Check.Label>\n                                            <span className=\"d-block text-dark fw-bold\">Standard <Badge bg=\"success\"> Active Plan</Badge></span>\n                                            <span className=\"mb-0 small text-muted\">Single Site</span>\n                                        </Form.Check.Label>\n                                    </Form.Check>\n                                </div>\n                                <div>\n                                    <h4 className=\"fw-bold mb-0 text-dark\">$49.00</h4>\n                                </div>\n                            </div>\n                        </Card.Body>\n                        <Card.Body className=\"border-bottom\">\n                            <div className=\"d-flex justify-content-between align-items-center\">\n                                <div>\n                                    <Form.Check id=\"plan2\" >\n                                        <Form.Check.Input type=\"radio\" name=\"plan\" />\n                                        <Form.Check.Label>\n                                            <span className=\"d-block text-dark fw-bold\">Multiside</span>\n                                            <span className=\"mb-0 small text-muted\">Unlimited Site</span>\n                                        </Form.Check.Label>\n                                    </Form.Check>\n                                </div>\n                                <div>\n                                    <h4 className=\"fw-bold mb-0 text-dark\">$149.00</h4>\n                                </div>\n                            </div>\n                        </Card.Body>\n                        <Card.Body>\n                            <div className=\"d-flex justify-content-between align-items-center\">\n                                <div>\n                                    <Form.Check id=\"plan3\">\n                                        <Form.Check.Input type=\"radio\" name=\"plan\" />\n                                        <Form.Check.Label>\n                                            <span className=\"d-block text-dark fw-bold\">Extended</span>\n                                            <span className=\"mb-0 small text-muted\">For spanaying users</span>\n                                        </Form.Check.Label>\n                                    </Form.Check>\n\n                                </div>\n                                <div>\n                                    <h4 className=\"fw-bold mb-0 text-dark\">$449.00</h4>\n                                </div>\n                            </div>\n                        </Card.Body>\n                    </Card>\n                </Modal.Body>\n                <Modal.Footer className=\"justify-content-start p-5\">\n                    <Button>Save and Continue</Button>\n                    <Button onClick={props.onHide}>Close</Button>\n                </Modal.Footer>\n            </Modal>\n        );\n    }\n\n    return (\n        <Col xs={12} className=\"mb-6\">\n            <Card>\n                {/* card header  */}\n                <Card.Header className=\"p-4 bg-white\">\n                    <h4 className=\"mb-0\">Current Plan Overview</h4>\n                </Card.Header>\n                {/* card body  */}\n                <Card.Body>\n                    <Row className=\"row\">\n                        <Col xl={8} lg={6} md={12} xs={12}>\n                            <div className=\"mb-2\">\n                                <p className=\"text-muted mb-0\">Current Plan</p>\n                                <h3 className=\"mt-2 mb-3 fw-bold\">Starter - Jan 2021 </h3>\n                                <p>Unlimited access to essential tools for design, bootstrap themes, illustrator and icons.</p>\n                                <p>\n                                    <i className=\"fe fe-info fs-4 me-2 text-muted icon-xs\"></i>\n                                    Next Payment: on <span className=\"text-primary\">$499.00 USD</span>\n                                    <span className=\"text-dark fw-bold\"> Jan 1, 2022</span>\n                                </p>\n                            </div>\n                        </Col>\n                        <Col xl={4} lg={6} md={12} xs={12}>\n                            <div>\n                                <small className=\"text-muted\">\n                                    Yearly Payment\n                                </small>\n                                <h1 className=\"fw-bold text-primary\">$499 USD</h1>\n                                <Link href=\"#\" className=\"mb-3 text-muted text-primary-hover d-block\">Learn more about our membership policy</Link>\n                                <Button variant=\"dark\" className=\"d-grid mb-2 w-100\" onClick={() => setModalShow(true)}>\n                                    Change Plan\n                                </Button>\n                                <ChangePlanModal show={modalShow} onHide={() => setModalShow(false)} />\n                                <Link href=\"#\" className=\"btn btn-outline-white d-grid\">\n                                    Cancel Subscription\n                                </Link>\n                            </div>\n                        </Col>\n                    </Row>\n                </Card.Body>\n                {/* card footer  */}\n                <Card.Footer className=\"bg-white\">\n                    <div className=\"d-md-flex justify-content-between align-items-center\">\n                        <div className=\"mb-3 mb-lg-0 text-center text-sm-start\">\n                            <h5 className=\"text-uppercase mb-0\">Payment method</h5>\n                            <div className=\"mt-2\">\n                                <Image src=\"/images/creditcard/mastercard.svg\" alt=\"\" /> <span className=\"fw-bold\">***8773</span>\n                            </div>\n                        </div>\n                        <div className=\"text-center text-md-start\">\n                            <Link href=\"#\" className=\"link-danger\">Remove</Link>\n                            <Link href=\"#\" className=\"btn btn-outline-white ms-2\">Change Card</Link>\n                        </div>\n                    </div>\n                </Card.Footer>\n            </Card>\n        </Col>\n    )\n}\n\nexport default CurrentPlan"
  },
  {
    "path": "sub-components/changelog/Version_01_00_00.js",
    "content": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_00_00 = () => {\n\treturn (\n\t\t<Row>\n\t\t\t<Col lg={7} md={12} sm={12}>\n\t\t\t\t<Card>\n\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t<Row className=\"g-0\">\n\t\t\t\t\t\t\t<Col lg={3} md={4} sm={12}>\n\t\t\t\t\t\t\t\t<div id=\"initial\">\n\t\t\t\t\t\t\t\t\t<h5 className=\"mb-3 fwsemi--bold\">\n\t\t\t\t\t\t\t\t\t\t<code>v1.0.0</code> - April 20, 2023\n\t\t\t\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t<Col lg={9} md={8} sm={12}>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h4 className=\"mb-1 fw-semi-bold\">\n\t\t\t\t\t\t\t\t\t\tInitial Release of Dash UI NextJS\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<p className=\"mb-0\">Dash UI theme is a fully responsive and yet modern premium bootstrap dashboard Admin template developed in nextjs framework.</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</Card.Body>\n\t\t\t\t</Card>\n\t\t\t</Col>\n\t\t</Row>\n\t);\n};\n\nexport default Version_01_00_00;\n"
  },
  {
    "path": "sub-components/changelog/Version_01_01_00.js",
    "content": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_01_00 = () => {\n\tconst UpdatedSass = [\n\t\t'styles/theme/_utilities.scss',\n\t\t'styles/theme.scss'\n\t]\n\tconst UpdatedReactFiles = [\n\t\t'widgets/dropfiles/DropFiles.js',\n\t\t'widgets/form-select/FormSelect.js',\n\t\t'widgets/highlight-code/HighlightCode.js',\n\t\t'sub-components/dashboard/TasksPerformance.js',\n\t\t'sub-components/settings/EmailSetting.js',\n\t\t'sub-components/settings/GeneralSetting.js',\n\t\t'routes/DashboardRoutes.js',\n\t\t'data/code/ListgroupsCode.js',\n\t\t'data/code/NavbarsCode.js',\n\t\t'data/code/ToastsCode.js',\n\t\t'components/bootstrap/DotBadge.js'\n\t]\n\tconst DeletedFiles = [\n\t\t'layouts/DefaultDashboardLayout.js',\n\t\t'layouts/NotFound.js',\n\t\t'layouts/AuthLayout.js',\n\t\t'pages/_app.js',\n\t\t'pages/_document.js'\n\t]\n\treturn (\n\t\t<Row>\n\t\t\t<Col lg={7} md={12} sm={12}>\n\t\t\t\t<Card>\n\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t<Row className=\"g-0\">\n\t\t\t\t\t\t\t<Col lg={3} md={4} sm={12}>\n\t\t\t\t\t\t\t\t<div id=\"initial\">\n\t\t\t\t\t\t\t\t\t<h5 className=\"mb-3 fwsemi--bold\">\n\t\t\t\t\t\t\t\t\t\t<code>v1.1.0</code> - August 1, 2023\n\t\t\t\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t<Col lg={9} md={8} sm={12}>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h4 className=\"mb-1 fw-semi-bold\">Dash UI NextJS Update</h4>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>Replaced <b>Page Router</b> with <b>App Router</b> and done all required changes to impliment it.</li>\n\t\t\t\t\t\t\t\t\t\t<li>Required packages are Updated</li>\n\t\t\t\t\t\t\t\t\t\t<li>Added new package <code>react-syntax-highlighter</code></li>\n\t\t\t\t\t\t\t\t\t\t<li>Removed <code>prism-react-renderer</code> and <code>next-seo</code> packages</li>\n\t\t\t\t\t\t\t\t\t\t<li>Fixed a few bugs</li>\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"mb-3\">\n\t\t\t\t\t\t\t\t\t<h4>Updated React Files:</h4>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t{UpdatedReactFiles.map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\treturn (<li key={index}><code>{item}</code></li>)\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"mb-3\">\n\t\t\t\t\t\t\t\t\t<h4>Updated SCSS Files:</h4>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t{UpdatedSass.map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\treturn (<li key={index}><code>{item}</code></li>)\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"mb-3\">\n\t\t\t\t\t\t\t\t\t<h4>Deleted Components / Layout / Hook / React Files:</h4>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t{DeletedFiles.map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\treturn (<li key={index}><code>{item}</code></li>)\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</Card.Body>\n\t\t\t\t</Card>\n\t\t\t</Col>\n\t\t</Row>\n\t);\n};\n\nexport default Version_01_01_00;\n"
  },
  {
    "path": "sub-components/changelog/Version_01_01_01.js",
    "content": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_01_01 = () => {\n\tconst UpdatedSass = [\n\t\t'styles/theme/_utilities.scss',\n\t\t'styles/theme.scss'\n\t]\n\tconst UpdatedReactFiles = [\n\t\t'widgets/dropfiles/DropFiles.js',\n\t\t'widgets/form-select/FormSelect.js',\n\t\t'widgets/highlight-code/HighlightCode.js',\n\t\t'sub-components/dashboard/TasksPerformance.js',\n\t\t'sub-components/settings/EmailSetting.js',\n\t\t'sub-components/settings/GeneralSetting.js',\n\t\t'routes/DashboardRoutes.js',\n\t\t'data/code/ListgroupsCode.js',\n\t\t'data/code/NavbarsCode.js',\n\t\t'data/code/ToastsCode.js',\n\t\t'components/bootstrap/DotBadge.js'\n\t]\n\tconst DeletedFiles = [\n\t\t'layouts/DefaultDashboardLayout.js',\n\t\t'layouts/NotFound.js',\n\t\t'layouts/AuthLayout.js',\n\t\t'pages/_app.js',\n\t\t'pages/_document.js'\n\t]\n\treturn (\n\t\t<Row>\n\t\t\t<Col lg={7} md={12} sm={12}>\n\t\t\t\t<Card>\n\t\t\t\t\t<Card.Body>\n\t\t\t\t\t\t<Row className=\"g-0\">\n\t\t\t\t\t\t\t<Col lg={3} md={4} sm={12}>\n\t\t\t\t\t\t\t\t<div id=\"initial\">\n\t\t\t\t\t\t\t\t\t<h5 className=\"mb-3 fwsemi--bold\">\n\t\t\t\t\t\t\t\t\t\t<code>v1.1.1</code> - December 9, 2025\n\t\t\t\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t\t<Col lg={9} md={8} sm={12}>\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<h4 className=\"mb-1 fw-semi-bold\">Dash UI NextJS Update</h4>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t<li>Updated Nextjs to 16.x</li>\n\t\t\t\t\t\t\t\t\t\t<li>Updated React to 19.x</li>\n\t\t\t\t\t\t\t\t\t\t<li>Required packages are Updated</li>\n\t\t\t\t\t\t\t\t\t\t<li>Removed <code>react-copy-to-clipboard</code> package</li>\n\t\t\t\t\t\t\t\t\t\t<li>Fixed a few bugs</li>\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t</Col>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</Card.Body>\n\t\t\t\t</Card>\n\t\t\t</Col>\n\t\t</Row>\n\t);\n};\n\nexport default Version_01_01_01;\n"
  },
  {
    "path": "sub-components/dashboard/ActiveProjects.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { ProgressBar, Col, Row, Card, Table, Image } from 'react-bootstrap';\n\n// import required data files\nimport ActiveProjectsData from \"data/dashboard/ActiveProjectsData\";\n\nconst ActiveProjects = () => {\n    return (\n        <Row className=\"mt-6\">\n            <Col md={12} xs={12}>\n                <Card>\n                    <Card.Header className=\"bg-white  py-4\">\n                        <h4 className=\"mb-0\">Active Projects</h4>\n                    </Card.Header>\n                    <Table responsive className=\"text-nowrap mb-0\">\n                        <thead className=\"table-light\">\n                            <tr>\n                                <th>Project name</th>\n                                <th>Hours</th>\n                                <th>priority</th>\n                                <th>Members</th>\n                                <th>Progress</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            {ActiveProjectsData.map((item, index) => {\n                                return (\n                                    <tr key={index}>\n                                        <td className=\"align-middle\">\n                                            <div className=\"d-flex align-items-center\">\n                                                <div>\n                                                    <div className={`icon-shape icon-md border p-4 rounded-1 ${item.brandLogoBg}`}>\n                                                        <Image src={item.brandLogo} alt=\"\" />\n                                                    </div>\n                                                </div>\n                                                <div className=\"ms-3 lh-1\">\n                                                    <h5 className=\" mb-1\">\n                                                        <Link href=\"#\" className=\"text-inherit\">{item.projectName}</Link></h5>\n                                                </div>\n                                            </div>\n                                        </td>\n                                        <td className=\"align-middle\">{item.hours}</td>\n                                        <td className=\"align-middle\"><span className={`badge bg-${item.priorityBadgeBg}`}>{item.priority}</span></td>\n                                        <td className=\"align-middle\">\n                                            <div className=\"avatar-group\">\n                                                {item.members.map((avatar, avatarIndex) => {\n                                                    return (\n                                                        <span className=\"avatar avatar-sm\" key={avatarIndex}>\n                                                            <Image alt=\"avatar\" src={avatar.image} className=\"rounded-circle\" />\n                                                        </span>\n                                                    )\n                                                })}\n                                                <span className=\"avatar avatar-sm avatar-primary\">\n                                                    <span className=\"avatar-initials rounded-circle fs-6\">+5</span>\n                                                </span>\n                                            </div>\n                                        </td>\n                                        <td className=\"align-middle text-dark\">\n                                            <div className=\"float-start me-3\">{item.progress}%</div>\n                                            <div className=\"mt-2\">\n                                                <ProgressBar now={item.progress} style={{ height: '5px' }} />\n                                            </div>\n                                        </td>\n                                    </tr>\n                                )\n                            })}\n                        </tbody>\n                    </Table>\n                    <Card.Footer className=\"bg-white text-center\">\n                        <Link href=\"#\" className=\"link-primary\">View All Projects</Link>\n                    </Card.Footer>\n                </Card>\n            </Col>\n        </Row>\n    )\n}\n\nexport default ActiveProjects"
  },
  {
    "path": "sub-components/dashboard/TasksPerformance.js",
    "content": "'use client'\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Card, Dropdown } from 'react-bootstrap';\nimport { MoreVertical } from 'react-feather';\nimport dynamic from 'next/dynamic';\nconst Chart = dynamic(() => import('react-apexcharts'), { ssr: false });\n\n\nconst Charts = () => {\n    const perfomanceChartSeries = [100, 78, 89];\n    const perfomanceChartOptions = {\n        dataLabels: { enabled: !1 },\n        labels: ['Direct', 'Referral', 'Organic'],\n        colors: ['#28a745', '#ffc107', '#dc3545'],\n        plotOptions: {\n            radialBar: {\n                startAngle: -168,\n                endAngle: -450,\n                hollow: {\n                    size: '55%',\n                },\n                track: {\n                    background: 'transaprent',\n                },\n                dataLabels: {\n                    show: false,\n                }\n            }\n        },\n        chart: { type: 'radialBar' },\n        stroke: { lineCap: \"round\" },\n        responsive: [\n            {\n                breakpoint: 480,\n                options: {\n                    chart: {\n                        height: 300\n                    }\n                }\n            },\n            {\n                breakpoint: 5000,\n                options: {\n                    chart: {\n                        height: 320\n                    }\n                }\n            }\n        ]\n    };\n\n    const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n        (<Link\n            href=\"\"\n            ref={ref}\n            onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n            }}\n            className=\"text-muted text-primary-hover\">\n            {children}\n        </Link>)\n    ));\n\n    CustomToggle.displayName = 'CustomToggle';\n\n    const ActionMenu = () => {\n        return (\n            <Dropdown>\n                <Dropdown.Toggle as={CustomToggle}>\n                    <MoreVertical size=\"15px\" className=\"text-muted\" />\n                </Dropdown.Toggle>\n                <Dropdown.Menu align={'end'}>\n                    <Dropdown.Item eventKey=\"1\">\n                        Action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"2\">\n                        Another action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"3\">\n                        Something else here\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <Card className=\"h-100\">\n            <Card.Body>\n                <div className=\"d-flex align-items-center justify-content-between\">\n                    <div>\n                        <h4 className=\"mb-0\">Tasks Performance </h4>\n                    </div>\n                    <ActionMenu />\n                </div>\n                <div className=\"mb-8\">\n                    <Chart\n                        options={perfomanceChartOptions}\n                        series={perfomanceChartSeries}\n                        type=\"radialBar\"\n                        width=\"100%\"\n                    />\n                </div>\n                {/* icon with content  */}\n                <div className=\"d-flex align-items-center justify-content-around\">\n                    <div className=\"text-center\">\n                        <i className=\"fe fe-check-circle text-success fs-3\"></i>\n                        <h1 className=\"mt-3  mb-1 fw-bold\">76%</h1>\n                        <p>Completed</p>\n                    </div>\n                    <div className=\"text-center\">\n                        <i className=\"fe fe-trending-up text-warning fs-3\"></i>\n                        <h1 className=\"mt-3  mb-1 fw-bold\">32%</h1>\n                        <p>In-Progress</p>\n                    </div>\n                    <div className=\"text-center\">\n                        <i className=\"fe fe-trending-down text-danger fs-3\"></i>\n                        <h1 className=\"mt-3  mb-1 fw-bold\">13%</h1>\n                        <p>Behind</p>\n                    </div>\n                </div>\n            </Card.Body>\n        </Card>\n    )\n}\n\nexport default Charts"
  },
  {
    "path": "sub-components/dashboard/Teams.js",
    "content": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Card, Table, Dropdown, Image } from 'react-bootstrap';\nimport { MoreVertical } from 'react-feather';\n\n// import required data files\nimport TeamsData from \"data/dashboard/TeamsData\";\n\nconst Teams = () => {\n\n    const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n        (<Link\n            href=\"\"\n            ref={ref}\n            onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n            }}\n            className=\"text-muted text-primary-hover\">\n            {children}\n        </Link>)\n    ));\n\n    CustomToggle.displayName = 'CustomToggle';\n\n    const ActionMenu = () => {\n        return (\n            <Dropdown>\n                <Dropdown.Toggle as={CustomToggle}>\n                    <MoreVertical size=\"15px\" className=\"text-muted\" />\n                </Dropdown.Toggle>\n                <Dropdown.Menu align={'end'}>\n                    <Dropdown.Item eventKey=\"1\">\n                        Action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"2\">\n                        Another action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"3\">\n                        Something else here\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <Card className=\"h-100\">\n            <Card.Header className=\"bg-white py-4\">\n                <h4 className=\"mb-0\">Teams </h4>\n            </Card.Header>\n            <Table responsive className=\"text-nowrap\">\n                <thead className=\"table-light\">\n                    <tr>\n                        <th>Name</th>\n                        <th>Role</th>\n                        <th>Last Activity</th>\n                        <th></th>\n                    </tr>\n                </thead>\n                <tbody>\n                    {TeamsData.map((item, index) => {\n                        return (\n                            <tr key={index}>\n                                <td className=\"align-middle\">\n                                    <div className=\"d-flex align-items-center\">\n                                        <div>\n                                            <Image src={item.image} alt=\"\" className=\"avatar-md avatar rounded-circle\" />\n                                        </div>\n                                        <div className=\"ms-3 lh-1\">\n                                            <h5 className=\" mb-1\">{item.name}</h5>\n                                            <p className=\"mb-0\">{item.email}</p>\n                                        </div>\n                                    </div>\n                                </td>\n                                <td className=\"align-middle\">{item.role}</td>\n                                <td className=\"align-middle\">{item.lastActivity}</td>\n                                <td className=\"align-middle\">\n                                    <ActionMenu />\n                                </td>\n                            </tr>\n                        )\n                    })}\n                </tbody>\n            </Table>\n        </Card>\n    )\n}\n\nexport default Teams"
  },
  {
    "path": "sub-components/index.js",
    "content": "/**\n * The folder sub-components contains sub component of all the pages,\n * so here you will find folder names which are listed in root pages.\n */\n\n// sub components for /pages/dashboard\nimport ActiveProjects from 'sub-components/dashboard/ActiveProjects';\nimport TasksPerformance from 'sub-components/dashboard/TasksPerformance';\nimport Teams from 'sub-components/dashboard/Teams';\n\n// sub components for /pages/profile\nimport AboutMe from 'sub-components/profile/AboutMe';\nimport ActivityFeed from 'sub-components/profile/ActivityFeed';\nimport MyTeam from 'sub-components/profile/MyTeam';\nimport ProfileHeader from 'sub-components/profile/ProfileHeader';\nimport ProjectsContributions from 'sub-components/profile/ProjectsContributions';\nimport RecentFromBlog from 'sub-components/profile/RecentFromBlog';\n\n// sub components for /pages/billing\nimport CurrentPlan from 'sub-components/billing/CurrentPlan';\nimport BillingAddress from 'sub-components/billing/BillingAddress';\n\n// sub components for /pages/settings\nimport DeleteAccount from 'sub-components/settings/DeleteAccount';\nimport EmailSetting from 'sub-components/settings/EmailSetting';\nimport GeneralSetting from 'sub-components/settings/GeneralSetting';\nimport Notifications from 'sub-components/settings/Notifications';\nimport Preferences from 'sub-components/settings/Preferences';\n\n\nexport {\n   ActiveProjects,\n   TasksPerformance,\n   Teams,\n   \n   AboutMe,\n   ActivityFeed,\n   MyTeam,\n   ProfileHeader,\n   ProjectsContributions,\n   RecentFromBlog,\n\n   CurrentPlan,\n   BillingAddress,\n\n   DeleteAccount, \n   EmailSetting,  \n   GeneralSetting, \n   Notifications, \n   Preferences\n};\n"
  },
  {
    "path": "sub-components/profile/AboutMe.js",
    "content": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst AboutMe = () => {\n    return (\n        <Col xl={6} lg={12} md={12} xs={12} className=\"mb-6\">\n            {/* card */}\n            <Card>\n                {/* card body */}\n                <Card.Body>\n                    {/* card title */}\n                    <Card.Title as=\"h4\">About Me</Card.Title>\n                    <span className=\"text-uppercase fw-medium text-dark fs-5 ls-2\">Bio</span>\n                    <p className=\"mt-2 mb-6\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen disse var ius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.\n                    </p>\n                    <Row>\n                        <Col xs={12} className=\"mb-5\">\n                            <h6 className=\"text-uppercase fs-5 ls-2\">Position</h6>\n                            <p className=\"mb-0\">Theme designer at Bootstrap.</p>\n                        </Col>\n                        <Col xs={6} className=\"mb-5\">\n                            <h6 className=\"text-uppercase fs-5 ls-2\">Phone </h6>\n                            <p className=\"mb-0\">+32112345689</p>\n                        </Col>\n                        <Col xs={6} className=\"mb-5\">\n                            <h6 className=\"text-uppercase fs-5 ls-2\">Date of Birth </h6>\n                            <p className=\"mb-0\">01.10.1997</p>\n                        </Col>\n                        <Col xs={6}>\n                            <h6 className=\"text-uppercase fs-5 ls-2\">Email </h6>\n                            <p className=\"mb-0\">Dashui@gmail.com</p>\n                        </Col>\n                        <Col xs={6}>\n                            <h6 className=\"text-uppercase fs-5 ls-2\">Location</h6>\n                            <p className=\"mb-0\">Ahmedabad, India</p>\n                        </Col>\n                    </Row>\n                </Card.Body>\n            </Card>\n        </Col>\n    )\n}\n\nexport default AboutMe"
  },
  {
    "path": "sub-components/profile/ActivityFeed.js",
    "content": "// import node module libraries\nimport { Row, Col, Card, Image } from 'react-bootstrap';\n\nconst ActivityFeed = () => {\n    return (\n        <Row>\n            <Col xs={12}>\n                {/* card */}\n                <Card>\n                    {/* card body */}\n                    <Card.Body>\n                        {/* card title */}\n                        <Card.Title as=\"h4\">Activity Feed</Card.Title>\n                        \n                        <div className=\"d-flex mb-5\">\n                            <div>\n                                <Image src=\"/images/avatar/avatar-6.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                            </div>\n                            <div className=\"ms-3 \">\n                                <h5 className=\"mb-1\">Dianna Smiley</h5>\n                                <p className=\"text-muted mb-2\">Just create a new Project in Dashui...\n                                </p>\n                                <p className=\"fs-5 mb-0\">2m ago</p>\n                            </div>\n                        </div>\n                        <div className=\"d-flex mb-5\">\n                            <div>\n                                <Image src=\"/images/avatar/avatar-7.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                            </div>\n                            <div className=\"ms-3 \">\n                                <h5 className=\"mb-1\">Irene Hargrove</h5>\n                                <p className=\"text-muted mb-2\">Comment on Bootstrap Tutorial Says Hi, I m irene...\n                                </p>\n                                <p className=\"fs-5 mb-0\">1hour ago</p>\n                            </div>\n                        </div>\n                        <div className=\"d-flex\">\n                            <div>\n                                <Image src=\"/images/avatar/avatar-9.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                            </div>\n                            <div className=\"ms-3 \">\n                                <h5 className=\"mb-1\">Trevor Bradley</h5>\n                                <p className=\"text-muted mb-2\">Just share your article on Social Media..\n                                </p>\n                                <p className=\"mb-0 fs-5 text-muted\">2month ago</p>\n                            </div>\n                        </div>\n                    </Card.Body>\n                </Card>\n            </Col>\n        </Row>\n    )\n}\n\nexport default ActivityFeed"
  },
  {
    "path": "sub-components/profile/MyTeam.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { Card, Image } from 'react-bootstrap';\n\nconst MyTeam = () => {\n    return (\n        <Card className=\"mb-4\">\n            <Card.Body>\n                <Card.Title as=\"h4\">My Team</Card.Title>\n                <div className=\"d-flex justify-content-between align-items-center mb-4\">\n                    <div className=\"d-flex align-items-center\">\n                        <div>\n                            <Image src=\"/images/avatar/avatar-1.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                        </div>\n                        <div className=\"ms-3 \">\n                            <h5 className=\"mb-1\">Dianna Smiley</h5>\n                            <p className=\"text-muted mb-0 fs-5 text-muted\">UI / UX Designer</p>\n                        </div>\n                    </div>\n                    <div>\n                        {/* icons */}\n                        <Link href=\"#\" className=\"text-muted text-primary-hover me-3\"><i className=\"fe fe-phone-call fs-4\"></i></Link>\n                        <Link href=\"#\" className=\"text-muted text-primary-hover\"><i className=\"fe fe-video fs-4\"></i></Link>\n                    </div>\n                </div>\n                <div className=\"d-flex justify-content-between align-items-center mb-4\">\n                    <div className=\"d-flex align-items-center\">\n                        <div>\n                            <Image src=\"/images/avatar/avatar-2.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                        </div>\n                        <div className=\"ms-3 \">\n                            <h5 className=\"mb-1\">Anne Brewer</h5>\n                            <p className=\"text-muted mb-0 fs-5 text-muted\">Senior UX Designer</p>\n                        </div>\n                    </div>\n                    <div>\n                        {/* icons */}\n                        <Link href=\"#\" className=\"text-muted text-primary-hover me-3\"><i className=\"fe fe-phone-call fs-4\"></i></Link>\n                        <Link href=\"#\" className=\"text-muted text-primary-hover\"><i className=\"fe fe-video fs-4\"></i></Link>\n                    </div>\n                </div>\n                <div className=\"d-flex justify-content-between align-items-center mb-4\">\n                    <div className=\"d-flex align-items-center\">\n                        <div>\n                            <Image src=\"/images/avatar/avatar-3.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                        </div>\n                        <div className=\"ms-3 \">\n                            <h5 className=\"mb-1\">Richard Christmas</h5>\n                            <p className=\"text-muted mb-0 \">Front-End Engineer</p>\n                        </div>\n                    </div>\n                    <div>\n                        {/* icons */}\n                        <Link href=\"#\" className=\"text-muted text-primary-hover me-3\"><i className=\"fe fe-phone-call fs-4\"></i></Link>\n                        <Link href=\"#\" className=\"text-muted text-primary-hover\"><i className=\"fe fe-video fs-4\"></i></Link>\n                    </div>\n                </div>\n                <div className=\"d-flex justify-content-between align-items-center\">\n                    <div className=\"d-flex align-items-center\">\n                        <div>\n                            <Image src=\"/images/avatar/avatar-4.jpg\" className=\"rounded-circle avatar-md\" alt=\"\" />\n                        </div>\n                        <div className=\"ms-3 \">\n                            <h5 className=\"mb-1\">Nicholas Binder</h5>\n                            <p className=\"text-muted mb-0 fs-5 \">Content Marketing Manager</p>\n                        </div>\n                    </div>\n                    <div>\n                        {/* icons */}\n                        <Link href=\"#\" className=\"text-muted text-primary-hover me-3\"><i className=\"fe fe-phone-call fs-4\"></i></Link>\n                        <Link href=\"#\" className=\"text-muted text-primary-hover\"><i className=\"fe fe-video fs-4\"></i></Link>\n                    </div>\n                </div>\n            </Card.Body>\n        </Card>\n    )\n}\n\nexport default MyTeam"
  },
  {
    "path": "sub-components/profile/ProfileHeader.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Image } from 'react-bootstrap';\n\nconst ProfileHeader = () => {\n  return (\n    <Row className=\"align-items-center\">\n      <Col xl={12} lg={12} md={12} xs={12}>\n        {/* Bg */}\n        <div className=\"pt-20 rounded-top\" style={{ background: 'url(/images/background/profile-cover.jpg) no-repeat', backgroundSize: 'cover' }}>\n        </div>\n        <div className=\"bg-white rounded-bottom smooth-shadow-sm \">\n          <div className=\"d-flex align-items-center justify-content-between pt-4 pb-6 px-4\">\n            <div className=\"d-flex align-items-center\">\n              {/* avatar */}\n              <div className=\"avatar-xxl avatar-indicators avatar-online me-2 position-relative d-flex justify-content-end align-items-end mt-n10\">\n                <Image src=\"/images/avatar/avatar-1.jpg\" className=\"avatar-xxl rounded-circle border border-4 border-white-color-40\" alt=\"\" />\n                <Link href=\"#!\" className=\"position-absolute top-0 right-0 me-2\" data-bs-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"Verified\">\n                  <Image src=\"/images/svg/checked-mark.svg\" alt=\"\" height=\"30\" width=\"30\" />\n                </Link>\n              </div>\n              {/* text */}\n              <div className=\"lh-1\">\n                <h2 className=\"mb-0\">Jitu Chauhan\n                  <Link href=\"#!\" className=\"text-decoration-none\" data-bs-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"Beginner\">\n                  </Link>\n                </h2>\n                <p className=\"mb-0 d-block\">@imjituchauhan</p>\n              </div>\n            </div>\n            <div>\n              <Link href=\"#\" className=\"btn btn-outline-primary d-none d-md-block\">Edit Profile</Link>\n            </div>\n          </div>\n          {/* nav */}\n          <ul className=\"nav nav-lt-tab px-4\" id=\"pills-tab\" role=\"tablist\">\n            <li className=\"nav-item\">\n              <Link className=\"nav-link active\" href=\"#\">Overview</Link>\n            </li>\n            <li className=\"nav-item\">\n              <Link className=\"nav-link\" href=\"#\">Project</Link>\n            </li>\n            <li className=\"nav-item\">\n              <Link className=\"nav-link\" href=\"#\">Files</Link>\n            </li>\n            <li className=\"nav-item\">\n              <Link className=\"nav-link\" href=\"#\">Teams</Link>\n            </li>\n            <li className=\"nav-item\">\n              <Link className=\"nav-link\" href=\"#\">\n                Followers\n              </Link>\n            </li>\n            <li className=\"nav-item\">\n              <Link className=\"nav-link\" href=\"#\">Activity</Link>\n            </li>\n          </ul>\n        </div>\n      </Col>\n    </Row>\n  )\n}\n\nexport default ProfileHeader"
  },
  {
    "path": "sub-components/profile/ProjectsContributions.js",
    "content": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Col, Card, Dropdown, Image } from 'react-bootstrap';\nimport { MoreVertical } from 'react-feather';\n\n// import required data files\nimport ProjectsContributionsData from 'data/profile/ProjectsContributionsData';\n\nconst ProjectsContributions = () => {\n\n    const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n        (<Link\n            href=\"\"\n            ref={ref}\n            onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n            }}\n            className=\"text-muted text-primary-hover\">\n            {children}\n        </Link>)\n    ));\n\n    CustomToggle.displayName = 'CustomToggle';\n\n    const ActionMenu = () => {\n        return (\n            <Dropdown>\n                <Dropdown.Toggle as={CustomToggle}>\n                    <MoreVertical size=\"15px\" className=\"text-muted\" />\n                </Dropdown.Toggle>\n                <Dropdown.Menu align={'end'}>\n                    <Dropdown.Item eventKey=\"1\">\n                        Action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"2\">\n                        Another action\n                    </Dropdown.Item>\n                    <Dropdown.Item eventKey=\"3\">\n                        Something else here\n                    </Dropdown.Item>\n                </Dropdown.Menu>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <Col xl={6} lg={12} md={12} xs={12} className=\"mb-6\">\n            <Card>\n                <Card.Body>\n                    <Card.Title as=\"h4\">Projects Contributions</Card.Title>\n                    {ProjectsContributionsData.map((item, index) => {\n                        return (\n                            <div className=\"d-md-flex justify-content-between align-items-center mb-4\" key={index}>\n                                <div className=\"d-flex align-items-center\">\n                                    <div>\n                                        <div className={`icon-shape icon-md border p-4 rounded-1 ${item.brandLogoBg}`}>\n                                            <Image src={item.brandLogo} alt=\"\" />\n                                        </div>\n                                    </div>\n                                    {/* text */}\n                                    <div className=\"ms-3 \">\n                                        <h5 className=\"mb-1\">\n                                            <Link href=\"#\" className=\"text-inherit\">{item.projectName}</Link>\n                                        </h5>\n                                        <p className=\"mb-0 fs-5 text-muted\">{item.description}</p>\n                                    </div>\n                                </div>\n                                <div className=\"d-flex align-items-center ms-10 ms-md-0 mt-3\">\n                                    {/* avatar group */}\n                                    <div className=\"avatar-group me-2\">\n                                        {item.members.map((avatar, avatarIndex) => {\n                                            return (\n                                                <span className=\"avatar avatar-sm\" key={avatarIndex}>\n                                                    <Image alt=\"avatar\" src={avatar.image} className=\"rounded-circle\" />\n                                                </span>\n                                            )\n                                        })}\n                                    </div>\n                                    <div>\n                                        {/* dropdown */}\n                                        <ActionMenu/>\n                                    </div>\n                                </div>\n                            </div>\n                        )\n                    })}\n                </Card.Body>\n            </Card>\n        </Col>\n    )\n}\n\nexport default ProjectsContributions"
  },
  {
    "path": "sub-components/profile/RecentFromBlog.js",
    "content": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { MoreVertical } from 'react-feather';\nimport { Col, Row, Card, Form, Dropdown, Image, Button } from 'react-bootstrap';\n\nconst RecentFromBlog = () => {\n\n  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n    (<Link\n      href=\"\"\n      ref={ref}\n      onClick={(e) => {\n        e.preventDefault();\n        onClick(e);\n      }}\n      className=\"text-muted text-primary-hover\">\n      {children}\n    </Link>)\n  ));\n\n  CustomToggle.displayName = 'CustomToggle';\n\n  const ActionMenu = () => {\n    return (\n      <Dropdown>\n        <Dropdown.Toggle as={CustomToggle}>\n          <MoreVertical size=\"15px\" className=\"text-muted\" />\n        </Dropdown.Toggle>\n        <Dropdown.Menu align={'end'}>\n          <Dropdown.Item eventKey=\"1\">\n            Action\n          </Dropdown.Item>\n          <Dropdown.Item eventKey=\"2\">\n            Another action\n          </Dropdown.Item>\n          <Dropdown.Item eventKey=\"3\">\n            Something else here\n          </Dropdown.Item>\n        </Dropdown.Menu>\n      </Dropdown>\n    );\n  };\n\n  return (\n    <Col xl={6} md={12} xs={12} className=\"mb-6\">\n      <Card>\n        <Card.Body>\n          <div className=\"d-flex justify-content-between mb-5 align-items-center\">\n            {/* avatar */}\n            <div className=\"d-flex align-items-center\">\n              <div>\n                <Image src=\"/images/avatar/avatar-1.jpg\" alt=\"\" className=\"avatar avatar-md rounded-circle\" />\n              </div>\n              <div className=\"ms-3\">\n                <h5 className=\"mb-0 fw-bold\">Jitu Chauhan</h5>\n                <p className=\"mb-0\">19 minutes ago</p>\n              </div>\n            </div>\n            <div>\n              {/* dropdown */}\n              <ActionMenu />\n            </div>\n          </div>\n          <div className=\"mb-4\">\n            {/* text */}\n            <p className=\"mb-4\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen disse var ius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>\n            <Image src=\"/images/blog/blog-img-1.jpg\" className=\"rounded-3 w-100\" alt=\"\" />\n          </div>\n          {/* icons */}\n          <div className=\"mb-4\">\n            <span className=\"me-1 me-md-4\"><i className=\"fe fe-heart\"></i> <span>20 Like</span></span>\n            <span className=\"me-1 me-md-4\"><i className=\"fe fe-message-square\"></i> <span>12 Comment</span></span>\n            <span><i className=\"fe fe-share-2\"></i><span> Share</span></span>\n          </div>\n          <div className=\"border-bottom border-top py-5 d-flex align-items-center mb-4\">\n            <div className=\"avatar-group me-2 me-md-3\">\n              <span className=\"avatar avatar-sm\">\n                {/* Image */}\n                <Image alt=\"avatar\"\n                  src=\"/images/avatar/avatar-7.jpg\"\n                  className=\"rounded-circle\" />\n              </span>\n              <span className=\"avatar avatar-sm\">\n                {/* Image */}\n                <Image alt=\"avatar\"\n                  src=\"/images/avatar/avatar-8.jpg\"\n                  className=\"rounded-circle\" />\n              </span>\n              <span className=\"avatar avatar-sm\">\n                {/* Image */}\n                <Image alt=\"avatar\"\n                  src=\"/images/avatar/avatar-9.jpg\"\n                  className=\"rounded-circle\" />\n              </span>\n            </div>\n            <div><span>You and 20 more liked this</span></div>\n          </div>\n          {/* row */}\n          <Row>\n            <Col xl={1} lg={2} md={2} xs={12} className=\"mb-3 mb-lg-0\">\n              <Image src=\"/images/avatar/avatar-1.jpg\" className=\"avatar avatar-md rounded-circle\" alt=\"\" />\n            </Col>\n            <Col xl={11} lg={10} md={9} xs={12}>\n              <Row className=\"row g-3 align-items-center\">\n                <Col md={2} xxl={1} >\n                  <Form.Label >Name</Form.Label>\n                </Col>\n                <Col md={8} xxl={9} className=\"mt-0 mt-md-3\">\n                  <Form.Control type=\"text\" placeholder=\"\" id=\"name\" required />\n                </Col>\n                <Col md={2} xxl={2}>\n                  <Button type=\"submit\" className=\"d-grid\" >Post</Button>\n                </Col>\n              </Row>\n            </Col>\n          </Row>\n        </Card.Body>\n      </Card>\n    </Col>\n  )\n}\n\nexport default RecentFromBlog"
  },
  {
    "path": "sub-components/settings/DeleteAccount.js",
    "content": "// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst DeleteAccount = () => {\n  return (\n    <Row>\n      <Col xl={3} lg={4} md={12} xs={12}>\n        <div className=\"mb-4 mb-lg-0\">\n          <h4 className=\"mb-1\">Delete Account</h4>\n          <p className=\"mb-0 fs-5 text-muted\">Easily set up social media accounts</p>\n        </div>\n      </Col>\n      <Col xl={9} lg={8} md={12} xs={12}>\n        <Card className=\"mb-6\">\n          <Card.Body>\n            <div className=\"mb-6\">\n              <h4 className=\"mb-1\">Danger Zone </h4>\n            </div>\n            <div>\n              <p>Delete any and all content you have, such as articles, comments, your reading list or chat messages. Allow your username to become available to anyone.</p>\n              <Link href=\"#\" className=\"btn btn-danger\">Delete Account</Link>\n              <p className=\"small mb-0 mt-3\">Feel free to contact with any <Link href=\"#\">dashui@example.com</Link> questions.</p>\n            </div>\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default DeleteAccount"
  },
  {
    "path": "sub-components/settings/EmailSetting.js",
    "content": "// import node module libraries\nimport { Col, Row, Form, Card, Button } from 'react-bootstrap';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst EmailSetting = () => {\n  const hasMounted = useMounted();\n  return (\n    <Row className=\"mb-8\">\n      <Col xl={3} lg={4} md={12} xs={12}>\n        <div className=\"mb-4 mb-lg-0\">\n          <h4 className=\"mb-1\">Email Setting</h4>\n          <p className=\"mb-0 fs-5 text-muted\">Add an email settings to profile </p>\n        </div>\n      </Col>\n      <Col xl={9} lg={8} md={12} xs={12}>\n        {/* card */}\n        <Card id=\"edit\">\n          {/* card body */}\n          <Card.Body>\n            <div className=\"mb-6\">\n              <h4 className=\"mb-1\">Email</h4>\n            </div>\n            {hasMounted &&\n              <Form>\n                {/* New email */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"newEmailAddress\">New email</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"email\" placeholder=\"Enter your email address\" id=\"newEmailAddress\" required />\n                  </Col>\n                  <Col md={{ offset: 4, span: 8 }} xs={12} className=\"mt-3\">\n                    <Button variant=\"primary\" type=\"submit\">\n                      Save Changes\n                    </Button>\n                  </Col>\n                </Row>\n              </Form>\n            }\n            <div className=\"mb-6 mt-6\">\n              <h4 className=\"mb-1\">Change your password</h4>\n            </div>\n            {hasMounted &&\n              <Form>\n                {/* Current password */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"currentPassword\">Current password</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"password\" placeholder=\"Enter Current password\" id=\"currentPassword\" required />\n                  </Col>\n                </Row>\n\n                {/* New password */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"newPassword\">New password</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"password\" placeholder=\"Enter New password\" id=\"newPassword\" required />\n                  </Col>\n                </Row>\n\n                {/* Confirm new password */}\n                <Row className=\"align-items-center\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"confirmNewpassword\">Confirm new password</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"password\" placeholder=\"Confirm new password\" id=\"confirmNewpassword\" required />\n                  </Col>\n                  {/* list */}\n                  <Col md={{ offset: 4, span: 8 }} xs={12} className=\"mt-4\">\n                    <h6 className=\"mb-1\">Password requirements:</h6>\n                    <p>Ensure that these requirements are met:</p>\n                    <ul>\n                      <li> Minimum 8 characters long the more, the better</li>\n                      <li>At least one lowercase character</li>\n                      <li>At least one uppercase character</li>\n                      <li>At least one number, symbol, or whitespace character\n                      </li>\n                    </ul>\n                    <Button variant=\"primary\" type=\"submit\">\n                      Save Changes\n                    </Button>\n                  </Col>\n                </Row>\n\n              </Form>\n            }\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default EmailSetting"
  },
  {
    "path": "sub-components/settings/GeneralSetting.js",
    "content": "// import node module libraries\nimport { Col, Row, Form, Card, Button, Image } from 'react-bootstrap';\n\n// import widget as custom components\nimport { FormSelect, DropFiles } from 'widgets';\n\n// import hooks\nimport useMounted from 'hooks/useMounted';\n\nconst GeneralSetting = () => {\n  const hasMounted = useMounted();\n  const countryOptions = [\n    { value: 'India', label: 'India' },\n    { value: 'US', label: 'US' },\n    { value: 'UK', label: 'UK' },\n    { value: 'UAE', label: 'UAE' }\n  ];\n\n  return (\n    <Row className=\"mb-8\">\n      <Col xl={3} lg={4} md={12} xs={12}>\n        <div className=\"mb-4 mb-lg-0\">\n          <h4 className=\"mb-1\">General Setting</h4>\n          <p className=\"mb-0 fs-5 text-muted\">Profile configuration settings </p>\n        </div>\n      </Col>\n      <Col xl={9} lg={8} md={12} xs={12}>\n        <Card>\n          {/* card body */}\n          <Card.Body>\n            <div className=\" mb-6\">\n              <h4 className=\"mb-1\">General Settings</h4>\n            </div>\n            <Row className=\"align-items-center mb-8\">\n              <Col md={3} className=\"mb-3 mb-md-0\">\n                <h5 className=\"mb-0\">Avatar</h5>\n              </Col>\n              <Col md={9}>\n                <div className=\"d-flex align-items-center\">\n                  <div className=\"me-3\">\n                    <Image src=\"/images/avatar/avatar-5.jpg\" className=\"rounded-circle avatar avatar-lg\" alt=\"\" />\n                  </div>\n                  <div>\n                    <Button variant=\"outline-white\" className=\"me-2\" type=\"submit\">Change </Button>\n                    <Button variant=\"outline-white\" type=\"submit\">Remove </Button>\n                  </div>\n                </div>\n              </Col>\n            </Row>\n            {/* col */}\n            <Row className=\"mb-8\">\n              <Col md={3} className=\"mb-3 mb-md-0\">\n                {/* heading */}\n                <h5 className=\"mb-0\">Cover photo</h5>\n              </Col>\n              <Col md={9}>\n                {/* dropzone input */}\n                <div>\n                  {hasMounted && <Form action=\"#\" className=\"dropzone mb-3 py-10 border-dashed\">\n                    <DropFiles />\n                  </Form>}\n                  <Button variant=\"outline-white\" type=\"submit\">Change </Button>\n                </div>\n              </Col>\n            </Row>\n            <div>\n              <div className=\"mb-6\">\n                <h4 className=\"mb-1\">Basic information</h4>\n              </div>\n              {hasMounted && \n              <Form>\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4 col-form-label form-label\" htmlFor=\"fullName\">Full name</Form.Label>\n                  <Col sm={4} className=\"mb-3 mb-lg-0\">\n                    <Form.Control type=\"text\" placeholder=\"First name\" id=\"fullName\" required />\n                  </Col>\n                  <Col sm={4}>\n                    <Form.Control type=\"text\" placeholder=\"Last name\" id=\"lastName\" required />\n                  </Col>\n                </Row>\n                {/* row */}\n                <Row className=\"mb-3\">\n                <Form.Label className=\"col-sm-4 col-form-label form-label\" htmlFor=\"email\">Email</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"email\" placeholder=\"Email\" id=\"email\" required />\n                  </Col>\n                </Row>\n                {/* row */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"phone\">Phone <span className=\"text-muted\">(Optional)</span></Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"text\" placeholder=\"Enter Phone\" id=\"phone\" />\n                  </Col>\n                </Row>\n\n                {/* Location */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"country\">Location</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control as={FormSelect} placeholder=\"Select Country\" id=\"country\" options={countryOptions} />\n                  </Col>\n                </Row>\n\n                {/* Address Line One */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"addressLine\">Address line 1</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"text\" placeholder=\"Enter Address line 1\" id=\"addressLine\" required />\n                  </Col>\n                </Row>\n\n                {/* Address Line Two */}\n                <Row className=\"mb-3\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"addressLineTwo\">Address line 2</Form.Label>\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"text\" placeholder=\"Enter Address line 2\" id=\"addressLineTwo\" required />\n                  </Col>\n                </Row>\n\n\n                {/* Zip code */}\n                <Row className=\"align-items-center\">\n                  <Form.Label className=\"col-sm-4\" htmlFor=\"zipcode\">Zip code</Form.Label>\n\n                  <Col md={8} xs={12}>\n                    <Form.Control type=\"text\" placeholder=\"Enter Zip code\" id=\"zipcode\" required />\n                  </Col>\n\n                  <Col md={{ offset: 4, span: 8 }} xs={12} className=\"mt-4\">\n                    <Button variant=\"primary\" type=\"submit\">\n                      Save Changes\n                    </Button>\n                  </Col>\n\n                </Row>\n              </Form>\n              }\n            </div>\n          </Card.Body>\n        </Card>\n\n      </Col>\n    </Row>\n  )\n}\n\nexport default GeneralSetting"
  },
  {
    "path": "sub-components/settings/Notifications.js",
    "content": "// import node module libraries\nimport { useState } from 'react'\nimport { Col, Row, Card, Form, Button, Table, Alert } from 'react-bootstrap';\n\n// import widget as custom components\nimport { FormSelect } from 'widgets';\n\nconst Notifications = () => {\n  const notificationOptions = [\n    { value: 'Always', label: 'Always' },\n    { value: 'One', label: 'One' },\n    { value: 'Two', label: 'Two' },\n    { value: 'Three', label: 'Three' }\n  ];\n\n  const dailyDigestOptions = [\n    { value: 'Everyday', label: 'Everyday' },\n    { value: 'One', label: 'One' },\n    { value: 'Two', label: 'Two' },\n    { value: 'Three', label: 'Three' }\n  ];\n\n  const timeOptions = [\n    { value: '2PM', label: '2PM' },\n    { value: 'One', label: 'One' },\n    { value: 'Two', label: 'Two' },\n    { value: 'Three', label: 'Three' }\n  ];\n\n  const AlertDismissible = () => {\n    const [show, setShow] = useState(true);\n    if (show) {\n      return (\n        <Alert variant=\"warning\" onClose={() => setShow(false)} dismissible>\n          To start using Slack for personal notifications, you should first connect Slack.\n        </Alert>\n      );\n    }\n  }\n\n  return (\n    <Row className=\"mb-8\">\n      <Col xl={3} lg={4} md={12} xs={12}>\n        <div className=\"mb-4 mb-lg-0\">\n          <h4 className=\"mb-1\">Notifications</h4>\n          <p className=\"mb-0 fs-5 text-muted\">Change notification settings </p>\n        </div>\n      </Col>\n      <Col xl={9} lg={8} md={12} xs={12}>\n        <Card >\n          <Card.Body>\n            <div className=\"mb-6\">\n              <h4 className=\"mb-1\">Notification for email, mobile & Slack</h4>\n            </div>\n            <div className=\"mb-4\">\n              {/* alert */}\n              <AlertDismissible />\n            </div>\n            {/* table */}\n            <div className=\"table-responsive mb-3\">\n              <Table className=\"text-nowrap\">\n                <thead className=\"table-light\">\n                  <tr>\n                    <th className=\"w-75\">Activity & Conversation</th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-smartphone icon-sm me-2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg></th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-slack icon-sm me-2\"><path d=\"M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z\"></path><path d=\"M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\"></path><path d=\"M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z\"></path><path d=\"M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z\"></path><path d=\"M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z\"></path><path d=\"M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z\"></path><path d=\"M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z\"></path><path d=\"M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z\"></path></svg></th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-mail icon-sm me-2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr>\n                    <td className=\"border-top-0\">\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckOne\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckTwo\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckThree\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"border-top-0\">\n                      When a Files is shared with a team\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckFour\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-minus text-muted icon-sm\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckFive\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"border-top-0\">\n                      When someone requests access to my design\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckSix\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckSeven\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckEight\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"border-top-0\">\n                      When someone comments in threads I’m following\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckNine\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckTen\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckEleven\" />\n                    </td>\n                  </tr>\n                  <tr>\n                    <td className=\"border-top-0\">\n                      When someone @mentions me in any comments\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckTwelve\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-minus text-muted icon-sm\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n                    </td>\n                    <td className=\"border-top-0\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-minus text-muted icon-sm\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n                    </td>\n                  </tr>\n                </tbody>\n              </Table >\n            </div>\n            <div className=\"table-responsive mb-3\">\n              <Table className=\"text-nowrap\">\n                <thead className=\"table-light\">\n                  <tr>\n                    <th className=\"w-75\">Project activity</th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-smartphone icon-sm me-2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg></th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-slack icon-sm me-2\"><path d=\"M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z\"></path><path d=\"M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\"></path><path d=\"M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z\"></path><path d=\"M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z\"></path><path d=\"M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z\"></path><path d=\"M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z\"></path><path d=\"M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z\"></path><path d=\"M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z\"></path></svg></th>\n                    <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-mail icon-sm me-2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg></th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr>\n                    <td className=\"border-top-0\">\n                      When someone adds me to a project\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckThirteen\" />\n                    </td>\n                    <td className=\"border-top-0\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-minus text-muted icon-sm\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n                    </td>\n                    <td className=\"border-top-0\">\n                      <Form.Check.Input type=\"checkbox\" name=\"customCheckFourteen\" />\n                    </td>\n                  </tr>\n                </tbody>\n              </Table >\n            </div>\n            <Table responsive className=\"mb-0 text-nowrap\">\n              <thead className=\"table-light\">\n                <tr>\n                  <th className=\"w-75\">Team activity</th>\n                  <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-smartphone icon-sm me-2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"></rect><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"></line></svg></th>\n                  <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-slack icon-sm me-2\"><path d=\"M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z\"></path><path d=\"M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\"></path><path d=\"M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z\"></path><path d=\"M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z\"></path><path d=\"M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z\"></path><path d=\"M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z\"></path><path d=\"M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z\"></path><path d=\"M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z\"></path></svg></th>\n                  <th><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-mail icon-sm me-2\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg></th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td className=\"border-top-0\">\n                    When my invitees sign up\n                  </td>\n                  <td className=\"border-top-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckSixteen\" />\n                  </td>\n                  <td className=\"border-top-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckSeventeen\" />\n                  </td>\n                  <td className=\"border-top-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckEighteen\" />\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"border-top-0\">\n                    When someone requests access to my team\n                  </td>\n                  <td className=\"border-top-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckNineteen\" />\n                  </td>\n                  <td className=\"border-top-0\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"feather feather-minus text-muted icon-sm\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>\n                  </td>\n                  <td className=\"border-top-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckNineteen\" />\n                  </td>\n                </tr>\n                <tr>\n                  <td className=\"border-bottom-0\">\n                    When someone invites me to a team\n                  </td>\n                  <td className=\"border-bottom-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckTwentyone\" />\n                  </td>\n                  <td className=\"border-bottom-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckTwentytwo\" />\n                  </td>\n                  <td className=\"border-bottom-0\">\n                    <Form.Check.Input type=\"checkbox\" name=\"customCheckTwentythree\" />\n                  </td>\n                </tr>\n              </tbody>\n            </Table >\n            <hr className=\"my-6\" />\n            <Row>\n              <Col xl={6} md={12} className=\"mb-3\">\n                <Form.Label htmlFor=\"notification\">When should we send you notifications?</Form.Label>\n                <Form.Control as={FormSelect} defaultselected=\"Always\" id=\"notification\" options={notificationOptions} />\n              </Col>\n              <Col xl={3} md={6} className=\"mb-3\">\n                <Form.Label htmlFor=\"dailyDigest\">Daily Digest</Form.Label>\n                <Form.Control as={FormSelect} defaultselected=\"Everyday\" id=\"dailyDigest\" options={dailyDigestOptions} />\n              </Col>\n              <Col xl={3} md={6} className=\"mb-3\">\n                <Form.Label htmlFor=\"time\">Time</Form.Label>\n                <Form.Control as={FormSelect} defaultselected=\"2PM\" id=\"time\" options={timeOptions} />\n              </Col>\n              <Col xl={3} md={12}>\n                <Button variant=\"primary\" type=\"submit\">Save Changes</Button>\n              </Col>\n            </Row>\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default Notifications"
  },
  {
    "path": "sub-components/settings/Preferences.js",
    "content": "// import node module libraries\nimport { Col, Row, Form, Card, Button } from 'react-bootstrap';\n\n// import widget as custom components\nimport { FormSelect } from 'widgets';\n\nconst Preferences = () => {\n\n  const langaugeOptions = [\n    { value: 'English', label: 'English' },\n    { value: 'Hindi', label: 'Hindi' },\n    { value: 'Spanish', label: 'Spanish' },\n    { value: 'Arabic', label: 'Arabic' }\n  ];\n\n  const timeZoneOptions = [\n    { value: 'GMT +5.30', label: 'GMT +5.30' },\n    { value: 'GMT +5.30', label: 'GMT +5.30' },\n    { value: 'GMT +5.30', label: 'GMT +5.30' },\n    { value: 'GMT +5.30', label: 'GMT +5.30' }\n  ];\n\n  const dateFormatOptions = [\n    { value: 'No Preference', label: 'No Preference' },\n    { value: 'Preference', label: 'Preference' }\n  ];\n\n  return (\n    <Row className=\"mb-8\">\n      <Col xl={3} lg={4} md={12} xs={12}>\n        <div className=\"mb-4 mb-lg-0\">\n          <h4 className=\"mb-1\">Preferences</h4>\n          <p className=\"mb-0 fs-5 text-muted\">Configure your preferences </p>\n        </div>\n      </Col>\n      <Col xl={9} lg={8} md={12} xs={12}>\n        <Card id=\"preferences\">\n          <Card.Body>\n            <div className=\"mb-6\">\n              <h4 className=\"mb-1\">Preferences</h4>\n            </div>\n            <Form>\n\n              {/* Langauge */}\n              <Row className=\"mb-3\">\n                <Form.Label className=\"col-md-4\" htmlFor=\"langauge\">Langauge</Form.Label>\n                <Col md={8} xs={12}>\n                  <Form.Control as={FormSelect}\n                    defaultselected=\"English\"\n                    placeholder=\"Select Langauge\"\n                    id=\"langauge\"\n                    options={langaugeOptions} />\n                </Col>\n              </Row>\n\n              {/* Time Zone */}\n              <Row className=\"mb-3\">\n                <Form.Label className=\"col-md-4\" htmlFor=\"timeZone\">Time Zone</Form.Label>\n                <Col md={8} xs={12}>\n                  <Form.Control as={FormSelect}\n                    defaultselected='GMT +5.30'\n                    placeholder=\"Select Langauge\"\n                    id=\"timeZone\"\n                    options={timeZoneOptions} />\n                </Col>\n              </Row>\n\n              {/* Date Format */}\n              <Row className=\"mb-3\">\n                <Form.Label className=\"col-md-4\" htmlFor=\"dateFormat\">Date Format</Form.Label>\n                <Col md={8} xs={12}>\n                  <Form.Control as={FormSelect}\n                    defaultselected='No Preference'\n                    placeholder=\"Select Langauge\"\n                    id=\"dateFormat\"\n                    options={dateFormatOptions} />\n                </Col>\n              </Row>\n\n              {/* Default*/}\n              <Row className=\"mb-3\">\n                <Form.Label className=\"col-md-4\" htmlFor=\"default\">Default</Form.Label>\n                <Col md={8} xs={12}>\n                  <Form.Check id=\"customRadioInline1\" className=\"form-check-inline\" >\n                    <Form.Check.Input type=\"radio\" name=\"customRadioInline\" />\n                    <Form.Check.Label>On</Form.Check.Label>\n                  </Form.Check>\n                  <Form.Check id=\"customRadioInline2\" className=\"form-check-inline\"  >\n                    <Form.Check.Input type=\"radio\" name=\"customRadioInline\" />\n                    <Form.Check.Label>Off</Form.Check.Label>\n                  </Form.Check>\n                </Col>\n              </Row>\n\n              {/* Choose option default */}\n              <Row className=\"mb-3\">\n                <Form.Label as={Col} md={4} htmlFor=\"default\">Choose option default</Form.Label>\n                <Col md={8} xs={12}>\n                  <Form.Check id=\"customChecktellMe\" >\n                    <Form.Check.Input type=\"checkbox\" name=\"customChecktellMe\" />\n                    <Form.Check.Label>Tell me</Form.Check.Label>\n                  </Form.Check>\n                  <Form.Check id=\"customOpenEmail\"  >\n                    <Form.Check.Input type=\"checkbox\" name=\"customOpenEmail\" />\n                    <Form.Check.Label>Open e-mail</Form.Check.Label>\n                  </Form.Check>\n                  <Form.Check id=\"customShowDefault\"  >\n                    <Form.Check.Input type=\"checkbox\" name=\"customShowDefault\" />\n                    <Form.Check.Label>Show default</Form.Check.Label>\n                  </Form.Check>\n                </Col>\n\n                <Col md={{ offset: 4, span: 8 }} xs={12} className=\"mt-2\">\n                  <Button variant=\"primary\" type=\"submit\">\n                    Save Changes\n                  </Button>\n                </Col>\n\n              </Row>\n            </Form>\n          </Card.Body>\n        </Card>\n      </Col>\n    </Row>\n  )\n}\n\nexport default Preferences"
  },
  {
    "path": "widgets/PageHeading.js",
    "content": "// import node module libraries\nimport { Row, Col } from 'react-bootstrap';\n\nconst PageHeading = props => {\n  const { heading } = props;\n  return (\n    <Row>\n      <Col lg={12} md={12} xs={12}>\n        {/* Page header */}\n        <div className=\"border-bottom pb-4 mb-4 \">\n          <h3 className=\"mb-0 fw-bold\">{heading}</h3>\n        </div>\n      </Col>\n    </Row>\n  )\n}\n\nexport default PageHeading"
  },
  {
    "path": "widgets/cards/PricingCard.js",
    "content": "// import node module libraries\nimport { ListGroup, Card } from 'react-bootstrap';\nimport Link from 'next/link';\n\nconst PricingCard = ({ content }) => {\n    let plan = content[0];\n    return (\n        <Card>\n            <Card.Body className=\"p-6 border-bottom mb-4\">\n                {/* text */}\n                <h2 className=\"mb-3\">{plan.plantitle}</h2>\n                <p className=\"mb-0\" dangerouslySetInnerHTML={{ __html: plan.description }}></p>\n                {/* price */}\n                <div className=\"d-flex align-items-end mt-6 mb-3\">\n                    <h1 className=\"fw-bold me-1 mb-0\">${plan.monthly} </h1>\n                    <p className=\"mb-0\">/mo</p>\n                </div>\n                <Link href=\"#\" className={`btn btn-${plan.buttonClass ? plan.buttonClass : 'outline-primary'\n                    }`}>\n                    {plan.buttonText}\n                </Link>\n            </Card.Body>\n            <Card.Body>\n                <p className=\"mb-0\">{plan.featureHeading}</p>\n                <ListGroup bsPrefix=\"list-unstyled\" className=\"mt-4 mb-0\">\n                    {plan.features.map((item, index) => {\n                        return (\n                            <ListGroup.Item\n                                key={index}\n                                className=\"mb-1\"\n                                bsPrefix=\"list-item\"\n                            >\n                                <span className=\"text-success me-2\">\n                                    <i className=\"far fa-check-circle\"></i>\n                                </span>\n                                <span\n                                    dangerouslySetInnerHTML={{ __html: item.feature }}\n                                ></span>\n                            </ListGroup.Item>\n                        );\n                    })}\n                </ListGroup>\n            </Card.Body>\n        </Card>\n    )\n}\n\nexport default PricingCard"
  },
  {
    "path": "widgets/dropfiles/DropFiles.js",
    "content": "// import node module libraries\nimport React, { useEffect, useState } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { Image } from 'react-bootstrap';\n\nconst thumbsContainer = {\n\tdisplay: 'flex',\n\tflexDirection: 'row',\n\tflexWrap: 'wrap',\n\tmarginTop: 16\n};\n\nconst thumb = {\n\tdisplay: 'inline-flex',\n\tborderRadius: 2,\n\tborder: '1px solid #eaeaea',\n\tmarginBottom: 8,\n\tmarginRight: 8,\n\twidth: 100,\n\theight: 100,\n\tpadding: 4,\n\tboxSizing: 'border-box'\n};\n\nconst thumbInner = {\n\tdisplay: 'flex',\n\tminWidth: 0,\n\toverflow: 'hidden'\n};\n\nconst img = {\n\tdisplay: 'block',\n\twidth: 'auto',\n\theight: '100%'\n};\n\nexport const DropFiles = (props) => {\n\tconst [files, setFiles] = useState([]);\n\tconst { getRootProps, getInputProps } = useDropzone({\n\t\taccept: {'image/*': ['.jpeg', '.jpg', '.png']},\n\t\tonDrop: (acceptedFiles) => {\n\t\t\tsetFiles(\n\t\t\t\tacceptedFiles.map((file) =>\n\t\t\t\t\tObject.assign(file, {\n\t\t\t\t\t\tpreview: URL.createObjectURL(file)\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t});\n\n\tconst thumbs = files.map((file) => (\n\t\t<div style={thumb} key={file.name}>\n\t\t\t<div style={thumbInner}>\n\t\t\t\t<Image src={file.preview} style={img} alt={file.name} />\n\t\t\t</div>\n\t\t</div>\n\t));\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\t// Make sure to revoke the data uris to avoid memory leaks\n\t\t\tfiles.forEach((file) => URL.revokeObjectURL(file.preview));\n\t\t},\n\t\t[files]\n\t);\n\n\treturn (\n\t\t<section className=\"container\">\n\t\t\t<div {...getRootProps({ className: 'dropzone' })}>\n\t\t\t\t<input {...getInputProps()} />\n\t\t\t\t<p className=\"text-center\">Drag 'n' drop some files here, or click to select files</p>\n\t\t\t</div>\n\t\t\t<aside style={thumbsContainer}>{thumbs}</aside>\n\t\t</section>\n\t);\n};\n"
  },
  {
    "path": "widgets/features/FeatureLeftTopIcon.js",
    "content": "// Widget : Features\n// Style : Features item with left top icon\n\n// import node module libraries\nimport PropTypes from 'prop-types';\n\nconst FeatureLeftTopIcon = ({ item }) => {\n    return (\n        <div className=\"mb-6\">\n            <div className=\"icon-shape icon-lg bg-primary rounded-3 mb-4\">\n                <i className={`fe fe-${item.icon} text-white fs-3`}></i>\n            </div>\n            <h4>{item.title}</h4>\n            <p>{item.description}</p>\n        </div>\n    )\n}\n\n// Typechecking With PropTypes\nFeatureLeftTopIcon.propTypes = {\n    item: PropTypes.any.isRequired\n};\n\nexport default FeatureLeftTopIcon"
  },
  {
    "path": "widgets/form-select/FormSelect.js",
    "content": "// import node module libraries\nimport { Fragment } from 'react';\nimport { Form } from 'react-bootstrap';\nimport PropTypes from 'prop-types';\n\nexport const FormSelect = (props={\n\tplaceholder: '',\n\tid: '',\n\tname: '',\n\tclassName:''\n}) => {\n\tconst { placeholder,  options, id, name, onChange, className } = props;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<Form.Select\n\t\t\t\tid={id}\n\t\t\t\tname={name}\n\t\t\t\tonChange={onChange}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t{placeholder ? (\n\t\t\t\t\t<option value=\"\" className=\"text-muted\">\n\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t</option>\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\t\t\t\t{options.map((item, index) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<option key={index} value={item.value} className=\"text-dark\">\n\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Form.Select>\n\t\t</Fragment>\n\t);\n};\n\nFormSelect.propTypes = {\n\tplaceholder: PropTypes.string,\n\tdefaultselected: PropTypes.string,\n\tid: PropTypes.string,\n\tname: PropTypes.string,\n\tclassName:PropTypes.string\n};\n\nexport default FormSelect;\n"
  },
  {
    "path": "widgets/highlight-code/HighlightCode.js",
    "content": "'use client'\n\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport SyntaxHighlighter from 'react-syntax-highlighter';\nimport { shadesOfPurple } from 'react-syntax-highlighter/dist/esm/styles/hljs';\n\nconst HighlightCode = ({ code }) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetTimeout(() => setCopied(false), 3000); // Reset 'copied' state after 2 seconds\n\t\t} catch (err) {\n\t\t\tconsole.error('Failed to copy text: ', err);\n\t\t\t// Handle error, e.g., show an error message to the user\n\t\t}\n\t};\n\treturn (\n\t\t<Fragment>\n\t\t\t{/* <CopyToClipboard text={code}>\n\t\t\t\t<button className=\"copy-button\" onClick={copyAction}>\n\t\t\t\t\tCopy\n\t\t\t\t</button>\n\t\t\t</CopyToClipboard> */}\n\t\t\t<button className=\"copy-button\" onClick={handleCopy}>\n\t\t\t\t{copied ? 'Copied!' : 'Copy'}\n\t\t\t</button>\n\t\t\t<SyntaxHighlighter language=\"handlebars\" style={shadesOfPurple} className=\"rounded\">\n\t\t\t\t{code}\n\t\t\t</SyntaxHighlighter>\n\t\t</Fragment>\n\t);\n};\nexport default HighlightCode;\n"
  },
  {
    "path": "widgets/index.js",
    "content": "// import widget/custom components from highlight-code folder \nimport HighlightCode from 'widgets/highlight-code/HighlightCode';\nimport PageHeading from 'widgets/PageHeading';\nimport FormSelect from 'widgets/form-select/FormSelect';\nimport PricingCard from 'widgets/cards/PricingCard';\nimport FeatureLeftTopIcon from 'widgets/features/FeatureLeftTopIcon';\nimport { DropFiles } from 'widgets/dropfiles/DropFiles';\nimport StatRightTopIcon from 'widgets/stats/StatRightTopIcon';\n\nexport {\n   HighlightCode,\n   PageHeading,\n   FormSelect,\n   PricingCard,\n   FeatureLeftTopIcon,\n   DropFiles,\n   StatRightTopIcon\n};\n"
  },
  {
    "path": "widgets/stats/StatRightTopIcon.js",
    "content": "// Widget : Stat Style \n// Style : Stat widget with right top icon\n\n// import node module libraries\nimport PropTypes from 'prop-types';\nimport { Card } from 'react-bootstrap';\n\nconst StatRightTopIcon = props => {\n    const { info } = props;\n    return (\n        <Card>\n            <Card.Body>\n                <div className=\"d-flex justify-content-between align-items-center mb-3\">\n                    <div>\n                        <h4 className=\"mb-0\">{info.title}</h4>\n                    </div>\n                    <div className=\"icon-shape icon-md bg-light-primary text-primary rounded-2\">\n                        {info.icon}\n                    </div>\n                </div>\n                <div>\n                    <h1 className=\"fw-bold\">{info.value}</h1>\n                    <p className=\"mb-0\" dangerouslySetInnerHTML={{ __html: info.statInfo}}></p>\n                </div>\n            </Card.Body>\n        </Card>\n    )\n}\n\n// Typechecking With PropTypes\nStatRightTopIcon.propTypes = {\n    info: PropTypes.any.isRequired\n};\n\nexport default StatRightTopIcon"
  }
]