Showing preview only (730K chars total). Download the full file or copy to clipboard to get everything.
Repository: codescandy/dashui-free-nextjs-admin-template
Branch: main
Commit: f990e659ab67
Files: 147
Total size: 684.9 KB
Directory structure:
gitextract_7a2pmtz8/
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── app/
│ ├── (auth)/
│ │ └── authentication/
│ │ ├── forget-password/
│ │ │ ├── loading.js
│ │ │ └── page.js
│ │ ├── layout.js
│ │ ├── sign-in/
│ │ │ └── page.js
│ │ └── sign-up/
│ │ └── page.js
│ ├── (dashboard)/
│ │ ├── changelog/
│ │ │ └── page.js
│ │ ├── components/
│ │ │ ├── accordions/
│ │ │ │ └── page.js
│ │ │ ├── alerts/
│ │ │ │ └── page.js
│ │ │ ├── badges/
│ │ │ │ └── page.js
│ │ │ ├── breadcrumbs/
│ │ │ │ └── page.js
│ │ │ ├── button-group/
│ │ │ │ └── page.js
│ │ │ ├── buttons/
│ │ │ │ └── page.js
│ │ │ ├── cards/
│ │ │ │ └── page.js
│ │ │ ├── carousels/
│ │ │ │ └── page.js
│ │ │ ├── close-button/
│ │ │ │ └── page.js
│ │ │ ├── collapse/
│ │ │ │ └── page.js
│ │ │ ├── dropdowns/
│ │ │ │ └── page.js
│ │ │ ├── list-group/
│ │ │ │ └── page.js
│ │ │ ├── modal/
│ │ │ │ └── page.js
│ │ │ ├── navbar/
│ │ │ │ └── page.js
│ │ │ ├── navs/
│ │ │ │ └── page.js
│ │ │ ├── offcanvas/
│ │ │ │ └── page.js
│ │ │ ├── overlays/
│ │ │ │ └── page.js
│ │ │ ├── pagination/
│ │ │ │ └── page.js
│ │ │ ├── popovers/
│ │ │ │ └── page.js
│ │ │ ├── progress/
│ │ │ │ └── page.js
│ │ │ ├── spinners/
│ │ │ │ └── page.js
│ │ │ ├── tables/
│ │ │ │ └── page.js
│ │ │ ├── toasts/
│ │ │ │ └── page.js
│ │ │ └── tooltips/
│ │ │ └── page.js
│ │ ├── documentation/
│ │ │ └── page.js
│ │ ├── layout-vertical/
│ │ │ └── page.js
│ │ ├── layout.js
│ │ ├── page.js
│ │ └── pages/
│ │ ├── api-demo/
│ │ │ ├── ServerSideData.js
│ │ │ └── page.js
│ │ ├── billing/
│ │ │ └── page.js
│ │ ├── pricing/
│ │ │ └── page.js
│ │ ├── profile/
│ │ │ └── page.js
│ │ └── settings/
│ │ └── page.js
│ ├── layout.js
│ └── not-found.js
├── components/
│ ├── CopyToClipboardButton.js
│ └── bootstrap/
│ └── DotBadge.js
├── data/
│ ├── Notification.js
│ ├── code/
│ │ ├── AccordionCode.js
│ │ ├── AlertsCode.js
│ │ ├── BadgesCode.js
│ │ ├── BreadcrumbCode.js
│ │ ├── ButtonGroupCode.js
│ │ ├── ButtonsCode.js
│ │ ├── CardsCode.js
│ │ ├── CarouselsCode.js
│ │ ├── CloseCode.js
│ │ ├── CollapsesCode.js
│ │ ├── DropdownsCode.js
│ │ ├── ListgroupsCode.js
│ │ ├── ModalsCode.js
│ │ ├── NavbarsCode.js
│ │ ├── NavsCode.js
│ │ ├── OffcanvasCode.js
│ │ ├── OverlaysCode.js
│ │ ├── PaginationsCode.js
│ │ ├── PopoversCode.js
│ │ ├── ProgressCode.js
│ │ ├── SpinnersCode.js
│ │ ├── TablesCode.js
│ │ ├── ToastsCode.js
│ │ └── TooltipsCode.js
│ ├── dashboard/
│ │ ├── ActiveProjectsData.js
│ │ ├── ProjectsStatsData.js
│ │ └── TeamsData.js
│ ├── pricing/
│ │ ├── FAQsData.js
│ │ ├── FeaturesData.js
│ │ └── PricingPlansData.js
│ └── profile/
│ └── ProjectsContributionsData.js
├── hooks/
│ └── useMounted.js
├── jsconfig.json
├── layouts/
│ ├── QuickMenu.js
│ └── navbars/
│ ├── NavbarTop.js
│ └── NavbarVertical.js
├── next.config.js
├── package.json
├── public/
│ └── fonts/
│ └── feather-icons/
│ └── feather.css
├── routes/
│ └── DashboardRoutes.js
├── styles/
│ ├── _user-variables.scss
│ ├── _user.scss
│ ├── theme/
│ │ ├── _theme.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── components/
│ │ │ ├── _avatar.scss
│ │ │ ├── _badge.scss
│ │ │ ├── _button.scss
│ │ │ ├── _card.scss
│ │ │ ├── _docs.scss
│ │ │ ├── _dropdown.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _layout.scss
│ │ │ ├── _nav.scss
│ │ │ ├── _navbar-vertical.scss
│ │ │ ├── _navbar.scss
│ │ │ ├── _reboot.scss
│ │ │ ├── _scrollspy.scss
│ │ │ ├── _sidenav.scss
│ │ │ ├── _social-button.scss
│ │ │ └── _table.scss
│ │ ├── utilities/
│ │ │ ├── _background.scss
│ │ │ ├── _border.scss
│ │ │ ├── _icon-shape.scss
│ │ │ ├── _position.scss
│ │ │ ├── _shadows.scss
│ │ │ └── _text.scss
│ │ └── vendor/
│ │ ├── apexChart/
│ │ │ └── _apexchart.scss
│ │ └── prismJs/
│ │ └── _prism.scss
│ └── theme.scss
├── sub-components/
│ ├── billing/
│ │ ├── BillingAddress.js
│ │ └── CurrentPlan.js
│ ├── changelog/
│ │ ├── Version_01_00_00.js
│ │ ├── Version_01_01_00.js
│ │ └── Version_01_01_01.js
│ ├── dashboard/
│ │ ├── ActiveProjects.js
│ │ ├── TasksPerformance.js
│ │ └── Teams.js
│ ├── index.js
│ ├── profile/
│ │ ├── AboutMe.js
│ │ ├── ActivityFeed.js
│ │ ├── MyTeam.js
│ │ ├── ProfileHeader.js
│ │ ├── ProjectsContributions.js
│ │ └── RecentFromBlog.js
│ └── settings/
│ ├── DeleteAccount.js
│ ├── EmailSetting.js
│ ├── GeneralSetting.js
│ ├── Notifications.js
│ └── Preferences.js
└── widgets/
├── PageHeading.js
├── cards/
│ └── PricingCard.js
├── dropfiles/
│ └── DropFiles.js
├── features/
│ └── FeatureLeftTopIcon.js
├── form-select/
│ └── FormSelect.js
├── highlight-code/
│ └── HighlightCode.js
├── index.js
└── stats/
└── StatRightTopIcon.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": "next/core-web-vitals"
}
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# local env files
.env*.local
# vercel
.vercel
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Codescandy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# DashUI Next.js Free Admin Template 🚀
A **modern, responsive, and free Next.js Admin Dashboard Template** built by [Codescandy](https://codescandy.com/).
Perfect for building dashboards, admin panels, and web applications.
)
---
## 📋 Features
- ⚡ Built with **Next.js 13**
- 🎨 Modern UI with Tailwind CSS
- 📱 Fully responsive (mobile-first design)
- 📊 Pre-built dashboard pages
- 🛠 Developer-friendly structure
- 🆓 100% Free & Open Source
---
## 📂 Getting Started
### 1️⃣ Clone the Repository
```bash
git clone https://github.com/codescandy/dashui-free-nextjs-admin-template.git
cd dashui-free-nextjs-admin-template
```
### 2️⃣ Install Dependencies
```bash
npm install
```
### 3️⃣ Start Development Server
```bash
npm run dev
```
Now, open [http://localhost:3000](http://localhost:3000) in your browser.
### 4️⃣ Build for Production
```bash
npm run build
```
---
## 🌍 Deploy on Vercel
One-click deployment to Vercel:
[](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)
---
## 🤝 Contributing
Want to contribute? Follow these steps:
1. **Fork** the repository
2. Create a new branch: `git checkout -b feature-name`
3. Make your changes & commit: `git commit -m "Added new feature"`
4. Push your branch: `git push origin feature-name`
5. Open a **Pull Request** 🎉
We welcome all contributions to improve DashUI.
---
## 🔗 Useful Links
- [Bootstrap Template](https://dashui.codescandy.com/free-bootstrap-5-admin-dashboard-template.html)
- [React Template](https://dashui.codescandy.com/free-reactjs-admin-dashboard-template.html)
- [Next.js Template](https://dashui.codescandy.com/free-next-js-admin-dashboard-template.html)
- [Nuxt.js Template](https://dashui.codescandy.com/free-nuxt-js-admin-dashboard-template.html)
- [Tailwind Template](https://dashui.codescandy.com/free-tailwindcss-admin-dashboard-html-template.html)
---
## 🎨 Figma Design File
Get the ready-to-use [Figma File](https://www.figma.com/community/file/1259105309122518026/dash-ui-admin-dashboard-template).
---
## 💎 Upgrade to PRO
Get **Dash UI Pro** for advanced features:
| Free Version | DashUI PRO |
|--------------|------------|
| ✔️ 1 Dashboard | ✔️ 6 Dashboards |
| ✔️ 11 Pages | ✔️ 60+ Pages |
| ✔️ Basic Docs | ✔️ Full Documentation |
| ✔️ 4 Plugins | ✔️ 10+ Plugins |
| ✔️ Source Files | ✔️ Source Files |
| ❌ Dark Mode | ✔️ Dark Mode |
| ❌ Layout Options | ✔️ Layout Variations |
| ❌ Priority Support | ✔️ Priority Support |
| - | ✔️ Free Updates |
👉 [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)
---
## 📞 Support
- [Open a Discussion](https://github.com/codescandy/Dash-UI/discussions)
- [Contact Us](https://codescandy.com/contact-us/)
---
### 💡 Quick Note
If you like this project, don’t forget to ⭐ **star the repository** on GitHub!
================================================
FILE: app/(auth)/authentication/forget-password/loading.js
================================================
export default function Loading() {
// You can add any UI inside Loading, including a Skeleton.
return <span>Loading</span>
}
================================================
FILE: app/(auth)/authentication/forget-password/page.js
================================================
'use client'
// import node module libraries
import { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';
import Link from 'next/link';
// import hooks
import useMounted from 'hooks/useMounted';
const ForgetPassword = () => {
const hasMounted = useMounted();
return (
<Row className="align-items-center justify-content-center g-0 min-vh-100">
<Col xxl={4} lg={6} md={8} xs={12} className="py-8 py-xl-0">
{/* Card */}
<Card className="smooth-shadow-md">
{/* Card body */}
<Card.Body className="p-6">
<div className="mb-4">
<Link href="/"><Image src="/images/brand/logo/logo-primary.svg" className="mb-2" alt="" /></Link>
<p className="mb-6">Don't worry, we'll send you an email to reset your password.</p>
</div>
{/* Form */}
{hasMounted &&
<Form>
{/* Email */}
<Form.Group className="mb-3" controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" name="email" placeholder="Enter Your Email" />
</Form.Group>
{/* Button */}
<div className="mb-3 d-grid">
<Button variant="primary" type="submit">Reset Password</Button>
</div>
<span>Don't have an account? <Link href="/authentication/sign-in">Sign In</Link></span>
</Form>
}
</Card.Body>
</Card>
</Col>
</Row>
)
}
export default ForgetPassword
================================================
FILE: app/(auth)/authentication/layout.js
================================================
'use client'
// import node module libraries
import { Container } from 'react-bootstrap';
export default function AuthLayout({ children }) {
return (
<Container className="d-flex flex-column">
{children}
</Container>
)
}
================================================
FILE: app/(auth)/authentication/sign-in/page.js
================================================
'use client'
// import node module libraries
import { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';
import Link from 'next/link';
// import hooks
import useMounted from 'hooks/useMounted';
const SignIn = () => {
const hasMounted = useMounted();
return (
<Row className="align-items-center justify-content-center g-0 min-vh-100">
<Col xxl={4} lg={6} md={8} xs={12} className="py-8 py-xl-0">
{/* Card */}
<Card className="smooth-shadow-md">
{/* Card body */}
<Card.Body className="p-6">
<div className="mb-4">
<Link href="/"><Image src="/images/brand/logo/logo-primary.svg" className="mb-2" alt="" /></Link>
<p className="mb-6">Please enter your user information.</p>
</div>
{/* Form */}
{hasMounted &&
<Form>
{/* Username */}
<Form.Group className="mb-3" controlId="username">
<Form.Label>Username or email</Form.Label>
<Form.Control type="email" name="username" placeholder="Enter address here" required="" />
</Form.Group>
{/* Password */}
<Form.Group className="mb-3" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" name="password" placeholder="**************" required="" />
</Form.Group>
{/* Checkbox */}
<div className="d-lg-flex justify-content-between align-items-center mb-4">
<Form.Check type="checkbox" id="rememberme">
<Form.Check.Input type="checkbox" />
<Form.Check.Label>Remember me</Form.Check.Label>
</Form.Check>
</div>
<div>
{/* Button */}
<div className="d-grid">
<Button variant="primary" type="submit">Sign In</Button>
</div>
<div className="d-md-flex justify-content-between mt-4">
<div className="mb-2 mb-md-0">
<Link href="/authentication/sign-up" className="fs-5">Create An Account </Link>
</div>
<div>
<Link href="/authentication/forget-password" className="text-inherit fs-5">Forgot your password?</Link>
</div>
</div>
</div>
</Form>}
</Card.Body>
</Card>
</Col>
</Row>
)
}
export default SignIn
================================================
FILE: app/(auth)/authentication/sign-up/page.js
================================================
'use client'
// import node module libraries
import { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';
import Link from 'next/link';
// import hooks
import useMounted from 'hooks/useMounted';
const SignUp = () => {
const hasMounted = useMounted();
return (
<Row className="align-items-center justify-content-center g-0 min-vh-100">
<Col xxl={4} lg={6} md={8} xs={12} className="py-8 py-xl-0">
{/* Card */}
<Card className="smooth-shadow-md">
{/* Card body */}
<Card.Body className="p-6">
<div className="mb-4">
<Link href="/"><Image src="/images/brand/logo/logo-primary.svg" className="mb-2" alt="" /></Link>
<p className="mb-6">Please enter your user information.</p>
</div>
{/* Form */}
{hasMounted &&
<Form>
{/* Username */}
<Form.Group className="mb-3" controlId="username">
<Form.Label>Username or email</Form.Label>
<Form.Control type="text" name="username" placeholder="User Name" required="" />
</Form.Group>
{/* Email */}
<Form.Group className="mb-3" controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" name="email" placeholder="Enter address here" required="" />
</Form.Group>
{/* Password */}
<Form.Group className="mb-3" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control type="password" name="password" placeholder="**************" required="" />
</Form.Group>
{/* Confirm Password */}
<Form.Group className="mb-3" controlId="confirm-password">
<Form.Label>Confirm Password</Form.Label>
<Form.Control type="password" name="confirm-password" placeholder="**************" required="" />
</Form.Group>
{/* Checkbox */}
<div className="mb-3">
<Form.Check type="checkbox" id="check-api-checkbox">
<Form.Check.Input type="checkbox" />
<Form.Check.Label>
I agree to the <Link href="#"> Terms of Service </Link> and <Link href="#"> Privacy Policy.</Link>
</Form.Check.Label>
</Form.Check>
</div>
<div>
{/* Button */}
<div className="d-grid">
<Button variant="primary" type="submit">Create Free Account</Button>
</div>
<div className="d-md-flex justify-content-between mt-4">
<div className="mb-2 mb-md-0">
<Link href="/authentication/sign-in" className="fs-5">Already member? Login </Link>
</div>
<div>
<Link href="/authentication/forget-password" className="text-inherit fs-5">Forgot your password?</Link>
</div>
</div>
</div>
</Form>
}
</Card.Body>
</Card>
</Col>
</Row>
)
}
export default SignUp
================================================
FILE: app/(dashboard)/changelog/page.js
================================================
'use client'
// import node module libraries
import { Col, Row, Container } from 'react-bootstrap';
// import sub components
import Version_01_00_00 from 'sub-components/changelog/Version_01_00_00';
import Version_01_01_00 from 'sub-components/changelog/Version_01_01_00';
import Version_01_01_01 from 'sub-components/changelog/Version_01_01_01';
const ChangeLog = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex justify-content-between align-items-center">
<div className="mb-3 mb-md-0">
<h1 className="mb-0 h2 fw-bold">Changelog</h1>
<p className="mb-0">
We’re constantly improving & updating Dashui. See the latest features and improvements.
</p>
</div>
</div>
</Col>
</Row>
<Version_01_01_01 />
<hr />
<Version_01_01_00 />
<hr />
<Version_01_00_00 />
</Container>
);
};
export default ChangeLog;
================================================
FILE: app/(dashboard)/components/accordions/page.js
================================================
'use client'
// import node module libraries
import { Col, Row, Card, Accordion, Nav, Tab, Tabs, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
AccordionBasicCode,
AccordionFlushCode
} from 'data/code/AccordionCode';
const Accordions = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Accordions</h1>
<p className="mb-0 ">
Build vertically collapsing accordions in combination with the
Collapse component.
</p>
</div>
</div>
</Col>
</Row>
{/* basic */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="accordion-example" className="mb-4">
<h3>Example</h3>
<p>
Click the accordions below to expand/collapse the accordion
content.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
{/* accordion started */}
<Accordion defaultActiveKey="0">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>
{/* end of accordion started */}
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={AccordionBasicCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of basic */}
<hr className="mb-5 mt-7" />
{/* basic */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="accordion-example" className="mb-4">
<h3>Flush</h3>
<p>
Add <code>flush</code> to remove the default background-color,
some borders, and some rounded corners to render accordions
edge-to-edge with their parent container.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4" id="uncontrolled-tab-example">
{/* accordion started */}
<Accordion defaultActiveKey="0" flush>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body>
<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. 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. It's also worth
noting that just about any HTML can go within the{' '}
<code><Accordion.Item></code> →{' '}
<code><Accordion.Body></code> though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>
{/* end of accordion started */}
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={AccordionFlushCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of basic */}
</Container>
);
};
export default Accordions;
================================================
FILE: app/(dashboard)/components/alerts/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import { Col, Row, Card, Alert, Button, Nav, Tab, Container } from 'react-bootstrap';
import {
ExclamationCircleFill,
CheckCircleFill,
ExclamationTriangleFill
} from 'react-bootstrap-icons';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SimpleAlert,
LinkAlert,
AdditionalAlert,
AlertWithIcon,
DismissingAlert
} from 'data/code/AlertsCode';
const Alerts = () => {
const AlertDismissible = () => {
const [show, setShow] = useState(true);
if (show) {
return (
<Alert variant="danger" onClose={() => setShow(false)} dismissible>
<Alert.Heading>Holy guacamole!</Alert.Heading>You should check in on
some of those fields below.
</Alert>
);
}
return <Button onClick={() => setShow(true)}>Show Alert</Button>;
};
return (
<Container fluid className="p-6">
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Alerts</h1>
<p className="mb-0 ">
Provide contextual feedback messages for typical user actions
with the handful of available and flexible alert messages.
</p>
</div>
</div>
</Col>
</Row>
{/* simple alert */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="simple-alert" className="mb-4">
<h3>Simple Alert </h3>
<p>
Alerts are available for any length of text, as well as an
optional dismiss button. For proper styling, use one of the eight{' '}
<code>variants</code>.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Alert variant="primary">
This is a primary alert—check it out!
</Alert>
<Alert variant="secondary">
This is a secondary alert—check it out!
</Alert>
<Alert variant="success">
This is a success alert—check it out!
</Alert>
<Alert variant="danger">
This is a danger alert—check it out!
</Alert>
<Alert variant="warning">
This is a warning alert—check it out!
</Alert>
<Alert variant="info">
This is a info alert—check it out!
</Alert>
<Alert variant="light">
This is a light alert—check it out!
</Alert>
<Alert variant="dark">
This is a dark alert—check it out!
</Alert>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={SimpleAlert} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of simple alert */}
<hr className="mb-5 mt-7" />
{/* link alert */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="simple-alert" className="mb-4">
<h3>Link Alert </h3>
<p>
For links, use the <code> </Alert.Link></code> component
to provide matching colored links within any alert.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Alert variant="primary">
This is a primary alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="secondary">
This is a secondary alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="success">
This is a success alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="danger">
This is a danger alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="warning">
This is a warning alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="info">
This is a info alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="light">
This is a light alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
<Alert variant="dark">
This is a dark alert with{' '}
<Alert.Link href="#">an example link</Alert.Link>. Give it
a click if you like.
</Alert>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={LinkAlert} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of link alert */}
<hr className="mb-5 mt-7" />
{/* additional content */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="additional-content" className="mb-4">
<h3>Additional content </h3>
<p>
Alerts can also contain additional HTML elements like headings,
paragraphs and dividers.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Alert variant="success">
<Alert.Heading>Well done!</Alert.Heading>
<p>
Aww yeah, you successfully read this important alert
message. This example text is going to run a bit longer
so that you can see how spacing within an alert works
with this kind of content.
</p>
<hr />
<p className="mb-0">
Whenever you need to, be sure to use margin utilities to
keep things nice and tidy.
</p>
</Alert>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={AdditionalAlert} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of additional content */}
<hr className="mb-5 mt-7" />
{/* icons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="alert-icons" className="mb-4">
<h3>Icons </h3>
<p>
Similarly, you can use{' '}
<a
href="https://www.npmjs.com/package/react-bootstrap-icons"
rel="noreferrer"
target="_blank"
>
(React) Bootstrap Icons
</a>{' '}
to create alerts with icons. Depending on your icons and content,
you may want to add more utilities or custom styles.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Alert variant="primary">
<ExclamationCircleFill size={25} className="me-1" />
An example alert with an icon
</Alert>
<Alert variant="success ">
<CheckCircleFill size={25} className="me-1" />
An example success alert with an icon
</Alert>
<Alert variant="warning">
<ExclamationTriangleFill size={25} className="me-1" />
An example warning alert with an icon
</Alert>
<Alert variant="danger">
<ExclamationTriangleFill size={25} className="me-1" />
An example danger alert with an icon
</Alert>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={AlertWithIcon} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of icons */}
<hr className="mb-5 mt-7" />
{/* icons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="dismissing" className="mb-4">
<h3>Dismissing </h3>
<p>
Add the <code>dismissible</code> prop to add a functioning dismiss
button to the Alert.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<AlertDismissible />
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={DismissingAlert} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of icons */}
</Container>
);
};
export default Alerts;
================================================
FILE: app/(dashboard)/components/badges/page.js
================================================
'use client'
// import node module libraries
import { Col, Row, Card, Button, Badge, Tab, Nav, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SimpleBadgeCode,
BadgeWithButtonCode,
PillBadgesCode
} from 'data/code/BadgesCode';
const Badges = () => {
return (
<Container fluid className="p-6">
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Badges</h1>
<p className="mb-0 ">
Documentation and examples for badges, our small count and
labeling component.
</p>
</div>
</div>
</Col>
</Row>
{/* Contextual badges */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="contextual-badge" className="mb-4">
<h3>Contextual badges</h3>
<p>
Add any of the below mentioned modifier classes to change the
appearance of a badge.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Badge bg="primary" className="me-1">
primary
</Badge>
<Badge bg="secondary" className="me-1">
secondary
</Badge>
<Badge bg="success" className="me-1">
success
</Badge>
<Badge bg="danger" className="me-1">
danger
</Badge>
<Badge bg="warning" className="me-1">
warning
</Badge>
<Badge bg="info" className="me-1">
info
</Badge>
<Badge bg="light" text="dark" className="me-1">
light
</Badge>
<Badge bg="dark" className="me-1">
dark
</Badge>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={PillBadgesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Contextual badges */}
<hr className="mb-5 mt-7" />
{/* Pill badges */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="pill-badge" className="mb-4">
<h3>Pill badges</h3>
<p>
Use the <code>pill</code> modifier to make badges more rounded
(with a larger border-radius and additional horizontal padding).
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Badge pill bg="primary" className="me-1">
primary
</Badge>
<Badge pill bg="secondary" className="me-1">
secondary
</Badge>
<Badge pill bg="success" className="me-1">
success
</Badge>
<Badge pill bg="danger" className="me-1">
danger
</Badge>
<Badge pill bg="warning" className="me-1">
warning
</Badge>
<Badge pill bg="info" className="me-1">
info
</Badge>
<Badge pill bg="light" text="dark" className="me-1">
light
</Badge>
<Badge pill bg="dark" className="me-1">
dark
</Badge>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={PillBadgesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Pill badges */}
<hr className="mb-5 mt-7" />
{/* simple badge */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="simple-badge" className="mb-4">
<h3>Simple Badge </h3>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<h1>
{' '}
Example heading <Badge bg="secondary">New</Badge>
</h1>
<h2>
{' '}
Example heading <Badge bg="secondary">New</Badge>
</h2>
<h3>
{' '}
Example heading <Badge bg="secondary">New</Badge>{' '}
</h3>
<h4>
{' '}
Example heading <Badge bg="secondary">New</Badge>
</h4>
<h5>
{' '}
Example heading <Badge bg="secondary">New</Badge>{' '}
</h5>
<h6>
{' '}
Example heading <Badge bg="secondary">New</Badge>
</h6>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={SimpleBadgeCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of simple badge */}
<hr className="mb-5 mt-7" />
{/* badge with button */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mb-4">
<h3>Badge with Button</h3>
<p>
Badges can be used as part of links or buttons to provide a
counter.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Button variant="primary">
Notifications{' '}
<Badge bg="light" className="text-primary">
4
</Badge>
</Button>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={BadgeWithButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of badge with button */}
</Container>
);
};
export default Badges;
================================================
FILE: app/(dashboard)/components/breadcrumbs/page.js
================================================
'use client'
// import node module libraries
import { Col, Row, Card, Breadcrumb, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import { BasicBreadcrumb } from 'data/code/BreadcrumbCode';
const Breadcrumbs = () => {
return (
<Container fluid className="p-6">
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Breadcrumb</h1>
<p className="mb-0 ">
Indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS.
</p>
</div>
</div>
</Col>
</Row>
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button" className="mb-4">
<h3>Basic example</h3>
<p>
Add <code>active</code> prop to active{' '}
<code>Breadcrumb.Item</code> . Do not set both <code>active</code>{' '}
and <code>href</code> attributes. <code>active</code> overrides{' '}
<code>href</code> and <code>span</code> element is rendered
instead of <code>a</code>.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Breadcrumb>
<Breadcrumb.Item active>Home</Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item active>Library</Breadcrumb.Item>
</Breadcrumb>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="#">Library</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={BasicBreadcrumb} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
</Container>
);
};
export default Breadcrumbs;
================================================
FILE: app/(dashboard)/components/button-group/page.js
================================================
'use client'
// import node module libraries
import {
Col,
Row,
Card,
ButtonGroup,
Button,
ButtonToolbar,
DropdownButton,
Dropdown,
ToggleButton,
ToggleButtonGroup,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicButtonGroupCode,
GroupLinksCode,
MixedStylesCode,
OutlineStylesCode,
CheckboxStyleCode,
RadioStyleCode,
ToolbarStyleCode,
ButtonSizingCode,
ButtonNestingCode,
VerticalButtonCode
} from 'data/code/ButtonGroupCode';
const ButtonGroups = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Button Group</h1>
<p className="mb-0 ">
Group a series of buttons together on a single line with the
button group.
</p>
</div>
</div>
</Col>
</Row>
{/* basic example */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button" className="mb-4">
<h3>Basic example</h3>
<p>
Wrap a series of <code><Button></code>s in a{' '}
<code><ButtonGroup></code>.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup aria-label="Basic example">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BasicButtonGroupCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of basic example */}
{/* groups of links */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="my-4">
<p>
These classes can also be added to groups of links with{' '}
<code>href</code>, as an alternative to the navigation components.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup aria-label="Basic example">
<Button variant="primary" href="#" active>
Active Link
</Button>
<Button variant="primary" href="#">
Link
</Button>
<Button variant="primary" href="#">
Link
</Button>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={GroupLinksCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of groups of links */}
<hr className="mb-5 mt-7" />
{/* mixed styles */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="mixed-styles" className="mb-4">
<h3>Mixed Styles</h3>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup aria-label="Basic mixed styles example">
<Button variant="danger">Left</Button>
<Button variant="warning">Middle</Button>
<Button variant="success">Right</Button>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={MixedStylesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of mixed styles */}
<hr className="mb-5 mt-7" />
{/* mixed outline styles */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="mixed-outline-styles" className="mb-4">
<h3>Outline Styles</h3>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup aria-label="Basic mixed styles example">
<Button variant="outline-primary">Left</Button>
<Button variant="outline-primary">Middle</Button>
<Button variant="outline-primary">Right</Button>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={OutlineStylesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of mixed outline styles */}
<hr className="mb-5 mt-7" />
{/* checkbox and radio button groups */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="checkbox-and-radio-button-groups" className="mb-4">
<h3>Checkbox and radio button groups</h3>
<p>
Combine button-like checkbox and radio toggle buttons into a
seamless looking button group.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ToggleButtonGroup
type="checkbox"
defaultValue={[1]}
className="mb-2"
>
<ToggleButton
id="tbg-check-1"
value={1}
variant="outline-primary"
>
Checkbox 1
</ToggleButton>
<ToggleButton
id="tbg-check-2"
value={2}
variant="outline-primary"
>
Checkbox 2
</ToggleButton>
<ToggleButton
id="tbg-check-3"
value={3}
variant="outline-primary"
>
Checkbox 3
</ToggleButton>
</ToggleButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={CheckboxStyleCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card className="mt-5">
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ToggleButtonGroup
type="radio"
name="options"
defaultValue={1}
>
<ToggleButton
id="tbg-radio-1"
value={1}
variant="outline-primary"
>
Radio 1
</ToggleButton>
<ToggleButton
id="tbg-radio-2"
value={2}
variant="outline-primary"
>
Radio 2
</ToggleButton>
<ToggleButton
id="tbg-radio-3"
value={3}
variant="outline-primary"
>
Radio 3
</ToggleButton>
</ToggleButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={RadioStyleCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of checkbox and radio button groups */}
<hr className="mb-5 mt-7" />
{/* button toolbar */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-toolbar" className="mb-4">
<h3>Button toolbar</h3>
<p>
Combine sets of <code><ButtonGroup></code>s into a{' '}
<code><ButtonToolbar></code> for more complex components.
Use utility classes as needed to space out groups, buttons, and
more.
</p>
</div>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonToolbar aria-label="Toolbar with button groups">
<ButtonGroup className="me-2" aria-label="First group">
<Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
<Button>4</Button>
</ButtonGroup>
<ButtonGroup className="me-2" aria-label="Second group">
<Button>5</Button> <Button>6</Button> <Button>7</Button>
</ButtonGroup>
<ButtonGroup aria-label="Third group">
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ToolbarStyleCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button toolbar */}
<hr className="mb-5 mt-7" />
{/* button sizing */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-sizing" className="mb-4">
<h3>Sizing</h3>
<p>
Instead of applying button sizing props to every button in a
group, just add <code>size</code> prop to the{' '}
<code><ButtonGroup></code>.
</p>
</div>
<Tab.Container id="tab-container-8" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup
aria-label="Basic example"
size="lg"
className="mb-2"
>
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
<br />
<ButtonGroup aria-label="Basic example" className="mb-2">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
<br />
<ButtonGroup aria-label="Basic example" size="sm">
<Button variant="primary">Left</Button>
<Button variant="primary">Middle</Button>
<Button variant="primary">Right</Button>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonSizingCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button sizing */}
<hr className="mb-5 mt-7" />
{/* button nesting */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-nesting" className="mb-4">
<h3>Button Nesting</h3>
<p>
You can place other button types within the{' '}
<code><ButtonGroup></code> like{' '}
<code><DropdownButton></code>s.
</p>
</div>
<Tab.Container id="tab-container-9" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-nested-dropdown"
>
<Dropdown.Item eventKey="1">
Dropdown link
</Dropdown.Item>
<Dropdown.Item eventKey="2">
Dropdown link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonNestingCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button nesting */}
<hr className="mb-5 mt-7" />
{/* button vertical variation */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="vertical-variation" className="mb-4">
<h3>Vertical variation</h3>
<p>
Make a set of buttons appear vertically stacked rather than
horizontally, by adding <code>vertical</code> to the{' '}
<code><ButtonGroup></code>.{' '}
<strong>Split button dropdowns are not supported here.</strong>
</p>
</div>
<Tab.Container id="tab-container-10" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ButtonGroup vertical>
<Button>Button</Button>
<Button>Button</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-1"
>
<Dropdown.Item eventKey="1">
Dropdown link
</Dropdown.Item>
<Dropdown.Item eventKey="2">
Dropdown link
</Dropdown.Item>
</DropdownButton>
<Button>Button</Button>
<Button>Button</Button>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-2"
>
<Dropdown.Item eventKey="1">
Dropdown link
</Dropdown.Item>
<Dropdown.Item eventKey="2">
Dropdown link
</Dropdown.Item>
</DropdownButton>
<DropdownButton
as={ButtonGroup}
title="Dropdown"
id="bg-vertical-dropdown-3"
>
<Dropdown.Item eventKey="1">
Dropdown link
</Dropdown.Item>
<Dropdown.Item eventKey="2">
Dropdown link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={VerticalButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button vertical variation */}
</Container>
);
};
export default ButtonGroups;
================================================
FILE: app/(dashboard)/components/buttons/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Button,
Card,
Spinner,
ToggleButton,
ToggleButtonGroup,
Nav,
Tab,
Container
} from 'react-bootstrap';
import { ShoppingBag } from 'react-feather';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
RegularButtonCode,
ButtonTagsCode,
OutlineButtonsCode,
ButtonSizesCode,
BlockButtonCode,
ResponsiveButtonCode,
BlockButtonWidthCode,
ButtonAlignmentCode,
ButtonIconsCode,
ButtonIcons2Code,
ButtonIconsSizeCode,
ActiveStateCode,
DisabledStateCode,
ToggleStatesCode
} from 'data/code/ButtonsCode';
const Buttons = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Buttons</h1>
<p className="mb-0 ">
Custom button styles for actions in forms, dialogs, and more
with support for multiple sizes, states, and more.
</p>
</div>
</div>
</Col>
</Row>
{/* regular button */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-tags" className="mb-4">
<h3>Regular Button</h3>
<p>
Use any of the available button style types to quickly create a
styled button. Just modify the <code>variant</code> prop.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary" className="me-1 mb-2">
Primary
</Button>
<Button variant="secondary" className="me-1 mb-2">
Secondary
</Button>
<Button variant="success" className="me-1 mb-2">
Success
</Button>
<Button variant="warning" className="me-1 mb-2">
Warning
</Button>
<Button variant="danger" className="me-1 mb-2">
Danger
</Button>
<Button variant="info" className="me-1 mb-2">
Info
</Button>
<Button variant="light" className="me-1 mb-2">
Light
</Button>
<Button variant="dark" className="me-1 mb-2">
Dark
</Button>
<Button variant="link" className="me-1 mb-2">
Link
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={RegularButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of regular button */}
<hr className="mb-5 mt-7" />
{/* button tags */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-tags" className="mb-4">
<h3>Button tags</h3>
<p>
Normally <code><Button></code> components will render a HTML{' '}
<code><button></code> element. However you can render
whatever you'd like, adding a <code>href</code> prop will
automatically render an <code><a/></code> element. You can
use the <code>as</code> prop to render whatever your heart
desires. React Bootstrap will take care of the proper ARIA roles
for you.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button href="#" className="me-1 mb-2">
Link
</Button>
<Button type="submit" className="me-1 mb-2">
Button
</Button>
<Button
as="input"
type="button"
value="Input"
className="me-1 mb-2"
/>
<Button
as="input"
type="submit"
value="Submit"
className="me-1 mb-2"
/>
<Button
as="input"
type="reset"
value="Reset"
className="me-1 mb-2"
/>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonTagsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button tags */}
<hr className="mb-5 mt-7" />
{/* outline buttons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="outline-button" className="mb-4">
<h3>Outline buttons</h3>
<p>
For a lighter touch, Buttons also come in <code>outline-*</code>{' '}
variants with no background color.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="outline-primary" className="me-1 mb-2">
Primary
</Button>
<Button variant="outline-secondary" className="me-1 mb-2">
Secondary
</Button>
<Button variant="outline-success" className="me-1 mb-2">
Success
</Button>
<Button variant="outline-warning" className="me-1 mb-2">
Warning
</Button>
<Button variant="outline-danger" className="me-1 mb-2">
Danger
</Button>
<Button variant="outline-info" className="me-1 mb-2">
Info
</Button>
<Button variant="outline-light" className="me-1 mb-2">
Light
</Button>
<Button variant="outline-dark" className="me-1 mb-2">
Dark
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={OutlineButtonsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of outline buttons */}
<hr className="mb-5 mt-7" />
{/* sizes */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="sizes" className="mb-4">
<h3>Sizes</h3>
<p>
Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button
variant="primary"
size="lg"
className="me-1 mb-2 mb-lg-0"
>
Large button
</Button>
<Button variant="primary" className="me-1 mb-2">
Default button
</Button>
<Button variant="primary" size="sm" className="me-1 mb-2">
Small button
</Button>
<Button variant="primary" size="xs" className="me-1 mb-2">
Xtra Small button
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonSizesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of sizes */}
{/* block buttons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12} className="mt-5">
<div id="buttonBlock" className="mb-4">
<h3>Block buttons</h3>
<p>
Create responsive stacks of full-width, “block buttons” like those
in Bootstrap 4 with a mix of our display and gap utilities.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<div className="d-grid gap-2">
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
</div>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BlockButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of block buttons */}
{/* block buttons responsive variation */}
<Row>
<Col xl={12} lg={12} md={12} sm={12} className="mt-5">
<p className="mb-3">
Here we create a responsive variation, starting with vertically
stacked buttons until the <code>md</code> breakpoint, where{' '}
<code>.d-md-block</code> replaces the <code>.d-grid</code> class,
thus nullifying the <code>gap-2</code> utility. Resize your browser
to see that change.
</p>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<div className="d-grid gap-2 d-md-block">
<Button variant="primary" className="me-1">
Button
</Button>
<Button variant="primary" className="me-1">
Button
</Button>
</div>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ResponsiveButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of block buttons responsive variation*/}
{/* adjust the width of your block buttons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12} className="mt-5">
<p className="mb-3">
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width “block button”, use{' '}
<code>md={6}</code>. Center it horizontally with{' '}
<code>.mx-auto</code>, too.
</p>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Row>
<Col md={6} className="d-grid gap-2 mx-auto">
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
</Col>
</Row>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BlockButtonWidthCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of adjust the width of your block buttons */}
{/* alignment of buttons when horizontal */}
<Row>
<Col xl={12} lg={12} md={12} sm={12} className="mt-5">
<p className="mb-3">
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we’ve taken our previous responsive example
and added some flex utilities and a margin utility on the button to
right align the buttons when they’re no longer stacked.
</p>
<Tab.Container id="tab-container-8" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<div className="d-grid gap-2 d-md-flex justify-content-md-end">
<Button variant="primary">Button</Button>
<Button variant="primary">Button</Button>
</div>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonAlignmentCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of alignment of buttons when horizontal */}
<hr className="mb-5 mt-7" />
{/* button icons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="button-icon" className="mb-4">
<h3>Button icons </h3>
<p>A contained button with an icon.</p>
</div>
<Tab.Container id="tab-container-9" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary">
Your Text Goes Here <ShoppingBag size="18px" />
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonIconsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button icons */}
{/* button icons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mt-5 mb-3">With fixed width and height.</div>
<Tab.Container id="tab-container-10" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary" className="me-1">
+
</Button>{' '}
<Button variant="primary">
<Spinner animation="border" size="sm" />
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonIcons2Code} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button icons */}
{/* button icons sizes*/}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mt-5 mb-3">Also available in all button sizes.</div>
<Tab.Container id="tab-container-11" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary" size="lg" className="me-1">
+
</Button>
<Button variant="primary" className="me-1">
+
</Button>
<Button variant="primary" size="sm" className="me-1">
+
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ButtonIconsSizeCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of button icons sizes */}
<hr className="mb-5 mt-7" />
{/* active state */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="active-state" className="mb-4">
<h3>Active state</h3>
<p>
To set a button's active state simply set the component's <code>active</code> prop.
</p>
</div>
<Tab.Container id="tab-container-12" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary" active className="me-1">
Primary button
</Button>
<Button variant="secondary" active className="me-1">
Button
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ActiveStateCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of active state */}
<hr className="mb-5 mt-7" />
{/* disabled state */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="disabled-state" className="mb-4">
<h3>Disabled state</h3>
<p>
Make buttons look inactive by adding the <code>disabled</code>{' '}
prop to.
</p>
</div>
<Tab.Container id="tab-container-13" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Button variant="primary" disabled className="me-1">
Primary button
</Button>
<Button variant="secondary" disabled className="me-1">
Button
</Button>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DisabledStateCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of disabled state */}
<hr className="mb-5 mt-7" />
{/* toggle state */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="toggle-state" className="mb-4">
<h3>Toggle states</h3>
<p>
Buttons can also be used to style <code>checkbox</code> and{' '}
<code>radio</code> form elements. This is helpful when you want a
toggle button that works neatly inside an HTML form.
</p>
</div>
<Tab.Container id="tab-container-14" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<ToggleButtonGroup type="checkbox" className="mb-2 me-1">
<ToggleButton id="tbg-check-1" value={1}>
Toggle button
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
type="checkbox"
defaultValue={1}
className="mb-2 me-1"
>
<ToggleButton id="tbg-check-1" value={1}>
Active toggle button
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup type="checkbox" className="mb-2 me-1">
<ToggleButton id="tbg-check-1" value={1} disabled>
Disabled toggle button
</ToggleButton>
</ToggleButtonGroup>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ToggleStatesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of toggle state */}
</Container>
);
};
export default Buttons;
================================================
FILE: app/(dashboard)/components/cards/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
Button,
ListGroup,
ListGroupItem,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicCardCode,
CardBodyCode,
TitlesTextLinksCode,
ListGroups1Code,
ListGroups2Code,
CardImagesCode,
KitchenSinkCode,
HeaderFooterCode,
HeaderFooterCode2,
TextAlignmentCode,
ImagesTopBottomCode,
ImageOverlaysCode
} from 'data/code/CardsCode';
const Cards = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Cards</h1>
<p className="mb-0 ">
Geek's cards provide a flexible and extensible content container
with multiple variants and options.
</p>
</div>
</div>
</Col>
</Row>
{/* card */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="card" className="mb-4">
<h3>Basic Example</h3>
<p className="mb-0">
Below is an example of a basic card with mixed content and a fixed
width.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="/images/placeholder/placeholder-4by3.svg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BasicCardCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of card */}
<hr className="mb-5 mt-7" />
{/* content-types */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="content-types" className="mb-4">
<div className="mt-3" id="body">
<h3>Card Body</h3>
<p>
Use <code><Card.Body></code> to pad content inside a{' '}
<code><Card></code>.
</p>
</div>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card>
<Card.Body>
This is some text within a card body.
</Card.Body>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={CardBodyCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of content-types */}
<hr className="mb-5 mt-7" />
{/* Titles, text, and links */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="titles-text-links" className="mb-4">
<h3>Titles, text, and links</h3>
<p>
Using <code><Card.Title></code>,{' '}
<code><Card.Subtitle></code>, and{' '}
<code><Card.Text></code> inside the{' '}
<code><Card.Body></code> will line them up nicely.{' '}
<code><Card.Link></code>s are used to line up links next to
each other.
</p>
<p>
{' '}
<code><Card.Text></code> outputs <code><p></code> tags
around the content, so you can use multiple{' '}
<code><Card.Text></code>s to create separate paragraphs.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* Code started */}
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
Card Subtitle
</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={TitlesTextLinksCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Titles, text, and links */}
<hr className="mb-5 mt-7" />
{/* List Groups */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="list-groups" className="mb-4">
<h3>List Groups</h3>
<p>Create lists of content in a card with a flush list group.</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* Code started */}
<Card style={{ width: '18rem' }}>
<ListGroup variant="flush">
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
</Card>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ListGroups1Code} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
<br />
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card style={{ width: '18rem' }}>
<Card.Header>Featured</Card.Header>
<ListGroup variant="flush">
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ListGroups2Code} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of List Groups */}
<hr className="mb-5 mt-7" />
{/* image */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="image" className="mb-4">
<h3>Images</h3>
<p>
<code><Card.Img></code> with <code>variant="top"</code>{' '}
places an image to the top of the card. With{' '}
<code><Card.Text></code>, text can be added to the card.
Text within <code><Card.Text></code> can also be styled with
the standard HTML tags.
</p>
</div>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="/images/placeholder/placeholder-4by3.svg" />
<Card.Body>
<Card.Text>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</Card.Text>
</Card.Body>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={CardImagesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of image */}
<hr className="mb-5 mt-7" />
{/* kitchen-sink */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="kitchen-sink" className="mb-4">
<h3>Kitchen sink</h3>
<p>
Mix and match multiple content types to create the card you need,
or throw everything in there. Shown below are image styles,
blocks, text styles, and a list group—all wrapped in a fixed-width
card.
</p>
</div>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="/images/placeholder/placeholder-4by3.svg" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and
make up the bulk of the card's content.
</Card.Text>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
<Card.Body>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={KitchenSinkCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of kitchen-sink */}
<hr className="mb-5 mt-7" />
{/* header-footer */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="header-footer" className="mb-4">
<h3>Header and Footer</h3>
<p>
You may add a header by adding a <code><Card.Header></code>{' '}
component.
</p>
</div>
<Tab.Container id="tab-container-8" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card>
<Card.Header>Featured</Card.Header>
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to
additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={HeaderFooterCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
<br />
<Tab.Container id="tab-container-9" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
<Card className="text-center">
<Card.Header>Featured</Card.Header>
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to
additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
<Card.Footer className="text-muted">
2 days ago
</Card.Footer>
</Card>
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={HeaderFooterCode2} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of header-footer */}
<hr className="mb-5 mt-7" />
{/* text-alignment */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="text-alignment" className="mb-4">
<h3>Text alignment</h3>
<p>
You can quickly change the text alignment of any card—in its
entirety or specific parts—with our text align classes.
</p>
</div>
<Tab.Container id="tab-container-10" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to
additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card style={{ width: '18rem' }} className="text-center">
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to
additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Card style={{ width: '18rem' }} className="text-end">
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to
additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={TextAlignmentCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of text-alignment */}
<hr className="mb-5 mt-7" />
{/* images */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="images" className="mb-4">
<h3>Images</h3>
<p>
Cards include a few options for working with images. Choose from
appending “image caps” at either end of a card, overlaying images
with card content, or simply embedding the image in a card.
</p>
<div className="mt-3" id="image-caps">
<h3>Image caps</h3>
<p>
Similar to headers and footers, cards can include top and bottom
“image caps”—images at the top or bottom of a card.
</p>
</div>
</div>
<Tab.Container id="tab-container-11" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* Code started */}
<Card>
<Card.Img variant="top" src="/images/placeholder/placeholder-4by3.svg" />
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
</Card.Text>
<Card.Text>
<small className="text-muted">
Last updated 3 mins ago
</small>
</Card.Text>
</Card.Body>
</Card>
<br />
<Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
</Card.Text>
<Card.Text>
<small className="text-muted">
Last updated 3 mins ago
</small>
</Card.Text>
</Card.Body>
<Card.Img variant="bottom" src="/images/placeholder/placeholder-4by3.svg" />
</Card>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ImagesTopBottomCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of images */}
<hr className="mb-5 mt-7" />
{/* image-overlays */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="image-overlays" className="mb-4">
<h3>Image overlays</h3>
<p>
Turn an image into a card background and overlay your card’s text.
Depending on the image, you may or may not need additional styles
or utilities.
</p>
</div>
<Tab.Container id="tab-container-12" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* Code start */}
<Card className="bg-dark text-white">
<Card.Img variant="bottom" src="/images/placeholder/placeholder-4by3.svg" />
<Card.ImgOverlay>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
</Card.Text>
<Card.Text>Last updated 3 mins ago</Card.Text>
</Card.ImgOverlay>
</Card>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ImageOverlaysCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of image-overlays */}
</Container>
);
};
export default Cards;
================================================
FILE: app/(dashboard)/components/carousels/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import { Col, Row, Card, Carousel, Image, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SlidesOnlyCode,
WithControlCode,
WithIndicatorsCode,
WithCaptionCode,
CrossfadeCode,
IndividualCode,
DarkVariantCode
} from 'data/code/CarouselsCode';
const Carousels = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Carousel</h1>
<p className="mb-0 ">
A slideshow component for cycling through elements—images or
slides of text—like a carousel.
</p>
</div>
</div>
</Col>
</Row>
{/* slide only */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="slide" className="mb-4">
<h3>Slides only</h3>
<p>
Here’s a carousel with slides only. Note the presence of the{' '}
<code className="highlighter-rouge">.d-block</code> and{' '}
<code className="highlighter-rouge">.w-100</code> on carousel
images to prevent browser default image alignment.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel controls={false} indicators={false}>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={SlidesOnlyCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of slide only */}
<hr className="mb-5 mt-5" />
{/* with controls */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="with-controls" className="mb-4">
<h3>With Control</h3>
<p>Adding in the previous and next controls:</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel indicators={false}>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={WithControlCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of with controls */}
<hr className="mb-5 mt-5" />
{/* with indicators */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="with-indicators" className="mb-4">
<h3> With indicators</h3>
<p>
You can also add the indicators to the carousel, alongside the
controls, too.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel indicators>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={WithIndicatorsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of with indicators */}
<hr className="mb-5 mt-5" />
{/* with caption */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="with-caption" className="mb-4">
<h3>With caption</h3>
<p>
Add captions to your slides easily with the{' '}
<code><Carousel.Caption></code> within any{' '}
<code><Carousel.Item></code>.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0 ">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel activeIndex={index} onSelect={handleSelect}>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
<Carousel.Caption>
<h3 className="text-white">First slide label</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis
interdum.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
<Carousel.Caption>
<h3 className="text-white">Second slide label</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
<Carousel.Caption>
<h3 className="text-white">Third slide label</h3>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur.
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={WithCaptionCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of with caption */}
<hr className="mb-5 mt-5" />
{/* crossfade */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="crossfade" className="mb-4">
<h3>Crossfade</h3>
<p>
Add the <code>fade</code> prop to your carousel to animate slides
with a fade transition instead of a slide.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel fade indicators={false}>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={CrossfadeCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of crossfade */}
<hr className="mb-5 mt-5" />
{/* individual */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="individual" className="mb-4">
<h3>Individual</h3>
<p>
You can specify individual intervals for each carousel item via
the <code>interval</code> prop.
</p>
</div>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel indicators={false}>
<Carousel.Item interval={1000}>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item interval={500}>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={IndividualCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of individual */}
<hr className="mb-5 mt-5" />
{/* dark variant */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="dark-variant" className="mb-4">
<h3>Dark Variant</h3>
<p>
Add <code>variant="dark"</code> to the <code>Carousel</code> for
darker controls, indicators, and captions.
</p>
</div>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Carousel variant="dark">
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-1.jpg"
alt="First slide"
/>
<Carousel.Caption>
<h5>First slide label</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis
interdum.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-2.jpg"
alt="Second slide"
/>
<Carousel.Caption>
<h5>Second slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<Image
className="d-block w-100"
src="/images/background/slider-img-3.jpg"
alt="Third slide"
/>
<Carousel.Caption>
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur.
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DarkVariantCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of dark variant */}
</Container>
);
};
export default Carousels;
================================================
FILE: app/(dashboard)/components/close-button/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Col, Row, Card, CloseButton, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
GenericCloseButtonCode,
DisabledStateCode,
WhiteVariantCode
} from 'data/code/CloseCode';
const CloseButtons = () => {
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Close Buttons</h1>
<p className="mb-0 ">
A generic close button for dismissing content like modals and
alerts.
</p>
</div>
</div>
</Col>
</Row>
{/* generic close button */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mb-4">
<h3>Examples</h3>
<p className="mb-0">
Provide an option to dismiss or close a component with{' '}
<code><CloseButton></code>.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<CloseButton className="btn-close" />
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={GenericCloseButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of generic close button */}
<hr className="mb-5 mt-7" />
{/* Disabled state */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mb-4">
<h3>Disabled state</h3>
<p>
Bootstrap adds relevant styling to a disabled close button to
prevent user interactions.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<CloseButton className="btn-close" disabled />
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={DisabledStateCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Disabled state*/}
<hr className="mb-5 mt-7" />
{/* White variant */}
<Row>
<Col xl={12} lg={12} md={12} sm={12} className="mb-5">
<div className="mb-4">
<h3>White variant</h3>
<p>
Change the default dark color to white using{' '}
<code>variant="white"</code>.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<div className="bg-dark p-3">
<CloseButton className="btn-close" variant="white" />
<CloseButton
className="btn-close"
variant="white"
disabled
/>
</div>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={WhiteVariantCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of White variant */}
</Container>
);
};
export default CloseButtons;
================================================
FILE: app/(dashboard)/components/collapse/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import {
Col,
Row,
Card,
Button,
Collapse,
Fade,
Tab,
Nav,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import { FadeCollapses, BasicCollapsesCode } from 'data/code/CollapsesCode';
const Collapses = () => {
const [open, setOpen] = useState(false);
const [openFade, setOpenFade] = useState(false);
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Collapse </h1>
<p className="mb-0 ">
Add a collapse toggle animation to an element or component.
</p>
</div>
</div>
</Col>
</Row>
{/* Collapses */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<Tab.Container id="tab-container-1" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Button
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
Toggle Button
</Button>
<Collapse in={open}>
<div id="example-collapse-text" className="pt-3">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</div>
</Collapse>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={BasicCollapsesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Collapses */}
<hr className="mb-5 mt-7" />
{/* Fade Collapses */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mb-4">
<h3 className="doc-section-head-title">Fade</h3>
<p className="mb-0">
Add a fade animation to a child element or component.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="all">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="all" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="approved" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="all" className="pb-4 p-4">
<Button
onClick={() => setOpenFade(!openFade)}
aria-controls="example-fade-text"
aria-expanded={openFade}
>
Toggle text
</Button>
<Fade in={openFade}>
<div id="example-fade-text" className="pt-4">
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</div>
</Fade>
</Tab.Pane>
<Tab.Pane eventKey="approved" className="pb-4 p-4 react-code">
<HighlightCode code={FadeCollapses} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of Fade Collapses */}
</Container>
);
};
export default Collapses;
================================================
FILE: app/(dashboard)/components/dropdowns/page.js
================================================
'use client'
// import node module libraries
import {
Col,
Row,
Card,
Dropdown,
ButtonGroup,
DropdownButton,
SplitButton,
Form,
Button,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import hooks
import useMounted from 'hooks/useMounted';
// import react code data file
import {
BasicDropdownCode,
SplitDropdownCode,
DropdownVariantCode,
DropdownSizingCode,
DirectionsCode,
MenuAlignmentCode,
ResponsiveMenuAlignmentCode1,
ResponsiveMenuAlignmentCode2,
MenuContentCode,
DividersCode,
FormsCode1,
FormsCode2
} from 'data/code/DropdownsCode';
const Dropdowns = () => {
const hasMounted = useMounted();
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Dropdowns</h1>
<p className="mb-0 ">
Toggle contextual overlays for displaying lists of links and
more with the Bootstrap dropdown plugin.
</p>
</div>
</div>
</Col>
</Row>
{/* basic */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="basic" className="mb-4">
<h3>Basic</h3>
<p>
The basic Dropdown is composed of a wrapping <code>Dropdown</code>{' '}
and inner <code><DropdownMenu></code>, and{' '}
<code><DropdownToggle></code>. By default the{' '}
<code><DropdownToggle></code> will render a Button component
and accepts all the same props.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown>
<Dropdown.Toggle variant="secondary" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">
Another action
</Dropdown.Item>
<Dropdown.Item href="#/action-3">
Something else
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BasicDropdownCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of basic */}
<hr className="mb-5 mt-7" />
{/* split button */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="split-button" className="mb-4">
<h3>Split Button</h3>
<p>
Similarly, You create a split dropdown by combining the Dropdown
components with another Button and a ButtonGroup.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown as={ButtonGroup}>
<Button variant="secondary">Split Button</Button>
<Dropdown.Toggle
split
variant="secondary"
id="dropdown-split-basic"
/>
<Dropdown.Menu>
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={SplitDropdownCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of split button */}
<hr className="mb-5 mt-7" />
{/* options */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="options" className="mb-4">
<h3>Options</h3>
<p>
The best part is you can do this with any button variant, too:
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
{[
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Danger'
].map((variant) => (
<DropdownButton
as={ButtonGroup}
key={variant}
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
{' '}
Something else
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
))}
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DropdownVariantCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of options */}
<hr className="mb-5 mt-7" />
{/* sizing */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="sizing" className="mb-4">
<h3>Sizing</h3>
<p>
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="lg"
variant="secondary"
title={
idx === 0 ? 'Large button' : 'Large split button'
}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownType>
))}
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="sm"
variant="secondary"
title={
idx === 0 ? 'Small button' : 'Small split button'
}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownType>
))}
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DropdownSizingCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of sizing */}
<hr className="mb-5 mt-7" />
{/* directions */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="directions" className="mb-4">
<h3>Directions</h3>
<p>
Trigger dropdown menus above, below, left, or to the right of
their toggle elements, with the <code>drop</code> prop.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<div className="mb-2">
{['up', 'down', 'start', 'end'].map((direction) => (
<DropdownButton
as={ButtonGroup}
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={` Drop ${direction} `}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
))}
</div>
<div>
{['up', 'down', 'start', 'end'].map((direction) => (
<SplitButton
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={`Drop ${direction}`}
className="me-1 mb-2 mb-lg-0 "
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</SplitButton>
))}
</div>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DirectionsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of directions */}
<hr className="mb-5 mt-7" />
{/* alignment */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="alignment" className="mb-4">
<h3>Menu Alignment</h3>
<p>
By default, a dropdown menu is aligned to the left, but you can
switch it by passing align="end" to a{' '}
<code><Dropdown></code>, <code><DropdownButton></code>
, or <code><SplitButton></code>.
</p>
</div>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ButtonGroup aria-label="Basic example">
<DropdownButton
align="start"
title="Left aligned dropdown "
id="dropdown-menu-align-start"
className="me-1 mb-2 mb-lg-0"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
<ButtonGroup aria-label="Basic example">
<DropdownButton
align="end"
title="Right aligned dropdown "
id="dropdown-menu-align-end"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={MenuAlignmentCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of alignment */}
<hr className="mb-5 mt-7" />
{/* responsive men alignment */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="alignment" className="mb-4 mt-4">
<h3>Responsive Menu Alignment</h3>
<p>
If you want to use responsive menu alignment, pass an object
containing a breakpoint to the align prop on the{' '}
<code><DropdownMenu></code>,{' '}
<code><DropdownButton></code>, or{' '}
<code><SplitButton></code>. You can specify start or end for
the various breakpoints.
</p>
</div>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ButtonGroup aria-label="Basic example">
<DropdownButton
align={{ lg: 'end' }}
title="Left-aligned but right aligned when large screen"
id="dropdown-menu-align-end"
className="me-1"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ResponsiveMenuAlignmentCode1} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
{/* responsive men alignment */}
<Tab.Container id="tab-container-8" defaultActiveKey="design">
<Card className="mt-4">
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ButtonGroup aria-label="Basic example">
<DropdownButton
align={{ lg: 'start' }}
title="Right aligned but left aligned when large screen"
id="dropdown-menu-align-start"
className="me-1"
>
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">
Another action
</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">
Separated link
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ResponsiveMenuAlignmentCode2} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of responsive men alignment */}
<hr className="mb-5 mt-7" />
{/* menu-content */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="menu-content" className="mb-4">
<h3>Menu content</h3>
<div className="mt-4" id="headers">
<h3>Header</h3>
<p>
Add a header to label sections of actions in any dropdown menu.
</p>
</div>
</div>
<Tab.Container id="tab-container-9" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown.Menu show className="position-static">
<Dropdown.Header>Dropdown header</Dropdown.Header>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
</Dropdown.Menu>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={MenuContentCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of menu-content */}
<hr className="mb-5 mt-7" />
{/* dividers */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="dividers" className="mb-4">
<h3>Dividers</h3>
<p>Separate groups of related menu items with a divider.</p>
</div>
<Tab.Container id="tab-container-10" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown.Menu show className="position-static">
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3">
Something else here
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</Dropdown.Menu>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DividersCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of dividers */}
<hr className="mb-5 mt-7" />
{/* forms */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="forms" className="mb-4">
<h3>Forms</h3>
<p>
Put a form within a dropdown menu, or make it into a dropdown
menu, and use margin or padding utilities to give it the negative
space you require.
</p>
</div>
<Tab.Container id="tab-container-11" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown.Menu show className="position-static">
{hasMounted &&
<Form className="dropdown-form p-4">
<Form.Group
className="mb-3"
controlId="formBasicEmail1"
>
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group
className="mb-3"
controlId="formBasicPassword1"
>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="formBasicCheckbox1"
>
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button variant="primary" type="submit">
{' '}
Sign in
</Button>
</Form>
}
<Dropdown.Divider />
<Dropdown.Item>New around here? Sign up</Dropdown.Item>
<Dropdown.Item>Forgot password?</Dropdown.Item>
</Dropdown.Menu>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={FormsCode1} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of forms */}
<hr className="mb-5 mt-7" />
{/* */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<Tab.Container id="tab-container-12" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<Dropdown.Menu show className="position-static">
{hasMounted &&
<Form className="dropdown-form p-4">
<Form.Group
className="mb-3"
controlId="formBasicEmail2"
>
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.{' '}
</Form.Text>
</Form.Group>
<Form.Group
className="mb-3"
controlId="formBasicPassword2"
>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="formBasicCheckbox2"
>
<Form.Check type="checkbox" label="Remember me" />
</Form.Group>
<Button variant="primary" type="submit">
Sign in{' '}
</Button>
</Form>}
</Dropdown.Menu>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={FormsCode2} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of */}
</Container>
);
};
export default Dropdowns;
================================================
FILE: app/(dashboard)/components/list-group/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
ListGroup,
Badge,
Image,
Tab,
Nav,
Container
} from 'react-bootstrap';
import { PlayCircle, Award, Calendar, Video, Clock } from 'react-feather';
// import sub custom components
import DotBadge from 'components/bootstrap/DotBadge';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicListgroupCode,
ActiveItemCode,
DisabledItemsCode,
LinksButtonsCode,
ListButtonCode,
FlushListgroupCode,
HorizontalListgroupCode,
HorizontalListgroupCode2,
ContextualClassesCode,
WithBadgesCode,
CustomContentCode,
WithIconCode,
GroupWithIconCode
} from 'data/code/ListgroupsCode';
const Listgroups = () => {
function alertClicked() {
alert('You clicked a ListGroupItem');
}
return (
<Container fluid className="p-6">
<Row>
<Col lg={12} md={12} sm={12}>
<div className="border-bottom pb-4 mb-4 d-md-flex align-items-center justify-content-between">
<div className="mb-3 mb-md-0">
<h1 className="mb-1 h2 fw-bold">Listgroup</h1>
<p className="mb-0 ">
List groups are a flexible and powerful component for displaying
a series of content. Modify and extend them to support just
about any content within.
</p>
</div>
</div>
</Col>
</Row>
{/* basic example */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="basic-example" className="mb-4">
<h3>Basic list</h3>
<p>
The most basic list group is an unordered list with list items and
the proper classes. Build upon it with the options that follow, or
with your own CSS as needed.
</p>
</div>
<Tab.Container id="tab-container-1" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup>
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={BasicListgroupCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of basic example */}
<hr className="mb-5 mt-7" />
{/* active items */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="active-items" className="mb-4">
<h3>Active Item</h3>
<p>
Set the <code>active</code> prop to indicate the list groups
current active selection.
</p>
</div>
<Tab.Container id="tab-container-2" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup>
<ListGroup.Item active>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ActiveItemCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of active items */}
<hr className="mb-5 mt-7" />
{/* disabled items */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="disabled-items" className="mb-4">
<h3>Disabled Items</h3>
<p>
Set the <code>disabled</code> prop to prevent actions on a{' '}
<code><ListGroup.Item></code>. For elements that aren't
naturally disable-able (like anchors) <code>onClick</code>{' '}
handlers are added that call <code>preventDefault</code> to mimick
disabled behavior.
</p>
</div>
<Tab.Container id="tab-container-3" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup>
<ListGroup.Item disabled>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={DisabledItemsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of disabled items */}
<hr className="mb-5 mt-7" />
{/* links-and-buttons */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="links-and-buttons" className="mb-4">
<h3>Links and buttons</h3>
<p>
Use <code>href</code> and <code>action</code> props to create{' '}
<em>actionable</em> list group items with hover, disabled, and
active states.
</p>
</div>
<Tab.Container id="tab-container-4" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup defaultActiveKey="#link1">
<ListGroup.Item action href="#link1" active>
Cras justo odio
</ListGroup.Item>
<ListGroup.Item action href="#link2">
Dapibus ac facilisis in
</ListGroup.Item>
<ListGroup.Item action href="#link3">
Morbi leo risus
</ListGroup.Item>
<ListGroup.Item action href="#link4">
Porta ac consectetur ac
</ListGroup.Item>
<ListGroup.Item action href="#link5" disabled>
Vestibulum at eros
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={LinksButtonsCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of links-and-buttons */}
<hr className="mb-5 mt-7" />
{/* List button */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div className="mb-4">
<p>
With <code>onClick</code> function parameter, list group will
create <code><button></code>s, you can also make use of the{' '}
<code>disabled</code> and <code>active</code> attributes.
</p>
</div>
<Tab.Container id="tab-container-5" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup defaultActiveKey="#link1">
<ListGroup.Item action onClick={alertClicked} active>
Cras justo odio
</ListGroup.Item>
<ListGroup.Item action onClick={alertClicked}>
Dapibus ac facilisis in
</ListGroup.Item>
<ListGroup.Item action onClick={alertClicked}>
Morbi leo risus
</ListGroup.Item>
<ListGroup.Item action onClick={alertClicked}>
Porta ac consectetur ac
</ListGroup.Item>
<ListGroup.Item action onClick={alertClicked} disabled>
Vestibulum at eros
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ListButtonCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of List button */}
<hr className="mb-5 mt-7" />
{/* flush */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="flush" className="mb-4">
<h3>Flush</h3>
<p>
Add the <code>flush</code> variant to remove outer borders and
rounded corners to render list group items edge-to-edge in a
parent container such as a Card.
</p>
</div>
<Tab.Container id="tab-container-6" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup variant="flush">
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
<ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
<ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={FlushListgroupCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of flush */}
<hr className="mb-5 mt-7" />
{/* horizontal */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="horizontal" className="mb-4">
<h3>Horizontal</h3>
<p>
Use the <code>horizontal</code> prop to make the ListGroup render
horizontally. Currently{' '}
<strong>
horizontal list groups cannot be combined with flush list
groups.
</strong>
</p>
</div>
<Tab.Container id="tab-container-7" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup horizontal>
<ListGroup.Item>Cras justo odio</ListGroup.Item>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item>Morbi leo risus</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={HorizontalListgroupCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of horizontal */}
{/* horizontal */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="horizontal" className="mb-4 mt-4">
<p>
<strong>ProTip:</strong> Want equal-width list group items when
horizontal? Add <code>.flex-fill</code> to each list group item.
</p>
</div>
<Tab.Container id="tab-container-8" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup horizontal>
<ListGroup.Item className="flex-fill">
Cras justo odio
</ListGroup.Item>
<ListGroup.Item className="flex-fill">
Dapibus ac facilisis in
</ListGroup.Item>
<ListGroup.Item className="flex-fill">
Morbi leo risus
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={HorizontalListgroupCode2} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of horizontal */}
<hr className="mb-5 mt-7" />
{/* contextual-classes */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="contextual-classes" className="mb-4">
<h3>Contextual classes</h3>
<p>
Use contextual <code>variant</code>s on{' '}
<code><ListGroup.Item></code>s to style them with a stateful
background and color.
</p>
</div>
<Tab.Container id="tab-container-9" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup>
<ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
<ListGroup.Item variant="primary">
This is a Primary list group item
</ListGroup.Item>
<ListGroup.Item variant="secondary">
This is a Secondary list group item
</ListGroup.Item>
<ListGroup.Item variant="success">
This is a Success list group item
</ListGroup.Item>
<ListGroup.Item variant="danger">
This is a Danger list group item
</ListGroup.Item>
<ListGroup.Item variant="warning">
This is a Warning list group item
</ListGroup.Item>
<ListGroup.Item variant="info">
This is a Info list group item
</ListGroup.Item>
<ListGroup.Item variant="light">
This is a Light list group item
</ListGroup.Item>
<ListGroup.Item variant="dark">
This is a Dark list group item
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={ContextualClassesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of contextual-classes */}
<hr className="mb-5 mt-7" />
{/* with-badges */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="with-badges" className="mb-4">
<h3>With badges</h3>
<p>
Add <code><Badge></code> to any list group item to show
unread counts, activity, and more with the help of some utilities.
</p>
</div>
<Tab.Container id="tab-container-10" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup>
<ListGroup.Item className="d-flex justify-content-between">
Cras justo odio <Badge bg="primary">14</Badge>{' '}
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-between">
Dapibus ac facilisis in <Badge bg="primary">2</Badge>
</ListGroup.Item>
<ListGroup.Item className="d-flex justify-content-between">
Morbi leo risus <Badge bg="primary">1</Badge>
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={WithBadgesCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of with-badges */}
<hr className="mb-5 mt-7" />
{/* custom-content */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="custom-content" className="mb-4">
<h3>Custom content</h3>
<p>
Add nearly any HTML within, even for linked list groups like the
one below, with the help of flexbox utilities.
</p>
</div>
<Tab.Container id="tab-container-11" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup defaultActiveKey="#link1">
<ListGroup.Item action href="#link1" active>
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</ListGroup.Item>
<ListGroup.Item action href="#link2">
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</ListGroup.Item>
<ListGroup.Item action href="#link3">
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={CustomContentCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of custom-content */}
<hr className="mb-5 mt-7" />
{/* with icon */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="withIcon" className="mb-4">
<h3 className="mb-0">List Group with Icon</h3>
</div>
<Tab.Container id="tab-container-12" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup variant="flush">
<ListGroup.Item>
<PlayCircle
size="15px"
className="align-middle me-2 text-primary"
/>
12 hours video
</ListGroup.Item>
<ListGroup.Item>
<Award
size="15px"
className="align-middle me-2 text-success"
/>
Certificate
</ListGroup.Item>
<ListGroup.Item>
<Calendar
size="15px"
className="align-middle me-2 text-info"
/>
12 Article
</ListGroup.Item>
<ListGroup.Item>
<Video
size="15px"
className="align-middle me-2 text-secondary"
/>
Watch Offline
</ListGroup.Item>
<ListGroup.Item>
<Clock
size="15px"
className="align-middle me-2 text-warning"
/>
Lifetime access
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={WithIconCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of with icon */}
<hr className="mb-5 mt-7" />
{/* List group with icon */}
<Row>
<Col xl={12} lg={12} md={12} sm={12}>
<div id="simpleList" className="mb-4">
<h3 className="mb-0">List with Data</h3>
</div>
<Tab.Container id="tab-container-13" defaultActiveKey="design">
<Card>
<Card.Header className="border-bottom-0 p-0">
<Nav className="nav-lb-tab">
<Nav.Item>
<Nav.Link eventKey="design" className="mb-sm-3 mb-md-0">
Design
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="react" className="mb-sm-3 mb-md-0">
Code
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body className="p-0">
<Tab.Content>
<Tab.Pane eventKey="design" className="pb-4 p-4">
{/* code started */}
<ListGroup variant="flush">
<ListGroup.Item>
<span>Post ID</span>
<h5>8693637308</h5>
</ListGroup.Item>
<ListGroup.Item>
<span>Status</span>
<h5>
<DotBadge bg="success">
Published (unsaved changes)
</DotBadge>
</h5>
</ListGroup.Item>
<ListGroup.Item>
<span>Created by</span>
<div className="d-flex mt-2">
<Image
src="/images/avatar/avatar-1.jpg"
alt=""
className="avatar-sm rounded-circle"
/>
<div className="ms-2">
<h5 className="mb-n1">Geeks Courses</h5>
<small>Admin</small>
</div>
</div>
</ListGroup.Item>
<ListGroup.Item>
<span>Created at</span>
<h5>Jul 30, 2:21 PM</h5>
</ListGroup.Item>
<ListGroup.Item>
<span>First published at</span>
<h5>Jul 30, 2:21 PM</h5>
</ListGroup.Item>
<ListGroup.Item>
<span>Last update</span>
<h5>Aug 31, 12:21 PM</h5>
</ListGroup.Item>
<ListGroup.Item>
<span>Last Published</span>
<h5>Aug 31, 12:21 PM</h5>
</ListGroup.Item>
</ListGroup>
{/* end of code */}
</Tab.Pane>
<Tab.Pane eventKey="react" className="pb-4 p-4 react-code">
<HighlightCode code={GroupWithIconCode} />
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>
</Col>
</Row>
{/* end of List group with icon */}
</Container>
);
};
export default Listgroups;
================================================
FILE: app/(dashboard)/components/modal/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import Link from 'next/link';
import {
Col,
Row,
Card,
Modal,
Button,
OverlayTrigger,
Popover,
Tooltip,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SampleExamplesCode,
LiveDemoCode,
LongContentCode,
ScrollableModalCode,
VerticallyCenteredCode,
TooltipsPopoversCode,
OptionalSizesCode
} from 'data/code/ModalsCode';
const Modals = () => {
const [show, setShow] = useState(false);
const [scrollShow, setScrollShow] = useState(false);
const [scrollShow2, setScrollShow2] = useState(false);
const [popoverTipShow, setpopoverTipShow] = useState(false);
const [smShow, setSmShow] = useState(false);
const [mdShow, setMdShow] = useState(false);
const [lgShow, setLgShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const longContent = `<p>Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisqu
gitextract_7a2pmtz8/
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── app/
│ ├── (auth)/
│ │ └── authentication/
│ │ ├── forget-password/
│ │ │ ├── loading.js
│ │ │ └── page.js
│ │ ├── layout.js
│ │ ├── sign-in/
│ │ │ └── page.js
│ │ └── sign-up/
│ │ └── page.js
│ ├── (dashboard)/
│ │ ├── changelog/
│ │ │ └── page.js
│ │ ├── components/
│ │ │ ├── accordions/
│ │ │ │ └── page.js
│ │ │ ├── alerts/
│ │ │ │ └── page.js
│ │ │ ├── badges/
│ │ │ │ └── page.js
│ │ │ ├── breadcrumbs/
│ │ │ │ └── page.js
│ │ │ ├── button-group/
│ │ │ │ └── page.js
│ │ │ ├── buttons/
│ │ │ │ └── page.js
│ │ │ ├── cards/
│ │ │ │ └── page.js
│ │ │ ├── carousels/
│ │ │ │ └── page.js
│ │ │ ├── close-button/
│ │ │ │ └── page.js
│ │ │ ├── collapse/
│ │ │ │ └── page.js
│ │ │ ├── dropdowns/
│ │ │ │ └── page.js
│ │ │ ├── list-group/
│ │ │ │ └── page.js
│ │ │ ├── modal/
│ │ │ │ └── page.js
│ │ │ ├── navbar/
│ │ │ │ └── page.js
│ │ │ ├── navs/
│ │ │ │ └── page.js
│ │ │ ├── offcanvas/
│ │ │ │ └── page.js
│ │ │ ├── overlays/
│ │ │ │ └── page.js
│ │ │ ├── pagination/
│ │ │ │ └── page.js
│ │ │ ├── popovers/
│ │ │ │ └── page.js
│ │ │ ├── progress/
│ │ │ │ └── page.js
│ │ │ ├── spinners/
│ │ │ │ └── page.js
│ │ │ ├── tables/
│ │ │ │ └── page.js
│ │ │ ├── toasts/
│ │ │ │ └── page.js
│ │ │ └── tooltips/
│ │ │ └── page.js
│ │ ├── documentation/
│ │ │ └── page.js
│ │ ├── layout-vertical/
│ │ │ └── page.js
│ │ ├── layout.js
│ │ ├── page.js
│ │ └── pages/
│ │ ├── api-demo/
│ │ │ ├── ServerSideData.js
│ │ │ └── page.js
│ │ ├── billing/
│ │ │ └── page.js
│ │ ├── pricing/
│ │ │ └── page.js
│ │ ├── profile/
│ │ │ └── page.js
│ │ └── settings/
│ │ └── page.js
│ ├── layout.js
│ └── not-found.js
├── components/
│ ├── CopyToClipboardButton.js
│ └── bootstrap/
│ └── DotBadge.js
├── data/
│ ├── Notification.js
│ ├── code/
│ │ ├── AccordionCode.js
│ │ ├── AlertsCode.js
│ │ ├── BadgesCode.js
│ │ ├── BreadcrumbCode.js
│ │ ├── ButtonGroupCode.js
│ │ ├── ButtonsCode.js
│ │ ├── CardsCode.js
│ │ ├── CarouselsCode.js
│ │ ├── CloseCode.js
│ │ ├── CollapsesCode.js
│ │ ├── DropdownsCode.js
│ │ ├── ListgroupsCode.js
│ │ ├── ModalsCode.js
│ │ ├── NavbarsCode.js
│ │ ├── NavsCode.js
│ │ ├── OffcanvasCode.js
│ │ ├── OverlaysCode.js
│ │ ├── PaginationsCode.js
│ │ ├── PopoversCode.js
│ │ ├── ProgressCode.js
│ │ ├── SpinnersCode.js
│ │ ├── TablesCode.js
│ │ ├── ToastsCode.js
│ │ └── TooltipsCode.js
│ ├── dashboard/
│ │ ├── ActiveProjectsData.js
│ │ ├── ProjectsStatsData.js
│ │ └── TeamsData.js
│ ├── pricing/
│ │ ├── FAQsData.js
│ │ ├── FeaturesData.js
│ │ └── PricingPlansData.js
│ └── profile/
│ └── ProjectsContributionsData.js
├── hooks/
│ └── useMounted.js
├── jsconfig.json
├── layouts/
│ ├── QuickMenu.js
│ └── navbars/
│ ├── NavbarTop.js
│ └── NavbarVertical.js
├── next.config.js
├── package.json
├── public/
│ └── fonts/
│ └── feather-icons/
│ └── feather.css
├── routes/
│ └── DashboardRoutes.js
├── styles/
│ ├── _user-variables.scss
│ ├── _user.scss
│ ├── theme/
│ │ ├── _theme.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── components/
│ │ │ ├── _avatar.scss
│ │ │ ├── _badge.scss
│ │ │ ├── _button.scss
│ │ │ ├── _card.scss
│ │ │ ├── _docs.scss
│ │ │ ├── _dropdown.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _layout.scss
│ │ │ ├── _nav.scss
│ │ │ ├── _navbar-vertical.scss
│ │ │ ├── _navbar.scss
│ │ │ ├── _reboot.scss
│ │ │ ├── _scrollspy.scss
│ │ │ ├── _sidenav.scss
│ │ │ ├── _social-button.scss
│ │ │ └── _table.scss
│ │ ├── utilities/
│ │ │ ├── _background.scss
│ │ │ ├── _border.scss
│ │ │ ├── _icon-shape.scss
│ │ │ ├── _position.scss
│ │ │ ├── _shadows.scss
│ │ │ └── _text.scss
│ │ └── vendor/
│ │ ├── apexChart/
│ │ │ └── _apexchart.scss
│ │ └── prismJs/
│ │ └── _prism.scss
│ └── theme.scss
├── sub-components/
│ ├── billing/
│ │ ├── BillingAddress.js
│ │ └── CurrentPlan.js
│ ├── changelog/
│ │ ├── Version_01_00_00.js
│ │ ├── Version_01_01_00.js
│ │ └── Version_01_01_01.js
│ ├── dashboard/
│ │ ├── ActiveProjects.js
│ │ ├── TasksPerformance.js
│ │ └── Teams.js
│ ├── index.js
│ ├── profile/
│ │ ├── AboutMe.js
│ │ ├── ActivityFeed.js
│ │ ├── MyTeam.js
│ │ ├── ProfileHeader.js
│ │ ├── ProjectsContributions.js
│ │ └── RecentFromBlog.js
│ └── settings/
│ ├── DeleteAccount.js
│ ├── EmailSetting.js
│ ├── GeneralSetting.js
│ ├── Notifications.js
│ └── Preferences.js
└── widgets/
├── PageHeading.js
├── cards/
│ └── PricingCard.js
├── dropfiles/
│ └── DropFiles.js
├── features/
│ └── FeatureLeftTopIcon.js
├── form-select/
│ └── FormSelect.js
├── highlight-code/
│ └── HighlightCode.js
├── index.js
└── stats/
└── StatRightTopIcon.js
SYMBOL INDEX (10 symbols across 8 files)
FILE: app/(auth)/authentication/forget-password/loading.js
function Loading (line 1) | function Loading() {
FILE: app/(auth)/authentication/layout.js
function AuthLayout (line 5) | function AuthLayout({ children }) {
FILE: app/(dashboard)/components/list-group/page.js
function alertClicked (line 41) | function alertClicked() {
FILE: app/(dashboard)/components/modal/page.js
function MyVerticallyCenteredModal (line 82) | function MyVerticallyCenteredModal(props) {
FILE: app/(dashboard)/components/offcanvas/page.js
function OffCanvasPlacement (line 55) | function OffCanvasPlacement({ name, ...props }) {
function OffCanvasBackdrop (line 83) | function OffCanvasBackdrop({ name, ...props }) {
FILE: app/(dashboard)/layout.js
function DashboardLayout (line 12) | function DashboardLayout({ children }) {
FILE: app/(dashboard)/pages/api-demo/page.js
function getServerData (line 3) | async function getServerData() {
function Page (line 9) | async function Page() {
FILE: app/layout.js
function RootLayout (line 11) | function RootLayout({ children }) {
Condensed preview — 147 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (842K chars).
[
{
"path": ".eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": ".gitignore",
"chars": 343,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "MIT License\n\nCopyright (c) 2023 Codescandy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 3235,
"preview": "# DashUI Next.js Free Admin Template 🚀\n\nA **modern, responsive, and free Next.js Admin Dashboard Template** built by [Co"
},
{
"path": "app/(auth)/authentication/forget-password/loading.js",
"chars": 135,
"preview": "export default function Loading() {\n // You can add any UI inside Loading, including a Skeleton.\n return <span>Loa"
},
{
"path": "app/(auth)/authentication/forget-password/page.js",
"chars": 1578,
"preview": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimp"
},
{
"path": "app/(auth)/authentication/layout.js",
"chars": 244,
"preview": "'use client'\n// import node module libraries\nimport { Container } from 'react-bootstrap';\n\nexport default function AuthL"
},
{
"path": "app/(auth)/authentication/sign-in/page.js",
"chars": 2627,
"preview": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimp"
},
{
"path": "app/(auth)/authentication/sign-up/page.js",
"chars": 3244,
"preview": "'use client'\n\n// import node module libraries\nimport { Row, Col, Card, Form, Button, Image } from 'react-bootstrap';\nimp"
},
{
"path": "app/(dashboard)/changelog/page.js",
"chars": 979,
"preview": "'use client'\n\n// import node module libraries\nimport { Col, Row, Container } from 'react-bootstrap';\n\n// import sub comp"
},
{
"path": "app/(dashboard)/components/accordions/page.js",
"chars": 9050,
"preview": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Accordion, Nav, Tab, Tabs, Container } from 'react"
},
{
"path": "app/(dashboard)/components/alerts/page.js",
"chars": 11553,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport { Col, Row, Card, Alert,"
},
{
"path": "app/(dashboard)/components/badges/page.js",
"chars": 8059,
"preview": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Button, Badge, Tab, Nav, Container } from 'react-b"
},
{
"path": "app/(dashboard)/components/breadcrumbs/page.js",
"chars": 2722,
"preview": "'use client'\n// import node module libraries\nimport { Col, Row, Card, Breadcrumb, Nav, Tab, Container } from 'react-boot"
},
{
"path": "app/(dashboard)/components/button-group/page.js",
"chars": 18891,
"preview": "'use client'\n// import node module libraries\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButtonGroup,\n\tButton,\n\tButtonToolbar,\n\tDropdow"
},
{
"path": "app/(dashboard)/components/buttons/page.js",
"chars": 24338,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tButton,\n\tCard,\n\tSpi"
},
{
"path": "app/(dashboard)/components/cards/page.js",
"chars": 23544,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tButton,\n\tLis"
},
{
"path": "app/(dashboard)/components/carousels/page.js",
"chars": 16751,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport { Col, Row, Card, Carous"
},
{
"path": "app/(dashboard)/components/close-button/page.js",
"chars": 4921,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, CloseButton, Nav"
},
{
"path": "app/(dashboard)/components/collapse/page.js",
"chars": 4320,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tBu"
},
{
"path": "app/(dashboard)/components/dropdowns/page.js",
"chars": 28146,
"preview": "'use client'\n\n// import node module libraries\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tDropdown,\n\tButtonGroup,\n\tDropdownButton,\n\tSpl"
},
{
"path": "app/(dashboard)/components/list-group/page.js",
"chars": 27823,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tListGroup,\n\t"
},
{
"path": "app/(dashboard)/components/modal/page.js",
"chars": 18915,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport Link from 'next/link';\ni"
},
{
"path": "app/(dashboard)/components/navbar/page.js",
"chars": 7767,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tNavbar,\n\tNav"
},
{
"path": "app/(dashboard)/components/navs/page.js",
"chars": 36622,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Nav, Tabs, Tab, "
},
{
"path": "app/(dashboard)/components/offcanvas/page.js",
"chars": 8410,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tBu"
},
{
"path": "app/(dashboard)/components/overlays/page.js",
"chars": 7633,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState, useRef } from 'react';\nimport {\n\tCol,\n\tRow,\n\tC"
},
{
"path": "app/(dashboard)/components/pagination/page.js",
"chars": 12748,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport Link from 'next/link';\nimport { Co"
},
{
"path": "app/(dashboard)/components/popovers/page.js",
"chars": 6360,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tOverlayTrigg"
},
{
"path": "app/(dashboard)/components/progress/page.js",
"chars": 12105,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Card, Col, Row, ProgressBar, Tab"
},
{
"path": "app/(dashboard)/components/spinners/page.js",
"chars": 22377,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Spinner, Button,"
},
{
"path": "app/(dashboard)/components/tables/page.js",
"chars": 26930,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from 'react';\nimport { Col, Row, Card, Table, Nav, Tab,"
},
{
"path": "app/(dashboard)/components/toasts/page.js",
"chars": 16818,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tTo"
},
{
"path": "app/(dashboard)/components/tooltips/page.js",
"chars": 2822,
"preview": "'use client'\n\n// import node module libraries\nimport { Fragment } from 'react';\nimport {\n\tCol,\n\tRow,\n\tCard,\n\tOverlayTrig"
},
{
"path": "app/(dashboard)/documentation/page.js",
"chars": 6794,
"preview": "'use client'\n\nimport Link from 'next/link';\n// import node module libraries\nimport { Card, Col, Row, Container } from 'r"
},
{
"path": "app/(dashboard)/layout-vertical/page.js",
"chars": 1041,
"preview": "'use client'\n// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Container, Image } from 'r"
},
{
"path": "app/(dashboard)/layout.js",
"chars": 897,
"preview": "'use client'\n// import node module libraries\nimport { useState } from 'react';\n\n// import theme style scss file\nimport '"
},
{
"path": "app/(dashboard)/page.js",
"chars": 2289,
"preview": "'use client'\n// import node module libraries\nimport { Fragment } from \"react\";\nimport Link from 'next/link';\nimport { Co"
},
{
"path": "app/(dashboard)/pages/api-demo/ServerSideData.js",
"chars": 539,
"preview": "'use client';\n\n// import node module libraries\nimport { Fragment } from \"react\";\nimport { Card } from \"react-bootstrap\";"
},
{
"path": "app/(dashboard)/pages/api-demo/page.js",
"chars": 354,
"preview": "import ServerSideData from './ServerSideData'\n\nasync function getServerData() {\n let data = await fetch('https://dumm"
},
{
"path": "app/(dashboard)/pages/billing/page.js",
"chars": 768,
"preview": "'use client'\n// import node module libraries\nimport { Row, Col, Container } from 'react-bootstrap';\n\n// import widget as"
},
{
"path": "app/(dashboard)/pages/pricing/page.js",
"chars": 3223,
"preview": "'use client'\n// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Container } from 'react-bo"
},
{
"path": "app/(dashboard)/pages/profile/page.js",
"chars": 1061,
"preview": "'use client'\n// import node module libraries\nimport { Col, Row, Container } from 'react-bootstrap';\n\n// import widget as"
},
{
"path": "app/(dashboard)/pages/settings/page.js",
"chars": 833,
"preview": "'use client'\n// import node module libraries\nimport { Container } from 'react-bootstrap';\n\n// import widget as custom co"
},
{
"path": "app/layout.js",
"chars": 1442,
"preview": "// import theme style scss file\nimport Link from 'next/link';\nimport 'styles/theme.scss';\n\nexport const metadata = {\n "
},
{
"path": "app/not-found.js",
"chars": 1050,
"preview": "'use client'\n// import node module libraries\nimport { Col, Row, Image, Container } from 'react-bootstrap';\nimport Link f"
},
{
"path": "components/CopyToClipboardButton.js",
"chars": 719,
"preview": "import React, { useState } from 'react';\n\nconst CopyToClipboardButton = ({ textToCopy }) => {\n const [copied, setCopi"
},
{
"path": "components/bootstrap/DotBadge.js",
"chars": 702,
"preview": "'use client'\n\n/***************************\nComponent : DotBadge\n****************************\n\nAvailalble Parameters\n\nbg "
},
{
"path": "data/Notification.js",
"chars": 571,
"preview": "const Notification = [\n\t{\n\t\tid: 1,\n\t\tsender: 'Rishi Chopra',\n\t\tmessage: `Mauris blandit erat id nunc blandit, ac eleifen"
},
{
"path": "data/code/AccordionCode.js",
"chars": 4669,
"preview": "export const AccordionBasicCode = `\n<Accordion.Item eventKey=\"0\">\n <Accordion.Header>Accordion Item #1</Accordion.Hea"
},
{
"path": "data/code/AlertsCode.js",
"chars": 4124,
"preview": "export const SimpleAlert = ` \n<Alert variant=\"primary\" >This is a primary alert—check it out!</Alert>\n<Alert variant=\""
},
{
"path": "data/code/BadgesCode.js",
"chars": 1249,
"preview": "export const SimpleBadgeCode = ` \n<h1> Example heading <Badge bg=\"secondary\">New</Badge></h1>\n<h2> Example heading <Ba"
},
{
"path": "data/code/BreadcrumbCode.js",
"chars": 482,
"preview": "export const BasicBreadcrumb = ` \n<Breadcrumb>\n <Breadcrumb.Item active>Home</Breadcrumb.Item>\n</Breadcrumb>\n<Bread"
},
{
"path": "data/code/ButtonGroupCode.js",
"chars": 4783,
"preview": "export const BasicButtonGroupCode = ` \n<ButtonGroup aria-label=\"Basic example\" >\n <Button variant=\"primary\">Left</B"
},
{
"path": "data/code/ButtonsCode.js",
"chars": 4622,
"preview": "export const RegularButtonCode = ` \n<Button variant=\"primary\" className=\"me-1\">Primary</Button>\n<Button variant=\"secon"
},
{
"path": "data/code/CardsCode.js",
"chars": 6572,
"preview": "export const BasicCardCode = ` \n<Card style={{ width: '18rem' }}>\n <Card.Img variant=\"top\" src=\"https://fakeimg.pl/6"
},
{
"path": "data/code/CarouselsCode.js",
"chars": 6383,
"preview": "export const SlidesOnlyCode = ` \n<Carousel controls={false} indicators={false} >\n <Carousel.Item>\n <Image cl"
},
{
"path": "data/code/CloseCode.js",
"chars": 520,
"preview": "export const GenericCloseButtonCode = ` \n<CloseButton className=\"btn-close\"/> \n`.trim();\n\nexport const DisabledStateCode"
},
{
"path": "data/code/CollapsesCode.js",
"chars": 1738,
"preview": "export const BasicCollapsesCode = ` \nconst Collapses = () => {\n const [open, setOpen] = useState(false); \n retu"
},
{
"path": "data/code/DropdownsCode.js",
"chars": 9972,
"preview": "export const BasicDropdownCode = ` \n<Dropdown>\n <Dropdown.Toggle variant=\"secondary\" id=\"dropdown-basic\">\n D"
},
{
"path": "data/code/ListgroupsCode.js",
"chars": 8298,
"preview": "export const BasicListgroupCode = ` \n<ListGroup>\n <ListGroup.Item>Cras justo odio</ListGroup.Item>\n <ListGroup.I"
},
{
"path": "data/code/ModalsCode.js",
"chars": 15830,
"preview": "export const SampleExamplesCode = ` \n<div className=\"modal show\" style={{ display: 'block', position: 'initial' }}>\n "
},
{
"path": "data/code/NavbarsCode.js",
"chars": 2687,
"preview": "export const DefaultNavbar = ` \n<Navbar expand=\"lg\"> \n <Navbar.Brand href=\"#home\">\n "
},
{
"path": "data/code/NavsCode.js",
"chars": 12717,
"preview": "export const MenuNavCode = ` \n<Nav defaultActiveKey=\"/#\" as=\"ul\">\n <Nav.Item as=\"li\">\n <Nav.Link href=\"/#\">A"
},
{
"path": "data/code/OffcanvasCode.js",
"chars": 3810,
"preview": "export const OffcanvasBasicCode = `\nconst BSOffCanvas = () => {\n const [show, setShow] = useState(false);\n \n cons"
},
{
"path": "data/code/OverlaysCode.js",
"chars": 2417,
"preview": "export const OverlayBasicCode = `\nconst Overlays = () => {\n const [show, setShow] = useState(false);\n const target"
},
{
"path": "data/code/PaginationsCode.js",
"chars": 2868,
"preview": "export const DefaultPaginationCode = ` \n<Pagination>\n <Pagination.Prev>Previous</Pagination.Prev> \n <Pagination."
},
{
"path": "data/code/PopoversCode.js",
"chars": 1778,
"preview": "export const copyAction = (event) => {\n\tevent.target.innerHTML = 'Copied';\n\tsetTimeout(() => {\n\t\tevent.target.innerHTML "
},
{
"path": "data/code/ProgressCode.js",
"chars": 1746,
"preview": "export const DefaultProgressCode = ` \n<ProgressBar now={0} className=\"mb-2\" />\n<ProgressBar now={25} className=\"mb-2\" "
},
{
"path": "data/code/SpinnersCode.js",
"chars": 4004,
"preview": "export const BorderSpinnerCode = ` \n<Spinner animation=\"border\" role=\"status\">\n <span className=\"visually-hidden\">L"
},
{
"path": "data/code/TablesCode.js",
"chars": 11050,
"preview": "export const BasicTableCode = ` \n<Table className=\"text-nowrap\">\n <thead >\n <tr>\n <th scope=\"col\""
},
{
"path": "data/code/ToastsCode.js",
"chars": 6401,
"preview": "export const BasicExampleCode = ` \n<Toast>\n <Toast.Header>\n <Image src=\"https://fakeimg.pl/20x20/754FFE/754FF"
},
{
"path": "data/code/TooltipsCode.js",
"chars": 497,
"preview": "export const BasicTooltip = ` \n{['top', 'right', 'bottom', 'left'].map((placement) => (\n <OverlayTrigger\n key={p"
},
{
"path": "data/dashboard/ActiveProjectsData.js",
"chars": 2715,
"preview": "export const ActiveProjectsData = [\n {\n id:1,\n projectName : \"Dropbox Design System\",\n priority : \""
},
{
"path": "data/dashboard/ProjectsStatsData.js",
"chars": 905,
"preview": "import {\n\tBriefcase,\n ListTask,\n People,\n Bullseye\n} from 'react-bootstrap-icons';\n\nexport const ProjectsStats "
},
{
"path": "data/dashboard/TeamsData.js",
"chars": 1376,
"preview": "export const TeamsData = [\n {\n id:1,\n name : \"Anita Parmar\",\n email : \"anita@example.com\",\n r"
},
{
"path": "data/pricing/FAQsData.js",
"chars": 1232,
"preview": "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"
},
{
"path": "data/pricing/FeaturesData.js",
"chars": 1209,
"preview": "export const FeaturesData = [\n\t{\n\t\tid: 1,\n\t\ticon:'edit',\n\t\ttitle: 'Create and Edit Projects',\n\t\tdescription:'Donec posue"
},
{
"path": "data/pricing/PricingPlansData.js",
"chars": 2020,
"preview": "export const standard = [\n\t{\n\t\tplantitle: 'Standard',\n\t\tdescription: `For early-stage startups that want to spend more t"
},
{
"path": "data/profile/ProjectsContributionsData.js",
"chars": 2157,
"preview": "export const ProjectsContributionsData = [\n {\n id: 1,\n projectName: \"Slack Figma Design UI\",\n de"
},
{
"path": "hooks/useMounted.js",
"chars": 324,
"preview": "// This hook is used to fix React Hydration Error on any page\n\n// import node module libraries\nimport { useState, useEff"
},
{
"path": "jsconfig.json",
"chars": 71,
"preview": "{\n \"compilerOptions\": {\n \"paths\": {\n \"*\": [\"./*\"]\n }\n }\n}\n"
},
{
"path": "layouts/QuickMenu.js",
"chars": 9517,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { Fragment } from 'react';\nimport { useMediaQuery }"
},
{
"path": "layouts/navbars/NavbarTop.js",
"chars": 1057,
"preview": "// import node module libraries\nimport { Menu } from 'react-feather';\nimport Link from 'next/link';\nimport {\n\tNav,\n\tNavb"
},
{
"path": "layouts/navbars/NavbarVertical.js",
"chars": 8637,
"preview": "'use client'\n// import node module libraries\nimport { Fragment, useContext } from 'react';\nimport Link from 'next/link';"
},
{
"path": "next.config.js",
"chars": 118,
"preview": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictMode: true,\n}\n\nmodule.exports = nextConfig\n"
},
{
"path": "package.json",
"chars": 1259,
"preview": "{\n \"name\": \"dashui-free-nextjs-admin-template\",\n \"version\": \"1.1.1\",\n \"private\": true,\n \"author\": {\n \"name\": \"cod"
},
{
"path": "public/fonts/feather-icons/feather.css",
"chars": 12429,
"preview": "@font-face {\n font-family: 'Feather';\n src:\n url('fonts/feather.ttf?sdxovp') format('truetype'),\n url('fonts/fea"
},
{
"path": "routes/DashboardRoutes.js",
"chars": 5025,
"preview": "import { v4 as uuid } from 'uuid';\n/**\n * All Dashboard Routes\n *\n * Understanding name/value pairs for Dashboard rout"
},
{
"path": "styles/_user-variables.scss",
"chars": 227,
"preview": "//\n// user-variables.scss\n// Use this to overwrite Bootstrap and Dashui variables\n//\n// Example of a variable override t"
},
{
"path": "styles/_user.scss",
"chars": 57,
"preview": "// \n// user.scss\n// Use this to write your custom SCSS\n//"
},
{
"path": "styles/theme/_theme.scss",
"chars": 683,
"preview": "// Components\n@import \"components/_navbar-vertical.scss\";\n@import \"components/_navbar.scss\";\n@import \"components/_layout"
},
{
"path": "styles/theme/_utilities.scss",
"chars": 4777,
"preview": "//\n// utilities.scss\n// Extended from Bootstrap\n//\n@import \"~bootstrap/scss/functions\";\n@import \"~bootstrap/scss/variabl"
},
{
"path": "styles/theme/_variables.scss",
"chars": 8590,
"preview": "$white: #fff !default;\n$gray-100: #f1f5f9 !default;\n$gray-200: #f4f6f8 !default;\n$gray-300: #dfe3e8 !default;\n$gray-400:"
},
{
"path": "styles/theme/components/_avatar.scss",
"chars": 2855,
"preview": "// Avatar\n.avatar {\n position: relative;\n display: inline-block;\n width: 3rem;\n height: 3rem;\n}\n\n// Avatar S"
},
{
"path": "styles/theme/components/_badge.scss",
"chars": 289,
"preview": "//\n// Extended from bootstrap\n//\n\n\n// Badge dot\n\n.badge-dot{\n font-size: 0;\n vertical-align: middle;\n padding: "
},
{
"path": "styles/theme/components/_button.scss",
"chars": 1008,
"preview": "//\n// Extended from bootstrap\n//\n\n// btn outline white\n.btn-outline-white {\n border-color: $gray-300;\n color: $body-co"
},
{
"path": "styles/theme/components/_card.scss",
"chars": 141,
"preview": "//\n// Extended from bootstrap\n//\n// card\n\n\n.card{\n box-shadow: $smooth-shadow-sm;\n border: 0px;\n border-radius:"
},
{
"path": "styles/theme/components/_docs.scss",
"chars": 601,
"preview": "\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-t"
},
{
"path": "styles/theme/components/_dropdown.scss",
"chars": 4927,
"preview": "\n//\n// Extended from bootstrap dropdown\n//\n\n// Dropdown menu\n.dropdown-menu {\n font-size: 0.875rem;\n line-height: "
},
{
"path": "styles/theme/components/_forms.scss",
"chars": 308,
"preview": "//\n// Extended from bootstrap\n//\n// form\n\n.form-control-flush {\n border-top: 0px;\n border-left: 0px;\n border-right: 0"
},
{
"path": "styles/theme/components/_layout.scss",
"chars": 2038,
"preview": "// layouts\n\n\n\n// Header\n\n.header {\n .navbar {\n padding: 0.625rem 1.5rem;\n #nav-toggle {\n font-size: "
},
{
"path": "styles/theme/components/_nav.scss",
"chars": 2868,
"preview": "// Bottom line nav\n.nav-line-bottom {\n border-bottom: 1px solid $gray-200;\n .nav-item {\n .nav-link {\n color: $"
},
{
"path": "styles/theme/components/_navbar-vertical.scss",
"chars": 3271,
"preview": "// Navbar Vertcial\n\n.navbar-vertical {\n\n margin-left: -17rem;\n display: block;\n position: fixed;\n top: 0;\n bottom: "
},
{
"path": "styles/theme/components/_navbar.scss",
"chars": 2095,
"preview": "// navbar\n\n.navbar-classic {\n background-color: #fff;\n box-shadow: $smooth-shadow-sm;\n\n .navbar-right-wrap {\n "
},
{
"path": "styles/theme/components/_reboot.scss",
"chars": 51,
"preview": "\n\nbody{\n -webkit-font-smoothing: antialiased;\n\n}"
},
{
"path": "styles/theme/components/_scrollspy.scss",
"chars": 239,
"preview": "// Scrollspy\n\n\n// Scrollspy\n\n.scrollspy-example {\n position: relative;\n height: 12.5rem;\n margin-top: 0.5rem;\n "
},
{
"path": "styles/theme/components/_sidenav.scss",
"chars": 1578,
"preview": "// Docs Sidebar\n\n\n\n// Docs breakpoints\n\n@media(max-width: 768px) {\n .docs-content {\n padding: 3.75rem 1.25rem 8.75re"
},
{
"path": "styles/theme/components/_social-button.scss",
"chars": 252,
"preview": "// social color\n.color-facebook {\n color: #4267B2;\n}\n\n.color-twitter {\n color: #1DA1F2;\n}\n\n.color-github {\n col"
},
{
"path": "styles/theme/components/_table.scss",
"chars": 238,
"preview": "//\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-w"
},
{
"path": "styles/theme/utilities/_background.scss",
"chars": 327,
"preview": "//\n// Extended from bootstrap\n//\n\n\n// filter invert in to dark\n.filter-invert-white {\n -webkit-filter: brightness(0) "
},
{
"path": "styles/theme/utilities/_border.scss",
"chars": 549,
"preview": "//\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) !i"
},
{
"path": "styles/theme/utilities/_icon-shape.scss",
"chars": 804,
"preview": "// 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 {"
},
{
"path": "styles/theme/utilities/_position.scss",
"chars": 326,
"preview": "//\n// Extended from bootstrap\n//\n// Position\n@each $size,\n$value in $position-values {\n .top-#{$size} {\n top: "
},
{
"path": "styles/theme/utilities/_shadows.scss",
"chars": 236,
"preview": "//\n// Extended from bootstrap\n//\n// shadows\n\n\n.smooth-shadow-sm { box-shadow: $smooth-shadow-sm !important; }\n.smooth-sh"
},
{
"path": "styles/theme/utilities/_text.scss",
"chars": 199,
"preview": "// 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"
},
{
"path": "styles/theme/vendor/apexChart/_apexchart.scss",
"chars": 1231,
"preview": "// Apex Chart\n.apexcharts-tooltip {\n border-radius: .5rem !important;\n box-shadow: $box-shadow-sm !important;\n "
},
{
"path": "styles/theme/vendor/prismJs/_prism.scss",
"chars": 1574,
"preview": "// Prism\n\n\n\n/* Code blocks */\ncode[class*=\"language-\"], pre[class*=\"language-\"]{\n \n font-family: $font-family-base;\n}\n"
},
{
"path": "styles/theme.scss",
"chars": 1366,
"preview": "/*\n=========================================================\n* Dash UI - Bootstrap 5 Admin & Dashboard Theme\n==========="
},
{
"path": "sub-components/billing/BillingAddress.js",
"chars": 6873,
"preview": "// import node module libraries\nimport React, { Fragment, useState } from 'react'\nimport Link from 'next/link';\nimport {"
},
{
"path": "sub-components/billing/CurrentPlan.js",
"chars": 7604,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { useState } from 'react'\nimport { Row, Col, Card, "
},
{
"path": "sub-components/changelog/Version_01_00_00.js",
"chars": 861,
"preview": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_00_00 = () => {\n\tret"
},
{
"path": "sub-components/changelog/Version_01_01_00.js",
"chars": 2509,
"preview": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_01_00 = () => {\n\tcon"
},
{
"path": "sub-components/changelog/Version_01_01_01.js",
"chars": 1638,
"preview": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst Version_01_01_01 = () => {\n\tcon"
},
{
"path": "sub-components/dashboard/ActiveProjects.js",
"chars": 4411,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { ProgressBar, Col, Row, Card, Table, Image } from "
},
{
"path": "sub-components/dashboard/TasksPerformance.js",
"chars": 4191,
"preview": "'use client'\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Card, Dropdown } from 'react-bootstrap';\n"
},
{
"path": "sub-components/dashboard/Teams.js",
"chars": 3295,
"preview": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Card, Table, Dropdown,"
},
{
"path": "sub-components/index.js",
"chars": 1646,
"preview": "/**\n * The folder sub-components contains sub component of all the pages,\n * so here you will find folder names which ar"
},
{
"path": "sub-components/profile/AboutMe.js",
"chars": 2068,
"preview": "// import node module libraries\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst AboutMe = () => {\n return (\n"
},
{
"path": "sub-components/profile/ActivityFeed.js",
"chars": 2511,
"preview": "// import node module libraries\nimport { Row, Col, Card, Image } from 'react-bootstrap';\n\nconst ActivityFeed = () => {\n "
},
{
"path": "sub-components/profile/MyTeam.js",
"chars": 4213,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { Card, Image } from 'react-bootstrap';\n\nconst MyTe"
},
{
"path": "sub-components/profile/ProfileHeader.js",
"chars": 2794,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Image } from 'react-bootstrap';\n\nconst "
},
{
"path": "sub-components/profile/ProjectsContributions.js",
"chars": 4004,
"preview": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { Col, Card, Dropdown, I"
},
{
"path": "sub-components/profile/RecentFromBlog.js",
"chars": 4496,
"preview": "// import node module libraries\nimport React from \"react\";\nimport Link from 'next/link';\nimport { MoreVertical } from 'r"
},
{
"path": "sub-components/settings/DeleteAccount.js",
"chars": 1130,
"preview": "// import node module libraries\nimport Link from 'next/link';\nimport { Col, Row, Card } from 'react-bootstrap';\n\nconst D"
},
{
"path": "sub-components/settings/EmailSetting.js",
"chars": 3683,
"preview": "// import node module libraries\nimport { Col, Row, Form, Card, Button } from 'react-bootstrap';\n\n// import hooks\nimport "
},
{
"path": "sub-components/settings/GeneralSetting.js",
"chars": 5655,
"preview": "// import node module libraries\nimport { Col, Row, Form, Card, Button, Image } from 'react-bootstrap';\n\n// import widget"
},
{
"path": "sub-components/settings/Notifications.js",
"chars": 16299,
"preview": "// import node module libraries\nimport { useState } from 'react'\nimport { Col, Row, Card, Form, Button, Table, Alert } f"
},
{
"path": "sub-components/settings/Preferences.js",
"chars": 4746,
"preview": "// import node module libraries\nimport { Col, Row, Form, Card, Button } from 'react-bootstrap';\n\n// import widget as cus"
},
{
"path": "widgets/PageHeading.js",
"chars": 399,
"preview": "// import node module libraries\nimport { Row, Col } from 'react-bootstrap';\n\nconst PageHeading = props => {\n const { he"
},
{
"path": "widgets/cards/PricingCard.js",
"chars": 1941,
"preview": "// import node module libraries\nimport { ListGroup, Card } from 'react-bootstrap';\nimport Link from 'next/link';\n\nconst "
},
{
"path": "widgets/dropfiles/DropFiles.js",
"chars": 1642,
"preview": "// import node module libraries\nimport React, { useEffect, useState } from 'react';\nimport { useDropzone } from 'react-d"
},
{
"path": "widgets/features/FeatureLeftTopIcon.js",
"chars": 621,
"preview": "// Widget : Features\n// Style : Features item with left top icon\n\n// import node module libraries\nimport PropTypes from "
},
{
"path": "widgets/form-select/FormSelect.js",
"chars": 971,
"preview": "// import node module libraries\nimport { Fragment } from 'react';\nimport { Form } from 'react-bootstrap';\nimport PropTyp"
},
{
"path": "widgets/highlight-code/HighlightCode.js",
"chars": 1086,
"preview": "'use client'\n\n// import node module libraries\nimport { Fragment, useState } from 'react';\nimport SyntaxHighlighter from "
},
{
"path": "widgets/index.js",
"chars": 611,
"preview": "// import widget/custom components from highlight-code folder \nimport HighlightCode from 'widgets/highlight-code/Highlig"
},
{
"path": "widgets/stats/StatRightTopIcon.js",
"chars": 1066,
"preview": "// Widget : Stat Style \n// Style : Stat widget with right top icon\n\n// import node module libraries\nimport PropTypes fro"
}
]
About this extraction
This page contains the full source code of the codescandy/dashui-free-nextjs-admin-template GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 147 files (684.9 KB), approximately 191.5k tokens, and a symbol index with 10 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.