├── .eslintrc.json
├── .gitignore
├── README.md
├── jsconfig.json
├── landingpage
├── index.html
└── style.css
├── next.config.js
├── old
├── .eslintrc.json
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.js
│ ├── about.js
│ ├── index.js
│ └── ui
│ │ ├── alerts.js
│ │ ├── badges.js
│ │ ├── breadcrumbs.js
│ │ ├── buttons.js
│ │ ├── cards.js
│ │ ├── forms.js
│ │ ├── grid.js
│ │ └── tables.js
├── public
│ ├── favicon.ico
│ └── vercel.svg
├── src
│ ├── assets
│ │ └── images
│ │ │ ├── background
│ │ │ └── icons2.jpg
│ │ │ ├── bg
│ │ │ ├── bg1.jpg
│ │ │ ├── bg2.jpg
│ │ │ ├── bg3.jpg
│ │ │ └── bg4.jpg
│ │ │ ├── logos
│ │ │ ├── xtremelogo.svg
│ │ │ └── xtremelogowhite.svg
│ │ │ └── users
│ │ │ ├── user1.jpg
│ │ │ ├── user2.jpg
│ │ │ ├── user3.jpg
│ │ │ ├── user4.jpg
│ │ │ └── user5.jpg
│ ├── components
│ │ └── dashboard
│ │ │ ├── Blog.js
│ │ │ ├── Feeds.js
│ │ │ ├── ProjectTable.js
│ │ │ ├── SalesChart.js
│ │ │ └── TopCards.js
│ └── layouts
│ │ ├── FullLayout.js
│ │ ├── header
│ │ └── Header.js
│ │ ├── logo
│ │ └── Logo.js
│ │ └── sidebars
│ │ └── vertical
│ │ └── Sidebar.js
└── styles
│ ├── _variables.scss
│ ├── layout
│ ├── _container.scss
│ └── _sidebar.scss
│ └── style.scss
├── package.json
├── public
├── images
│ ├── background
│ │ └── icons2.jpg
│ ├── bg
│ │ ├── bg1.jpg
│ │ ├── bg2.jpg
│ │ ├── bg3.jpg
│ │ └── bg4.jpg
│ ├── logos
│ │ ├── xtremelogo.svg
│ │ └── xtremelogowhite.svg
│ └── users
│ │ ├── user1.jpg
│ │ ├── user2.jpg
│ │ ├── user3.jpg
│ │ ├── user4.jpg
│ │ └── user5.jpg
├── next.svg
└── vercel.svg
└── src
├── app
├── (DashboardLayout)
│ ├── components
│ │ └── dashboard
│ │ │ ├── Blog.js
│ │ │ ├── Feeds.js
│ │ │ ├── ProjectTable.js
│ │ │ ├── SalesChart.js
│ │ │ └── TopCards.js
│ ├── layout.js
│ ├── layouts
│ │ ├── header
│ │ │ └── Header.js
│ │ ├── shared
│ │ │ └── logo
│ │ │ │ └── Logo.js
│ │ └── sidebars
│ │ │ └── vertical
│ │ │ └── Sidebar.js
│ ├── page.js
│ ├── pages
│ │ └── about
│ │ │ └── page.js
│ └── ui
│ │ ├── alerts
│ │ └── page.js
│ │ ├── badges
│ │ └── page.js
│ │ ├── breadcrumbs
│ │ └── page.js
│ │ ├── buttons
│ │ └── page.js
│ │ ├── cards
│ │ └── page.js
│ │ ├── forms
│ │ └── page.js
│ │ ├── grid
│ │ └── page.js
│ │ └── tables
│ │ └── page.js
├── favicon.ico
└── layout.js
└── styles
├── _variables.scss
├── layout
├── _container.scss
└── _sidebar.scss
└── style.scss
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Xtreme NextJS Free
3 | Xtreme NextJS Admin Dashboard
4 |
5 |
6 |
7 |
9 |
10 |
11 | # Compare with Premium Version 🌓
12 |
13 |
14 |
15 |
16 | Xtreme NextJS Free Version
17 | Xtreme NextJS Pro Version
18 |
19 |
20 |
21 |
22 |
23 | Live Preview
24 |
25 |
26 | Live Preview
27 |
28 |
29 |
30 |
31 | Download Now
32 |
33 |
34 | Purchase Now
35 |
36 |
37 |
38 |
39 | 1 Basic Dashboard
40 |
41 |
42 | 5+ Stunning Dashboards
43 |
44 |
45 |
46 |
47 | -
48 |
49 |
50 | Dashboard Figma Files
51 |
52 |
53 |
54 |
55 | Latest Reactstrap
56 |
57 |
58 | Latest Reactstrap
59 |
60 |
61 |
62 |
63 | Fully Responsive Pages
64 |
65 |
66 | Fully Responsive Pages
67 |
68 |
69 |
70 |
71 | 8+ Pages Template
72 |
73 |
74 | 50+ Page Templates
75 |
76 |
77 |
78 |
79 | 5+ UI Components
80 |
81 |
82 | 45+ UI Components
83 |
84 |
85 |
86 |
87 | No Documentation
88 |
89 |
90 | Documentation Provided
91 |
92 |
93 |
94 |
95 | Bootstrap Icons
96 |
97 |
98 | Bootstrap Icons
99 |
100 |
101 |
102 |
103 | Easy To Customize
104 |
105 |
106 | Easy To Customize
107 |
108 |
109 |
110 |
111 | -
112 |
113 |
114 | Right-to-Left(RTL) Verion
115 |
116 |
117 |
118 |
119 | -
120 |
121 |
122 | 20+ Integrated Plugins
123 |
124 |
125 |
126 |
127 | -
128 |
129 |
130 | 7+ Ready to Use App
131 |
132 |
133 |
134 |
135 | -
136 |
137 |
138 | 1 Year Premium Support
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | # Upgrade to Premium version
147 |
148 |
149 |
151 |
152 | Checkout our premium version of Xtreme NextJs Dashboard Template for lots more features and ready to use page templates.Check Live Preview | Download
154 |
155 |
156 |
157 | # Versions
158 |
159 |
160 |
161 | Next Js
162 | Angular
163 | Vue
164 | Nuxt Js
165 |
166 |
167 |
168 |
169 |
170 |
171 |
173 |
174 |
175 |
176 |
178 |
179 |
180 |
181 |
183 |
184 |
185 |
186 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 | # Useful Links
201 | - Admin Theme from Wrappixel
202 | - Bootstrap Themes from Wrappixel
203 | - Free Bootstrap Admin Templates from Wrappixel
204 | - React Bootstrap Template from Wrappixel
205 | - Vuejs Templates from Wrappixel
206 |
207 |
208 |
209 | # Licensing
210 | - Copyright 2024 Wrappixel https://wrappixel.com/
211 | - Licensed under MIT https://wrappixel.com/license/
212 |
213 |
214 |
215 | # Social Media 👭🏼
216 | - Facebook: https://www.facebook.com/wrappixel
217 | - Linkedin: https://www.linkedin.com/company/wrappixel/
218 | - Github: https://github.com/wrappixel
219 | - Twitter: https://twitter.com/wrappixel
220 | - Medium: https://medium.com/wrappixel
221 | - Discord: https://discord.com/invite/eMzE8F6Wqs
222 | - Youtube: https://www.youtube.com/channel/UCdFDlrhIchtxF8EmxejUPGQ
223 |
224 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./src/*"]
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/landingpage/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
2 |
3 | :root {
4 | --bs-font-sans-serif: "Plus Jakarta Sans",
5 | sans-serif;
6 | --bs-primary: #0085db;
7 | --bs-secondary: #707a82;
8 | --bs-danger: #fb977d;
9 | --bs-body-font-size: 0.875rem;
10 | --bs-body-font-weight: 400;
11 | --bs-body-line-height: 1.5;
12 | --bs-body-color: #5A6A85;
13 | --bs-body-bg: #fff;
14 | --bs-border-color: #ebf1f6;
15 | --bs-heading-color: #2A3547;
16 | --bs-border-radius: 7px;
17 | --bs-gutter-x: 24px;
18 | --bs-btn-font-size: 0.875rem;
19 | --bs-card-spacer-y: 30px;
20 | --bs-card-spacer-x: 30px;
21 | --bs-card-border-width: 0px;
22 | --bs-success-rgb: 75,208,139;
23 | --bs-primary-rgb: 0,133,219;
24 | --bs-light-rgb: 246,249,252;
25 | --bs-dark-rgb: 42,53,71;
26 | }
27 |
28 | .btn {
29 | --bs-btn-padding-x: 16px;
30 | --bs-btn-padding-y: 7px;
31 | --bs-btn-font-size: 0.875rem;
32 | }
33 |
34 | .btn-primary {
35 | --bs-btn-bg: var(--bs-primary);
36 | --bs-btn-border-color: var(--bs-primary);
37 | --bs-btn-hover-bg: var(--bs-primary);
38 | --bs-btn-hover-border-color: var(--bs-primary);
39 | --bs-btn-focus-shadow-rgb: 49,132,253;
40 | --bs-btn-active-bg: var(--bs-primary);
41 | --bs-btn-active-border-color: var(--bs-primary);
42 | --bs-btn-disabled-bg: var(--bs-primary);
43 | --bs-btn-disabled-border-color: var(--bs-primary);
44 | }
45 |
46 | .btn-secondary {
47 | --bs-btn-bg: var(--bs-secondary);
48 | --bs-btn-border-color: var(--bs-secondary);
49 | --bs-btn-hover-bg: var(--bs-secondary);
50 | --bs-btn-hover-border-color: var(--bs-secondary);
51 | --bs-btn-focus-shadow-rgb: 49,132,253;
52 | --bs-btn-active-bg: var(--bs-secondary);
53 | --bs-btn-active-border-color: var(--bs-secondary);
54 | --bs-btn-disabled-bg: var(--bs-secondary);
55 | --bs-btn-disabled-border-color: var(--bs-secondary);
56 | }
57 |
58 | .btn-danger {
59 | --bs-btn-bg: var(--bs-danger);
60 | --bs-btn-border-color: var(--bs-danger);
61 | --bs-btn-hover-bg: var(--bs-danger);
62 | --bs-btn-hover-border-color: var(--bs-danger);
63 | --bs-btn-focus-shadow-rgb: 49,132,253;
64 | --bs-btn-active-bg: var(--bs-danger);
65 | --bs-btn-active-border-color: var(--bs-danger);
66 | --bs-btn-disabled-bg: var(--bs-danger);
67 | --bs-btn-disabled-border-color: var(--bs-danger);
68 | }
69 |
70 | .btn-outline-primary {
71 | --bs-btn-color: var(--bs-primary);
72 | --bs-btn-border-color: var(--bs-primary);
73 | --bs-btn-hover-color: #fff;
74 | --bs-btn-hover-bg: var(--bs-primary);
75 | --bs-btn-hover-border-color: var(--bs-primary);
76 | --bs-btn-focus-shadow-rgb: 13,110,253;
77 | --bs-btn-active-color: #fff;
78 | --bs-btn-active-bg: var(--bs-primary);
79 | --bs-btn-active-border-color: var(--bs-primary);
80 | --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
81 | --bs-btn-disabled-color: var(--bs-primary);
82 | --bs-btn-disabled-bg: transparent;
83 | --bs-btn-disabled-border-color: var(--bs-primary);
84 | }
85 |
86 | /* background */
87 | .bg-light {
88 | background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
89 | }
90 |
91 | /* text colors */
92 | .text-success {
93 | color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;
94 | }
95 |
96 | .text-primary {
97 | color: rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important;
98 | }
99 |
100 | .text-dark {
101 | color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important;
102 | }
103 |
104 | .text-muted {
105 | color: #5a6a85!important;
106 | }
107 |
108 | /* card */
109 | .card {
110 | --bs-card-spacer-y: 30px;
111 | --bs-card-spacer-x: 30px;
112 | --bs-card-title-color: #2A3547;
113 | --bs-card-subtitle-color: #2A3547;
114 | --bs-card-border-width: 0px;
115 | --bs-card-box-shadow: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
116 | --bs-card-inner-border-radius: 7px;
117 | }
118 |
119 | .container {
120 | max-width: 1150px;
121 | }
122 |
123 | /* custom */
124 | .spacer {
125 | padding: 80px 0;
126 | }
127 |
128 | .pro-demo {
129 | -webkit-box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
130 | box-shadow: 0px 4px 45px rgb(0 0 0 / 9%);
131 | }
132 |
133 | .line-h33 {
134 | line-height: 33px;
135 | }
136 |
137 | .icon-circle {
138 | background-color: rgb(var( --bs-dark-rgb));
139 | display: inline-block;
140 | width: 15px;
141 | height: 15px;
142 | border-radius: 100%;
143 | position: relative;
144 | }
145 |
146 | .icon-circle.circle-primary {
147 | background-color: rgb(var( --bs-primary-rgb)) !important;
148 | }
149 |
150 | .icon-circle.circle-muted {
151 | background-color: var(--bs-body-color) !important;
152 | opacity: 0.8;
153 | }
154 |
155 | .icon-circle:before {
156 | content: '';
157 | position: absolute;
158 | left: 0;
159 | right: 0;
160 | width: 5px;
161 | height: 5px;
162 | border-radius: 100%;
163 | background-color: #fff;
164 | display: block;
165 | margin: 0 auto;
166 | top: 5px;
167 | }
168 |
169 | .live-box {
170 | position: relative;
171 | height: 275px;
172 | overflow: hidden;
173 | }
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/old/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/old/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/old/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
--------------------------------------------------------------------------------
/old/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 WrapPixel
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/old/README.md:
--------------------------------------------------------------------------------
1 |
3 |
6 |
7 |
8 |
9 |
11 |
12 |
13 |
14 | Xtreme admin is Free NextJs React admin Template. It allows you to create stunning backend application and more. It comes with ready to use UI Blocks & Elements to help level up the design and aesthetics of your project. Xtreme Next Js is built on Reactstrap, which is a responsive React Framework.
15 |
16 | The free version comes with elegant grid design that helps you play around with the look and feel of the web app the way you want. Even if you're a novice developer, clean code and easy to customize will get you up to speed in no time.
17 |
18 | If you're looking for the best React templates across the web, we've curated a list that's sure to meet your needs. Just pick from our wide variety of free responsive react templates that work seamlessly across devices and get started today!
19 |
20 |
21 | It allows building high-performing web-applications and other projects in a couple of days giving a seamless experience. You also get a variety of widgets, elements, page templates, icons and much more when you download it. The best part of this free admin theme bootstrap 5 is its full responsiveness and savior when you are low on budget. For all commercial projects, you can opt-in pro version of this template.
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
34 |
35 |
36 | Bootstrap
37 | React
38 | Vue
39 | Angular
40 | NextJs
41 |
42 |
43 |
44 |
45 |
46 |
47 |
49 |
50 |
51 |
52 |
54 |
55 |
56 |
57 |
59 |
60 |
61 |
62 |
64 |
65 |
66 |
67 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | Resources
76 |
88 |
89 |
90 | Licensing
91 |
99 |
100 |
101 |
102 | Upgrade to Premium version
103 |
104 |
106 |
107 | Checkout our premium version of Xtreme Bootstrap Admin for lots more features and ready to use page templates.Check Live Preview | Download
109 |
110 |
111 |
112 | Useful Links
113 |
122 |
123 |
124 | Social Media
125 | Facebook: https://www.facebook.com/wrappixel
126 | Twitter: https://twitter.com/wrappixel
127 | Medium: https://medium.com/wrappixel
128 |
--------------------------------------------------------------------------------
/old/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 |
--------------------------------------------------------------------------------
/old/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "xtreme-starter",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@reduxjs/toolkit": "^1.7.1",
13 | "bootstrap": "^5.1.3",
14 | "bootstrap-icons": "^1.7.2",
15 | "next": "12.0.7",
16 | "prop-types": "^15.8.0",
17 | "react": "17.0.2",
18 | "react-apexcharts": "^1.3.9",
19 | "react-dom": "17.0.2",
20 | "react-feather": "^2.0.9",
21 | "react-redux": "^7.2.6",
22 | "reactstrap": "^9.0.1",
23 | "sass": "^1.45.1",
24 | "simplebar-react": "^2.3.6"
25 | },
26 | "devDependencies": {
27 | "eslint": "8.5.0",
28 | "eslint-config-next": "12.0.7"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/old/pages/_app.js:
--------------------------------------------------------------------------------
1 | import FullLayout from "../src/layouts/FullLayout";
2 | import Head from "next/head";
3 | import "../styles/style.scss";
4 |
5 | function MyApp({ Component, pageProps }) {
6 | return (
7 | <>
8 |
9 | Xtreme Starter Next Js App
10 |
15 |
17 |
18 | );
19 | }
20 |
21 | export default MyApp;
22 |
--------------------------------------------------------------------------------
/old/pages/about.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Row,
4 | Col,
5 | CardTitle,
6 | CardBody,
7 | Button,
8 | Card,
9 | CardSubtitle,
10 | } from "reactstrap";
11 | import Image from "next/image";
12 | import simg from "../src/assets/images/background/icons2.jpg";
13 |
14 | const About = () => {
15 | const features = [
16 | {
17 | title: "Create React App Based",
18 | desc: "Create React App is a tool that gives you a massive head start when building React apps.",
19 | icon: "bi-vinyl",
20 | },
21 | {
22 | title: "React Hooks",
23 | desc: "Hooks are functions that let you “hook into” React state and lifecycle features from function components.",
24 | icon: "bi-umbrella",
25 | },
26 | {
27 | title: "CASL",
28 | desc: "It is isomorphic authorization JavaScript library which restricts what resources a given client is allowed to access.",
29 | icon: "bi-lock",
30 | },
31 | {
32 | title: "Dark & Light Layouts",
33 | desc: "This theme comes with built-in light & dark layouts, select as per your preference.",
34 | icon: "bi-brightness-high",
35 | },
36 | {
37 | title: "Built-in Customizer",
38 | desc: "Built-in customizer enables users to change their admin panel look & feel based on their preferences.",
39 | icon: "bi-gear",
40 | },
41 | {
42 | title: "Well Crafted Apps",
43 | desc: "Creative & smart well crafted apps like email, chat, todo & calender allows you to create your apps faster.",
44 | icon: "bi-star",
45 | },
46 | {
47 | title: "Clean & Modern Design",
48 | desc: "Beautifully crafted, clean & modern designed admin theme with 5 different demos & light - dark versions.",
49 | icon: "bi-brush",
50 | },
51 | {
52 | title: "Easy Navigation",
53 | desc: "Carefully crafted, clean, smart & easy theme navigation with collapsible option.",
54 | icon: "bi-segmented-nav",
55 | },
56 | {
57 | title: "No jQuery Dependency",
58 | desc: "jQuery is great JS library, But Its not a great idea to use jQuery and React in the same UI.",
59 | icon: "bi-shield-check",
60 | },
61 | {
62 | title: "Colors Options",
63 | desc: "Unlimited color options allows you to set your application color as per your branding.",
64 | icon: "bi-droplet-half",
65 | },
66 | {
67 | title: "Code Splitting",
68 | desc: 'To avoid winding up with a large bundle, it’s good to get ahead of the problem and use "Code Splitting".',
69 | icon: "bi-file-code",
70 | },
71 | {
72 | title: "Lazy Loading",
73 | desc: "Its more efficient to split each routes components into a separate chunk, and only load them when the route is visited.",
74 | icon: "bi-arrow-clockwise",
75 | },
76 | {
77 | title: "Continuous Updates",
78 | desc: "Regular updates with new demos and features is guaranteed",
79 | icon: "bi-bag-check",
80 | },
81 | {
82 | title: "Quality Code",
83 | desc: "We follow the best industry code structure that all developers will be able to pick up easily and fall in love",
84 | icon: "bi-stars",
85 | },
86 | {
87 | title: "Support",
88 | desc: "Premium customer support from the actual people who have created.",
89 | icon: "bi-person-check",
90 | },
91 | ];
92 | return (
93 |
94 |
99 |
100 | Xtreme React Admin Pro Version
101 |
102 | 5 premium and highly customizable demo variations included in the
103 | package, with React Router 6, Redux Toolkit, Axios nd much more...
104 |
105 |
107 |
109 |
114 | Buy Now
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 | {features.map((feature) => (
125 |
127 |
130 | {feature.title}
131 |
132 |
133 | {feature.desc}
134 |
135 |
136 |
137 | ))}
138 |
139 |
140 |
141 |
142 |
143 | );
144 | };
145 |
146 | export default About;
147 |
--------------------------------------------------------------------------------
/old/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import { Col, Row } from "reactstrap";
3 | import SalesChart from "../src/components/dashboard/SalesChart";
4 | import Feeds from "../src/components/dashboard/Feeds";
5 | import ProjectTables from "../src/components/dashboard/ProjectTable";
6 | import TopCards from "../src/components/dashboard/TopCards";
7 | import Blog from "../src/components/dashboard/Blog";
8 | import bg1 from "../src/assets/images/bg/bg1.jpg";
9 | import bg2 from "../src/assets/images/bg/bg2.jpg";
10 | import bg3 from "../src/assets/images/bg/bg3.jpg";
11 | import bg4 from "../src/assets/images/bg/bg4.jpg";
12 |
13 | const BlogData = [
14 | {
15 | image: bg1,
16 | title: "This is simple blog",
17 | subtitle: "2 comments, 1 Like",
18 | description:
19 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
20 | btnbg: "primary",
21 | },
22 | {
23 | image: bg2,
24 | title: "Lets be simple blog",
25 | subtitle: "2 comments, 1 Like",
26 | description:
27 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
28 | btnbg: "primary",
29 | },
30 | {
31 | image: bg3,
32 | title: "Don't Lamp blog",
33 | subtitle: "2 comments, 1 Like",
34 | description:
35 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
36 | btnbg: "primary",
37 | },
38 | {
39 | image: bg4,
40 | title: "Simple is beautiful",
41 | subtitle: "2 comments, 1 Like",
42 | description:
43 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
44 | btnbg: "primary",
45 | },
46 | ];
47 |
48 | export default function Home() {
49 | return (
50 |
51 |
52 |
Xtreme Starter Next Js App
53 |
54 |
55 |
56 |
57 | {/***Top Cards***/}
58 |
59 |
96 | {/***Sales & Feed***/}
97 |
98 |
105 | {/***Table ***/}
106 |
107 |
111 | {/***Blog Cards***/}
112 |
113 | {BlogData.map((blg) => (
114 |
125 |
126 |
22 |
23 |
Alert Page - Xtreme Starter Next Js App
24 |
25 |
26 |
27 | {/* --------------------------------------------------------------------------------*/}
28 | {/* Card-1*/}
29 | {/* --------------------------------------------------------------------------------*/}
30 |
31 |
32 |
33 | Alert
34 |
35 |
36 |
37 |
38 | This is a primary alert— check it out!
39 |
40 |
41 | This is a secondary alert— check it out!
42 |
43 |
44 | This is a success alert— check it out!
45 |
46 |
This is a danger alert— check it out!
47 |
48 | This is a warning alert— check it out!
49 |
50 |
This is a info alert— check it out!
51 |
This is a light alert— check it out!
52 |
This is a dark alert
53 |
55 |
56 | {/* --------------------------------------------------------------------------------*/}
57 | {/* Card-2*/}
58 | {/* --------------------------------------------------------------------------------*/}
59 |
60 |
61 |
64 |
65 |
66 |
67 | This is a primary alert with
68 |
73 |
74 | This is a secondary alert with
75 |
80 |
81 | This is a success alert with
82 |
87 |
88 | This is a danger alert with
89 |
94 |
95 | This is a warning alert with
96 |
101 |
102 | This is a info alert with
103 |
108 |
109 | This is a light alert with
110 |
115 |
116 | This is a dark alert with
117 |
122 |
124 |
125 | {/* --------------------------------------------------------------------------------*/}
126 | {/* Card-3*/}
127 | {/* --------------------------------------------------------------------------------*/}
128 |
129 |
130 |
133 |
134 |
135 |
136 | Well done!
137 |
138 | Aww yeah, you successfully read this important alert message.
139 | This example text is going to run a bit longer so that you can
140 | see how spacing within an alert works with this kind of content.
141 |
142 |
144 | Whenever you need to, be sure to use margin utilities to keep
145 | things nice and tidy.
146 |
147 |
148 |
150 |
151 | {/* --------------------------------------------------------------------------------*/}
152 | {/* Card-4*/}
153 | {/* --------------------------------------------------------------------------------*/}
154 |
155 |
156 |
159 |
160 |
161 |
162 | I am an alert and I can be dismissed!
163 |
164 |
166 |
167 | {/* --------------------------------------------------------------------------------*/}
168 | {/* Card-5*/}
169 | {/* --------------------------------------------------------------------------------*/}
170 |
171 |
172 |
175 |
176 |
177 |
178 | I am an alert and I can be dismissed!
179 |
180 |
181 |
182 |
183 | {/* --------------------------------------------------------------------------------*/}
184 | {/* Card-6*/}
185 | {/* --------------------------------------------------------------------------------*/}
186 |
187 |
188 |
191 |
192 |
193 |
199 | I am a primary alert and I can be dismissed without animating!
200 |
201 |
202 | I am an alert and I can be dismissed without animating!
203 |
204 |
206 |
207 |
208 | {/* --------------------------------------------------------------------------------*/}
209 | {/* End Inner Div*/}
210 | {/* --------------------------------------------------------------------------------*/}
211 |
6 | {/* --------------------------------------------------------------------------------*/}
7 | {/* Row*/}
8 | {/* --------------------------------------------------------------------------------*/}
9 |
10 |
15 |
16 | Badges
17 |
18 |
19 |
20 |
21 | Heading New
22 |
23 |
24 | Heading New
25 |
26 |
27 | Heading New
28 |
29 |
30 | Heading New
31 |
32 |
33 | Heading New
34 |
35 |
36 | Heading New
37 |
38 |
39 |
40 |
41 |
42 |
47 |
48 | Badges with Button
49 |
50 |
51 |
52 |
53 | Notifications 1
54 |
55 |
56 | Notifications 2
57 |
58 |
59 | Notifications 3
60 |
61 |
62 | Notifications 4
63 |
64 |
65 | Notifications 5
66 |
67 |
68 |
69 |
70 |
71 |
76 |
77 | Badges with Contextual variations
78 |
79 |
80 |
81 | Primary
82 |
83 | Secondary
84 |
85 |
86 | Success
87 |
88 |
89 | Danger
90 |
91 |
92 | Warning
93 |
94 |
95 | Info
96 |
97 |
98 | Light
99 |
100 |
101 | Dark
102 |
103 |
104 |
105 |
106 |
107 |
112 |
113 | Badges with Pills
114 |
115 |
116 |
117 |
118 | Primary
119 |
120 |
121 | Secondary
122 |
123 |
124 | Success
125 |
126 |
127 | Danger
128 |
129 |
130 | Warning
131 |
132 |
133 | Info
134 |
135 |
136 | Light
137 |
138 |
139 | Dark
140 |
141 |
142 |
143 |
144 |
145 |
150 |
151 | Badges with Links
152 |
153 |
154 |
155 |
156 | Primary
157 |
158 |
159 | Secondary
160 |
161 |
162 | Success
163 |
164 |
165 | Danger
166 |
167 |
168 | Warning
169 |
170 |
171 | Info
172 |
173 |
174 | Light
175 |
176 |
177 | Dark
178 |
179 |
180 |
181 |
182 |
183 |
184 | {/* --------------------------------------------------------------------------------*/}
185 | {/* Row*/}
186 | {/* --------------------------------------------------------------------------------*/}
187 |
15 |
20 |
21 |
22 | Basic Breadcrumbs
23 |
24 |
25 |
26 | Home
27 |
28 |
29 |
30 |
32 | Library
33 |
34 |
35 |
36 |
38 |
39 |
41 | Data
42 |
43 |
44 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default Breadcrumbs;
51 |
--------------------------------------------------------------------------------
/old/pages/ui/buttons.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Button, ButtonGroup, Card, CardBody, CardTitle, Row, Col } from 'reactstrap';
3 |
4 | const Buttons = () => {
5 | const [cSelected, setCSelected] = useState([]);
6 | const [rSelected, setRSelected] = useState(null);
7 |
8 | const onRadioBtnClick = (vSelected) => {
9 | setRSelected(vSelected);
10 | };
11 |
12 | const onCheckboxBtnClick = (selected) => {
13 | const index = cSelected.indexOf(selected);
14 | if (index < 0) {
15 | cSelected.push(selected);
16 | } else {
17 | cSelected.splice(index, 1);
18 | }
19 | setCSelected([...cSelected]);
20 | };
21 |
22 | return (
23 |
24 | {/* --------------------------------------------------------------------------------*/}
25 | {/* Start Inner Div*/}
26 | {/* --------------------------------------------------------------------------------*/}
27 | {/* --------------------------------------------------------------------------------*/}
28 | {/* Row*/}
29 | {/* --------------------------------------------------------------------------------*/}
30 |
31 |
36 |
37 | Buttons
38 |
39 |
40 |
41 |
42 | primary
43 |
44 |
45 | secondary
46 |
47 |
48 | success
49 |
50 |
51 | info
52 |
53 |
54 | warning
55 |
56 |
57 | danger
58 |
59 |
60 | link
61 |
62 |
63 |
64 |
65 |
66 |
71 |
72 | Outline Buttons
73 |
74 |
75 |
76 |
77 | primary
78 |
79 |
80 | secondary
81 |
82 |
83 | success
84 |
85 |
86 | info
87 |
88 |
89 | warning
90 |
91 |
92 | danger
93 |
94 |
95 |
96 |
97 |
98 |
103 |
104 | Large Size Buttons
105 |
106 |
107 |
108 |
109 | Large Button
110 |
111 |
112 | Large Button
113 |
114 |
115 |
116 |
117 |
118 |
123 |
124 | Small Size Buttons
125 |
126 |
127 |
128 |
129 | Small Button
130 |
131 |
132 | Small Button
133 |
134 |
135 |
136 |
137 |
138 |
143 |
144 | Active State Buttons
145 |
146 |
147 |
148 |
149 | Primary link
150 |
151 |
152 | Link
153 |
154 |
155 |
156 |
157 |
158 |
163 |
164 | Disabled State Buttons
165 |
166 |
167 |
168 |
169 | Primary button
170 |
171 |
172 | Button
173 |
174 |
175 |
176 |
177 |
178 |
183 |
184 | Block Buttons
185 |
186 |
187 |
188 |
189 | Block level button
190 |
191 |
192 | Block level button
193 |
194 |
195 |
196 |
197 |
198 |
203 |
204 | Checkbox(Stateful Buttons)
205 |
206 |
207 | Checkbox Buttons
208 |
209 | onCheckboxBtnClick(1)}
212 | active={cSelected.includes(1)}
213 | >
214 | One
215 |
216 | onCheckboxBtnClick(2)}
219 | active={cSelected.includes(2)}
220 | >
221 | Two
222 |
223 | onCheckboxBtnClick(3)}
226 | active={cSelected.includes(3)}
227 | >
228 | Three
229 |
230 |
231 | Selected: {JSON.stringify(cSelected)}
232 |
233 |
234 |
235 |
240 |
241 | Radio Buttons (Stateful Buttons)
242 |
243 |
244 | Radio Buttons
245 |
246 | onRadioBtnClick(1)} active={rSelected === 1}>
247 | One
248 |
249 | onRadioBtnClick(2)} active={rSelected === 2}>
250 | Two
251 |
252 | onRadioBtnClick(3)} active={rSelected === 3}>
253 | Three
254 |
255 |
256 | Selected: {rSelected}
257 |
258 |
259 |
260 |
261 | {/* --------------------------------------------------------------------------------*/}
262 | {/* Row*/}
263 | {/* --------------------------------------------------------------------------------*/}
264 |
265 | {/* --------------------------------------------------------------------------------*/}
266 | {/* End Inner Div*/}
267 | {/* --------------------------------------------------------------------------------*/}
268 |
58 | {/* --------------------------------------------------------------------------------*/}
59 | {/* Card-1*/}
60 | {/* --------------------------------------------------------------------------------*/}
61 |
Basic Card
62 |
63 | {BlogData.map((blg) => (
64 |
75 | {/* --------------------------------------------------------------------------------*/}
76 | {/* Card-2*/}
77 | {/* --------------------------------------------------------------------------------*/}
78 |
79 | Alignment Text
80 |
82 | Special Title Treatment
83 |
84 | With supporting text below as a natural lead-in to additional
85 | content.
86 |
87 |
88 | Go somewhere
89 |
90 |
91 |
92 |
94 | Special Title Treatment
95 |
96 | With supporting text below as a natural lead-in to additional
97 | content.
98 |
99 |
100 | Go somewhere
101 |
102 |
103 |
104 |
106 | Special Title Treatment
107 |
108 | With supporting text below as a natural lead-in to additional
109 | content.
110 |
111 |
112 | Go somewhere
113 |
114 |
115 |
116 |
117 | {/* --------------------------------------------------------------------------------*/}
118 | {/* Card-2*/}
119 | {/* --------------------------------------------------------------------------------*/}
120 |
121 | Colored Card
122 |
124 | Special Title Treatment
125 |
126 | With supporting text below as a natural lead-in to additional
127 | content.
128 |
129 |
130 | Button
131 |
132 |
133 |
134 |
136 | Special Title Treatment
137 |
138 | With supporting text below as a natural lead-in to additional
139 | content.
140 |
141 |
142 | Button
143 |
144 |
145 |
146 |
148 | Special Title Treatment
149 |
150 | With supporting text below as a natural lead-in to additional
151 | content.
152 |
153 |
154 | Button
155 |
156 |
157 |
158 |
160 | Special Title Treatment
161 |
162 | With supporting text below as a natural lead-in to additional
163 | content.
164 |
165 |
166 | Button
167 |
168 |
169 |
170 |
172 | Special Title Treatment
173 |
174 | With supporting text below as a natural lead-in to additional
175 | content.
176 |
177 |
178 | Button
179 |
180 |
181 |
182 |
184 | Special Title Treatment
185 |
186 | With supporting text below as a natural lead-in to additional
187 | content.
188 |
189 |
190 | Button
191 |
192 |
193 |
194 |
196 | Special Title Treatment
197 |
198 | With supporting text below as a natural lead-in to additional
199 | content.
200 |
201 |
202 | Button
203 |
204 |
205 |
206 |
208 | Special Title Treatment
209 |
210 | With supporting text below as a natural lead-in to additional
211 | content.
212 |
213 |
214 | Button
215 |
216 |
217 |
218 |
219 | {/* --------------------------------------------------------------------------------*/}
220 | {/* Card-Group*/}
221 | {/* --------------------------------------------------------------------------------*/}
222 |
223 | Card Group
224 |
226 |
227 |
229 | Card title
230 |
231 | Card subtitle
232 |
233 |
234 | This is a wider card with supporting text below as a natural
235 | lead-in to additional content. This content is a little bit
236 | longer.
237 |
238 | Button
239 |
240 |
241 |
242 |
244 | Card title
245 |
246 | Card subtitle
247 |
248 |
249 | This card has supporting text below as a natural lead-in to
250 | additional content.
251 |
252 | Button
253 |
254 |
255 |
256 |
258 | Card title
259 |
260 | Card subtitle
261 |
262 |
263 | This is a wider card with supporting text below as a natural
264 | lead-in to additional content. This card has even longer
265 | content than the first to show that equal height action.
266 |
267 | Button
268 |
269 |
270 |
271 |
272 |
273 |
18 |
23 |
24 |
25 | Form Example
26 |
27 |
28 |
101 |
102 |
103 |
104 |
105 | );
106 | };
107 |
108 | export default Forms;
109 |
--------------------------------------------------------------------------------
/old/pages/ui/grid.js:
--------------------------------------------------------------------------------
1 | import { Container, Col, Row, Card, CardBody, CardTitle } from "reactstrap";
2 |
3 | const Grid = () => {
4 | return (
5 |
6 | {/* --------------------------------------------------------------------------------*/}
7 | {/* Start Inner Div*/}
8 | {/* --------------------------------------------------------------------------------*/}
9 | {/* --------------------------------------------------------------------------------*/}
10 | {/* Row*/}
11 | {/* --------------------------------------------------------------------------------*/}
12 |
13 |
14 | Grid Layout
15 |
16 |
17 |
18 |
19 | .col
21 |
22 |
23 |
24 | .col
26 |
27 | .col
29 |
30 | .col
32 |
33 | .col
35 |
36 |
37 |
38 | .col-3
40 |
41 |
43 | .col-auto - variable width content
44 |
45 |
46 | .col-3
48 |
49 |
50 |
51 | .col-6
53 |
54 | .col-6
56 |
57 |
58 |
59 | .col-6 .col-sm-4
61 |
62 | .col-6 .col-sm-4
64 |
65 | .col-sm-4
67 |
68 |
69 |
70 |
78 | .col-sm-6 .col-sm-order-2 .col-sm-offset-2
79 |
80 |
81 |
82 |
83 |
91 | .col-sm-12 .col-md-6 .col-md-offset-3
92 |
93 |
94 |
95 |
96 |
103 | .col-sm .col-sm-offset-1
104 |
105 |
106 |
113 | .col-sm .col-sm-offset-1
114 |
115 |
116 |
117 |
118 |
119 |
120 | {/* --------------------------------------------------------------------------------*/}
121 | {/* Row*/}
122 | {/* --------------------------------------------------------------------------------*/}
123 |
124 | {/* --------------------------------------------------------------------------------*/}
125 | {/* End Inner Div*/}
126 | {/* --------------------------------------------------------------------------------*/}
127 |
7 | {/* --------------------------------------------------------------------------------*/}
8 | {/* table-1*/}
9 | {/* --------------------------------------------------------------------------------*/}
10 |
18 |
19 |
20 | Table with Border
21 |
22 |
23 |
24 |
25 |
26 | #
27 | First Name
28 | Last Name
29 | Username
30 |
31 |
32 |
33 |
34 | 1
35 | Mark
36 | Otto
37 | @mdo
38 |
39 |
40 | 2
41 | Jacob
42 | Thornton
43 | @fat
44 |
45 |
46 | 3
47 | Larry
48 | the Bird
49 | @twitter
50 |
51 |
52 |
53 |
54 |
55 |
56 | {/* --------------------------------------------------------------------------------*/}
57 | {/* table-3*/}
58 | {/* --------------------------------------------------------------------------------*/}
59 |
61 |
62 |
63 | Table with Striped
64 |
65 |
66 |
67 |
68 |
69 | #
70 | First Name
71 | Last Name
72 | Username
73 |
74 |
75 |
76 |
77 | 1
78 | Mark
79 | Otto
80 | @mdo
81 |
82 |
83 | 2
84 | Jacob
85 | Thornton
86 | @fat
87 |
88 |
89 | 3
90 | Larry
91 | the Bird
92 | @twitter
93 |
94 |
95 |
96 |
97 |
98 |
99 | {/* --------------------------------------------------------------------------------*/}
100 | {/* table-3*/}
101 | {/* --------------------------------------------------------------------------------*/}
102 |
104 |
105 |
106 | Table with Hover
107 |
108 |
109 |
110 |
111 |
112 | #
113 | First Name
114 | Last Name
115 | Username
116 |
117 |
118 |
119 |
120 | 1
121 | Mark
122 | Otto
123 | @mdo
124 |
125 |
126 | 2
127 | Jacob
128 | Thornton
129 | @fat
130 |
131 |
132 | 3
133 | Larry
134 | the Bird
135 | @twitter
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 | );
144 | };
145 |
146 | export default Tables;
147 |
--------------------------------------------------------------------------------
/old/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/public/favicon.ico
--------------------------------------------------------------------------------
/old/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/old/src/assets/images/background/icons2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/background/icons2.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/bg/bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/bg/bg1.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/bg/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/bg/bg2.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/bg/bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/bg/bg3.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/bg/bg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/bg/bg4.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/logos/xtremelogo.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/old/src/assets/images/logos/xtremelogowhite.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/old/src/assets/images/users/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/users/user1.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/users/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/users/user2.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/users/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/users/user3.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/users/user4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/users/user4.jpg
--------------------------------------------------------------------------------
/old/src/assets/images/users/user5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/old/src/assets/images/users/user5.jpg
--------------------------------------------------------------------------------
/old/src/components/dashboard/Blog.js:
--------------------------------------------------------------------------------
1 | import {
2 | Card,
3 | CardBody,
4 | CardImg,
5 | CardSubtitle,
6 | CardText,
7 | CardTitle,
8 | Button,
9 | } from "reactstrap";
10 | import PropTypes from "prop-types";
11 | import Image from "next/image";
12 |
13 | const Blog = ({ image, title, subtitle, text, color }) => {
14 | return (
15 |
16 |
18 | {title}
19 | {subtitle}
20 | {text}
21 | Read More
22 |
23 |
24 | );
25 | };
26 |
27 | Blog.propTypes = {
28 | title: PropTypes.string,
29 | image: PropTypes.any,
30 | subtitle: PropTypes.string,
31 | text: PropTypes.string,
32 | color: PropTypes.string,
33 | };
34 | export default Blog;
35 |
--------------------------------------------------------------------------------
/old/src/components/dashboard/Feeds.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Card,
4 | CardBody,
5 | CardTitle,
6 | ListGroup,
7 | CardSubtitle,
8 | ListGroupItem,
9 | Button,
10 | } from 'reactstrap';
11 |
12 | const FeedData = [
13 | {
14 | title: 'Cras justo odio',
15 | icon: 'bi bi-bell',
16 | color: 'primary',
17 | date: '6 minute ago',
18 | id: 1,
19 | },
20 | {
21 | title: 'New user registered.',
22 | icon: 'bi bi-person',
23 | color: 'info',
24 | date: '6 minute ago',
25 | id: 2,
26 | },
27 | {
28 | title: 'Server #1 overloaded.',
29 | icon: 'bi bi-hdd',
30 | color: 'danger',
31 | date: '6 minute ago',
32 | id: 3,
33 | },
34 | {
35 | title: 'New order received.',
36 | icon: 'bi bi-bag-check',
37 | color: 'success',
38 | date: '6 minute ago',
39 | id: 4,
40 | },
41 | {
42 | title: 'Cras justo odio',
43 | icon: 'bi bi-bell',
44 | color: 'dark',
45 | date: '6 minute ago',
46 | id: 5,
47 | },
48 | {
49 | title: 'Server #1 overloaded.',
50 | icon: 'bi bi-hdd',
51 | color: 'warning',
52 | date: '6 minute ago',
53 | id: 6,
54 | },
55 | ];
56 |
57 | const Feeds = () => {
58 | return (
59 |
60 |
61 | Feeds
62 |
63 | Widget you can use
64 |
65 |
66 | {FeedData.map((feed) => (
67 |
74 |
75 |
77 | {feed.title}
78 | {feed.date}
79 |
80 | ))}
81 |
82 |
83 |
84 | );
85 | };
86 |
87 | export default Feeds;
88 |
--------------------------------------------------------------------------------
/old/src/components/dashboard/ProjectTable.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { Card, CardBody, CardTitle, CardSubtitle, Table } from "reactstrap";
3 | import user1 from "../../assets/images/users/user1.jpg";
4 | import user2 from "../../assets/images/users/user2.jpg";
5 | import user3 from "../../assets/images/users/user3.jpg";
6 | import user4 from "../../assets/images/users/user4.jpg";
7 | import user5 from "../../assets/images/users/user5.jpg";
8 |
9 | const tableData = [
10 | {
11 | avatar: user1,
12 | name: "Hanna Gover",
13 | email: "hgover@gmail.com",
14 | project: "Flexy React",
15 | status: "pending",
16 | weeks: "35",
17 | budget: "95K",
18 | },
19 | {
20 | avatar: user2,
21 | name: "Hanna Gover",
22 | email: "hgover@gmail.com",
23 | project: "Lading pro React",
24 | status: "done",
25 | weeks: "35",
26 | budget: "95K",
27 | },
28 | {
29 | avatar: user3,
30 | name: "Hanna Gover",
31 | email: "hgover@gmail.com",
32 | project: "Elite React",
33 | status: "holt",
34 | weeks: "35",
35 | budget: "95K",
36 | },
37 | {
38 | avatar: user4,
39 | name: "Hanna Gover",
40 | email: "hgover@gmail.com",
41 | project: "Flexy React",
42 | status: "pending",
43 | weeks: "35",
44 | budget: "95K",
45 | },
46 | {
47 | avatar: user5,
48 | name: "Hanna Gover",
49 | email: "hgover@gmail.com",
50 | project: "Ample React",
51 | status: "done",
52 | weeks: "35",
53 | budget: "95K",
54 | },
55 | ];
56 |
57 | const ProjectTables = () => {
58 | return (
59 |
60 |
61 | Project Listing
62 |
63 | Overview of the projects
64 |
65 |
66 |
67 |
68 |
69 | Team Lead
70 | Project
71 |
72 | Status
73 | Weeks
74 | Budget
75 |
76 |
77 |
78 | {tableData.map((tdata, index) => (
79 |
80 |
81 |
82 |
89 |
90 |
{tdata.name}
91 | {tdata.email}
92 |
93 |
95 | {tdata.project}
96 |
97 | {tdata.status === "pending" ? (
98 |
105 | {tdata.weeks}
106 | {tdata.budget}
107 |
108 | ))}
109 |
110 |
111 |
113 |
114 | );
115 | };
116 |
117 | export default ProjectTables;
118 |
--------------------------------------------------------------------------------
/old/src/components/dashboard/SalesChart.js:
--------------------------------------------------------------------------------
1 | import { Card, CardBody, CardSubtitle, CardTitle } from "reactstrap";
2 | import dynamic from "next/dynamic";
3 |
4 | const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
5 |
6 | const SalesChart = () => {
7 | const chartoptions = {
8 | series: [
9 | {
10 | name: "Iphone 13",
11 | data: [0, 31, 40, 28, 51, 42, 109, 100],
12 | },
13 | {
14 | name: "Oneplue 9",
15 | data: [0, 11, 32, 45, 32, 34, 52, 41],
16 | },
17 | ],
18 | options: {
19 | chart: {
20 | type: "area",
21 | },
22 | dataLabels: {
23 | enabled: false,
24 | },
25 | grid: {
26 | strokeDashArray: 3,
27 | borderColor: "rgba(0,0,0,0.1)",
28 | },
29 |
30 | stroke: {
31 | curve: "smooth",
32 | width: 1,
33 | },
34 | xaxis: {
35 | categories: [
36 | "Jan",
37 | "Feb",
38 | "March",
39 | "April",
40 | "May",
41 | "June",
42 | "July",
43 | "Aug",
44 | ],
45 | },
46 | },
47 | };
48 | return (
49 |
50 |
51 | Sales Summary
52 |
53 | Yearly Sales Report
54 |
55 |
63 |
64 | );
65 | };
66 |
67 | export default SalesChart;
68 |
--------------------------------------------------------------------------------
/old/src/components/dashboard/TopCards.js:
--------------------------------------------------------------------------------
1 | import { Card, CardBody } from 'reactstrap';
2 | import PropTypes from 'prop-types';
3 |
4 | const TopCards = ({ bg, icon, earning, subtitle }) => {
5 | return (
6 |
7 |
8 |
9 |
10 |
12 |
13 |
{earning}
14 | {subtitle}
15 |
16 |
18 |
19 | );
20 | };
21 |
22 | TopCards.propTypes = {
23 | bg: PropTypes.string,
24 | icon: PropTypes.string,
25 | earning: PropTypes.string,
26 | subtitle: PropTypes.string,
27 | };
28 |
29 | export default TopCards;
30 |
--------------------------------------------------------------------------------
/old/src/layouts/FullLayout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Container } from "reactstrap";
3 | import Header from "./header/Header";
4 | import Sidebar from "./sidebars/vertical/Sidebar";
5 |
6 | const FullLayout = ({ children }) => {
7 | const [open, setOpen] = React.useState(false);
8 | const showMobilemenu = () => {
9 | setOpen(!open);
10 | };
11 |
12 | return (
13 |
14 |
15 | {/******** Sidebar **********/}
16 |
21 | showMobilemenu()} />
22 |
23 | {/********Content Area**********/}
24 |
25 |
26 | {/********header**********/}
27 |
showMobilemenu()} />
28 |
29 | {/********Middle Content**********/}
30 |
31 | {children}
32 |
33 |
34 |
36 | );
37 | };
38 |
39 | export default FullLayout;
40 |
--------------------------------------------------------------------------------
/old/src/layouts/header/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import {
5 | Navbar,
6 | Collapse,
7 | Nav,
8 | NavItem,
9 | NavbarBrand,
10 | UncontrolledDropdown,
11 | DropdownToggle,
12 | DropdownMenu,
13 | DropdownItem,
14 | Dropdown,
15 | Button,
16 | } from "reactstrap";
17 | import LogoWhite from "../../assets/images/logos/xtremelogowhite.svg";
18 | import user1 from "../../assets/images/users/user1.jpg";
19 |
20 | const Header = ({ showMobmenu }) => {
21 | const [isOpen, setIsOpen] = React.useState(false);
22 | const [dropdownOpen, setDropdownOpen] = React.useState(false);
23 |
24 | const toggle = () => setDropdownOpen((prevState) => !prevState);
25 | const Handletoggle = () => {
26 | setIsOpen(!isOpen);
27 | };
28 |
29 | return (
30 |
31 |
32 |
33 |
35 |
36 |
38 |
39 |
40 |
46 | {isOpen ? (
47 |
52 |
53 |
54 |
55 |
56 |
57 | Starter
59 |
60 |
61 |
62 | About
64 |
65 |
66 |
67 |
68 | DD Menu
69 |
70 |
71 | Option 1
72 | Option 2
73 | Reset
75 |
76 |
77 |
78 |
79 |
80 |
81 |
89 |
90 |
91 | Info
92 | My Account
93 | Edit Profile
94 | My Balance
96 | Inbox
97 | Logout
98 |
99 |
100 |
101 |
102 | );
103 | };
104 |
105 | export default Header;
106 |
--------------------------------------------------------------------------------
/old/src/layouts/logo/Logo.js:
--------------------------------------------------------------------------------
1 | import LogoDark from "../../assets/images/logos/xtremelogo.svg";
2 | import Image from "next/image";
3 | import Link from "next/link";
4 |
5 | const Logo = () => {
6 | return (
7 |
9 |
11 |
12 | );
13 | };
14 |
15 | export default Logo;
16 |
--------------------------------------------------------------------------------
/old/src/layouts/sidebars/vertical/Sidebar.js:
--------------------------------------------------------------------------------
1 | import { Button, Nav, NavItem } from "reactstrap";
2 | import Logo from "../../logo/Logo";
3 | import Link from "next/link";
4 | import { useRouter } from "next/router";
5 |
6 | const navigation = [
7 | {
8 | title: "Dashboard",
9 | href: "/",
10 | icon: "bi bi-speedometer2",
11 | },
12 | {
13 | title: "Alert",
14 | href: "/ui/alerts",
15 | icon: "bi bi-bell",
16 | },
17 | {
18 | title: "Badges",
19 | href: "/ui/badges",
20 | icon: "bi bi-patch-check",
21 | },
22 | {
23 | title: "Buttons",
24 | href: "/ui/buttons",
25 | icon: "bi bi-hdd-stack",
26 | },
27 | {
28 | title: "Cards",
29 | href: "/ui/cards",
30 | icon: "bi bi-card-text",
31 | },
32 | {
33 | title: "Grid",
34 | href: "/ui/grid",
35 | icon: "bi bi-columns",
36 | },
37 | {
38 | title: "Table",
39 | href: "/ui/tables",
40 | icon: "bi bi-layout-split",
41 | },
42 | {
43 | title: "Forms",
44 | href: "/ui/forms",
45 | icon: "bi bi-textarea-resize",
46 | },
47 | {
48 | title: "Breadcrumbs",
49 | href: "/ui/breadcrumbs",
50 | icon: "bi bi-link",
51 | },
52 | {
53 | title: "About",
54 | href: "/about",
55 | icon: "bi bi-people",
56 | },
57 | ];
58 |
59 | const Sidebar = ({ showMobilemenu }) => {
60 | let curl = useRouter();
61 | const location = curl.pathname;
62 |
63 | return (
64 |
65 |
66 |
74 |
75 |
76 | {navigation.map((navi, index) => (
77 |
78 |
86 | {navi.title}
88 |
89 |
90 |
91 | ))}
92 |
99 | Download Free
100 |
101 |
108 | Upgrade To Pro
109 |
110 |
111 |
112 |
2 |
8 |
--------------------------------------------------------------------------------
/public/images/logos/xtremelogowhite.svg:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/public/images/users/user1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/public/images/users/user1.jpg
--------------------------------------------------------------------------------
/public/images/users/user2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/public/images/users/user2.jpg
--------------------------------------------------------------------------------
/public/images/users/user3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/public/images/users/user3.jpg
--------------------------------------------------------------------------------
/public/images/users/user4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/public/images/users/user4.jpg
--------------------------------------------------------------------------------
/public/images/users/user5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/public/images/users/user5.jpg
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
16 |
18 | {title}
19 | {subtitle}
20 | {text}
21 | Read More
22 |
23 |
24 | );
25 | };
26 |
27 | Blog.propTypes = {
28 | title: PropTypes.string,
29 | image: PropTypes.any,
30 | subtitle: PropTypes.string,
31 | text: PropTypes.string,
32 | color: PropTypes.string,
33 | };
34 | export default Blog;
35 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/components/dashboard/Feeds.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Card,
4 | CardBody,
5 | CardTitle,
6 | ListGroup,
7 | CardSubtitle,
8 | ListGroupItem,
9 | Button,
10 | } from 'reactstrap';
11 |
12 | const FeedData = [
13 | {
14 | title: 'Cras justo odio',
15 | icon: 'bi bi-bell',
16 | color: 'primary',
17 | date: '6 minute ago',
18 | id: 1,
19 | },
20 | {
21 | title: 'New user registered.',
22 | icon: 'bi bi-person',
23 | color: 'info',
24 | date: '6 minute ago',
25 | id: 2,
26 | },
27 | {
28 | title: 'Server #1 overloaded.',
29 | icon: 'bi bi-hdd',
30 | color: 'danger',
31 | date: '6 minute ago',
32 | id: 3,
33 | },
34 | {
35 | title: 'New order received.',
36 | icon: 'bi bi-bag-check',
37 | color: 'success',
38 | date: '6 minute ago',
39 | id: 4,
40 | },
41 | {
42 | title: 'Cras justo odio',
43 | icon: 'bi bi-bell',
44 | color: 'dark',
45 | date: '6 minute ago',
46 | id: 5,
47 | },
48 | {
49 | title: 'Server #1 overloaded.',
50 | icon: 'bi bi-hdd',
51 | color: 'warning',
52 | date: '6 minute ago',
53 | id: 6,
54 | },
55 | ];
56 |
57 | const Feeds = () => {
58 | return (
59 |
60 |
61 | Feeds
62 |
63 | Widget you can use
64 |
65 |
66 | {FeedData.map((feed) => (
67 |
74 |
75 |
77 | {feed.title}
78 | {feed.date}
79 |
80 | ))}
81 |
82 |
83 |
84 | );
85 | };
86 |
87 | export default Feeds;
88 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/components/dashboard/ProjectTable.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import { Card, CardBody, CardTitle, CardSubtitle, Table } from "reactstrap";
3 | import user1 from "public/images/users/user1.jpg";
4 | import user2 from "public/images/users/user2.jpg";
5 | import user3 from "public/images/users/user3.jpg";
6 | import user4 from "public/images/users/user4.jpg";
7 | import user5 from "public/images/users/user5.jpg";
8 |
9 | const tableData = [
10 | {
11 | avatar: user1,
12 | name: "Hanna Gover",
13 | email: "hgover@gmail.com",
14 | project: "Flexy React",
15 | status: "pending",
16 | weeks: "35",
17 | budget: "95K",
18 | },
19 | {
20 | avatar: user2,
21 | name: "Hanna Gover",
22 | email: "hgover@gmail.com",
23 | project: "Lading pro React",
24 | status: "done",
25 | weeks: "35",
26 | budget: "95K",
27 | },
28 | {
29 | avatar: user3,
30 | name: "Hanna Gover",
31 | email: "hgover@gmail.com",
32 | project: "Elite React",
33 | status: "holt",
34 | weeks: "35",
35 | budget: "95K",
36 | },
37 | {
38 | avatar: user4,
39 | name: "Hanna Gover",
40 | email: "hgover@gmail.com",
41 | project: "Flexy React",
42 | status: "pending",
43 | weeks: "35",
44 | budget: "95K",
45 | },
46 | {
47 | avatar: user5,
48 | name: "Hanna Gover",
49 | email: "hgover@gmail.com",
50 | project: "Ample React",
51 | status: "done",
52 | weeks: "35",
53 | budget: "95K",
54 | },
55 | ];
56 |
57 | const ProjectTables = () => {
58 | return (
59 |
60 |
61 | Project Listing
62 |
63 | Overview of the projects
64 |
65 |
66 |
67 |
68 |
69 | Team Lead
70 | Project
71 |
72 | Status
73 | Weeks
74 | Budget
75 |
76 |
77 |
78 | {tableData.map((tdata, index) => (
79 |
80 |
81 |
82 |
89 |
90 |
{tdata.name}
91 | {tdata.email}
92 |
93 |
95 | {tdata.project}
96 |
97 | {tdata.status === "pending" ? (
98 |
105 | {tdata.weeks}
106 | {tdata.budget}
107 |
108 | ))}
109 |
110 |
111 |
113 |
114 | );
115 | };
116 |
117 | export default ProjectTables;
118 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/components/dashboard/SalesChart.js:
--------------------------------------------------------------------------------
1 | import { Card, CardBody, CardSubtitle, CardTitle } from "reactstrap";
2 | import dynamic from "next/dynamic";
3 |
4 | const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
5 |
6 | const SalesChart = () => {
7 | const chartoptions = {
8 | series: [
9 | {
10 | name: "Iphone 13",
11 | data: [0, 31, 40, 28, 51, 42, 109, 100],
12 | },
13 | {
14 | name: "Oneplue 9",
15 | data: [0, 11, 32, 45, 32, 34, 52, 41],
16 | },
17 | ],
18 | options: {
19 | chart: {
20 | type: "area",
21 | },
22 | dataLabels: {
23 | enabled: false,
24 | },
25 | grid: {
26 | strokeDashArray: 3,
27 | borderColor: "rgba(0,0,0,0.1)",
28 | },
29 |
30 | stroke: {
31 | curve: "smooth",
32 | width: 1,
33 | },
34 | xaxis: {
35 | categories: [
36 | "Jan",
37 | "Feb",
38 | "March",
39 | "April",
40 | "May",
41 | "June",
42 | "July",
43 | "Aug",
44 | ],
45 | },
46 | },
47 | };
48 | return (
49 |
50 |
51 | Sales Summary
52 |
53 | Yearly Sales Report
54 |
55 |
63 |
64 | );
65 | };
66 |
67 | export default SalesChart;
68 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/components/dashboard/TopCards.js:
--------------------------------------------------------------------------------
1 | import { Card, CardBody } from 'reactstrap';
2 | import PropTypes from 'prop-types';
3 |
4 | const TopCards = ({ bg, icon, earning, subtitle }) => {
5 | return (
6 |
7 |
8 |
9 |
10 |
12 |
13 |
{earning}
14 | {subtitle}
15 |
16 |
18 |
19 | );
20 | };
21 |
22 | TopCards.propTypes = {
23 | bg: PropTypes.string,
24 | icon: PropTypes.string,
25 | earning: PropTypes.string,
26 | subtitle: PropTypes.string,
27 | };
28 |
29 | export default TopCards;
30 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/layout.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import React from "react";
3 | import { Container } from "reactstrap";
4 | import Header from "./layouts/header/Header";
5 | import Sidebar from "./layouts/sidebars/vertical/Sidebar";
6 |
7 | const FullLayout = ({ children }) => {
8 | const [open, setOpen] = React.useState(false);
9 | const showMobilemenu = () => {
10 | setOpen(!open);
11 | };
12 |
13 | return (
14 |
15 |
16 | {/******** Sidebar **********/}
17 |
22 | showMobilemenu()} />
23 |
24 | {/********Content Area**********/}
25 |
26 |
27 | {/********header**********/}
28 |
showMobilemenu()} />
29 |
30 | {/********Middle Content**********/}
31 |
32 | {children}
33 |
34 |
35 |
37 | );
38 | };
39 |
40 | export default FullLayout;
41 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/layouts/header/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import Image from "next/image";
4 | import {
5 | Navbar,
6 | Collapse,
7 | Nav,
8 | NavItem,
9 | NavbarBrand,
10 | UncontrolledDropdown,
11 | DropdownToggle,
12 | DropdownMenu,
13 | DropdownItem,
14 | Dropdown,
15 | Button,
16 | } from "reactstrap";
17 | import LogoWhite from "public/images/logos/xtremelogowhite.svg";
18 | import user1 from "public/images/users/user1.jpg";
19 |
20 | const Header = ({ showMobmenu }) => {
21 | const [isOpen, setIsOpen] = React.useState(false);
22 | const [dropdownOpen, setDropdownOpen] = React.useState(false);
23 |
24 | const toggle = () => setDropdownOpen((prevState) => !prevState);
25 | const Handletoggle = () => {
26 | setIsOpen(!isOpen);
27 | };
28 |
29 | return (
30 |
31 |
32 |
33 |
35 |
36 |
38 |
39 |
40 |
46 | {isOpen ? (
47 |
52 |
53 |
54 |
55 |
56 |
57 |
61 |
62 |
66 |
67 |
68 | DD Menu
69 |
70 |
71 | Option 1
72 | Option 2
73 | Reset
75 |
76 |
77 |
78 |
79 |
80 |
81 |
89 |
90 |
91 | Info
92 | My Account
93 | Edit Profile
94 | My Balance
96 | Inbox
97 | Logout
98 |
99 |
100 |
101 |
102 | );
103 | };
104 |
105 | export default Header;
106 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/layouts/shared/logo/Logo.js:
--------------------------------------------------------------------------------
1 | import LogoDark from "public/images/logos/xtremelogo.svg";
2 | import Image from "next/image";
3 | import Link from "next/link";
4 |
5 | const Logo = () => {
6 | return (
7 |
66 |
67 |
69 |
75 |
76 |
77 |
78 | {navigation.map((navi, index) => (
79 |
80 | {navi.title}
90 |
91 |
92 | ))}
93 |
100 | Download Free
101 |
102 |
109 | Upgrade To Pro
110 |
111 |
112 |
113 |
52 |
53 |
Xtreme Starter Next Js App
54 |
55 |
56 |
57 |
58 | {/***Top Cards***/}
59 |
60 |
97 | {/***Sales & Feed***/}
98 |
99 |
106 | {/***Table ***/}
107 |
108 |
112 | {/***Blog Cards***/}
113 |
114 | {BlogData.map((blg) => (
115 |
126 |
127 |
95 |
100 |
101 | Xtreme Nextjs Admin Pro Version
102 |
103 | 5 premium and highly customizable demo variations included in the
104 | package, with React Router 6, Redux Toolkit, Axios nd much more...
105 |
106 |
108 |
110 |
115 | Buy Now
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | {features.map((feature) => (
126 |
128 |
131 | {feature.title}
132 |
133 |
134 | {feature.desc}
135 |
136 |
137 |
138 | ))}
139 |
140 |
141 |
142 |
143 |
144 | );
145 | };
146 |
147 | export default About;
148 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/ui/alerts/page.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import React, { useState } from "react";
3 | import {
4 | Alert,
5 | UncontrolledAlert,
6 | Card,
7 | CardBody,
8 | CardTitle,
9 | } from "reactstrap";
10 |
11 |
12 | const Alerts = () => {
13 | // For Dismiss Button with Alert
14 | const [visible, setVisible] = useState(true);
15 |
16 | const onDismiss = () => {
17 | setVisible(false);
18 | };
19 |
20 | return (
21 |
22 | {/* --------------------------------------------------------------------------------*/}
23 | {/* Card-1*/}
24 | {/* --------------------------------------------------------------------------------*/}
25 |
26 |
27 |
28 | Alert
29 |
30 |
31 |
32 |
33 | This is a primary alert— check it out!
34 |
35 |
36 | This is a secondary alert— check it out!
37 |
38 |
39 | This is a success alert— check it out!
40 |
41 |
This is a danger alert— check it out!
42 |
43 | This is a warning alert— check it out!
44 |
45 |
This is a info alert— check it out!
46 |
This is a light alert— check it out!
47 |
This is a dark alert
48 |
50 |
51 | {/* --------------------------------------------------------------------------------*/}
52 | {/* Card-2*/}
53 | {/* --------------------------------------------------------------------------------*/}
54 |
55 |
56 |
59 |
60 |
158 |
159 |
160 | {/* --------------------------------------------------------------------------------*/}
161 | {/* Card-3*/}
162 | {/* --------------------------------------------------------------------------------*/}
163 |
164 |
165 |
168 |
169 |
170 |
171 | Well done!
172 |
173 | Aww yeah, you successfully read this important alert message.
174 | This example text is going to run a bit longer so that you can
175 | see how spacing within an alert works with this kind of content.
176 |
177 |
179 | Whenever you need to, be sure to use margin utilities to keep
180 | things nice and tidy.
181 |
182 |
183 |
185 |
186 | {/* --------------------------------------------------------------------------------*/}
187 | {/* Card-4*/}
188 | {/* --------------------------------------------------------------------------------*/}
189 |
190 |
191 |
194 |
195 |
196 |
197 | I am an alert and I can be dismissed!
198 |
199 |
201 |
202 | {/* --------------------------------------------------------------------------------*/}
203 | {/* Card-5*/}
204 | {/* --------------------------------------------------------------------------------*/}
205 |
206 |
207 |
210 |
211 |
212 |
213 | I am an alert and I can be dismissed!
214 |
215 |
216 |
217 |
218 | {/* --------------------------------------------------------------------------------*/}
219 | {/* Card-6*/}
220 | {/* --------------------------------------------------------------------------------*/}
221 |
222 |
223 |
226 |
227 |
228 |
234 | I am a primary alert and I can be dismissed without animating!
235 |
236 |
237 | I am an alert and I can be dismissed without animating!
238 |
239 |
241 |
242 |
243 |
244 |
7 | {/* --------------------------------------------------------------------------------*/}
8 | {/* Row*/}
9 | {/* --------------------------------------------------------------------------------*/}
10 |
11 |
16 |
17 | Badges
18 |
19 |
20 |
21 |
22 | Heading New
23 |
24 |
25 | Heading New
26 |
27 |
28 | Heading New
29 |
30 |
31 | Heading New
32 |
33 |
34 | Heading New
35 |
36 |
37 | Heading New
38 |
39 |
40 |
41 |
42 |
43 |
48 |
49 | Badges with Button
50 |
51 |
52 |
53 |
54 | Notifications 1
55 |
56 |
57 | Notifications 2
58 |
59 |
60 | Notifications 3
61 |
62 |
63 | Notifications 4
64 |
65 |
66 | Notifications 5
67 |
68 |
69 |
70 |
71 |
72 |
77 |
78 | Badges with Contextual variations
79 |
80 |
81 |
82 | Primary
83 |
84 | Secondary
85 |
86 |
87 | Success
88 |
89 |
90 | Danger
91 |
92 |
93 | Warning
94 |
95 |
96 | Info
97 |
98 |
99 | Light
100 |
101 |
102 | Dark
103 |
104 |
105 |
106 |
107 |
108 |
113 |
114 | Badges with Pills
115 |
116 |
117 |
118 |
119 | Primary
120 |
121 |
122 | Secondary
123 |
124 |
125 | Success
126 |
127 |
128 | Danger
129 |
130 |
131 | Warning
132 |
133 |
134 | Info
135 |
136 |
137 | Light
138 |
139 |
140 | Dark
141 |
142 |
143 |
144 |
145 |
146 |
151 |
152 | Badges with Links
153 |
154 |
155 |
156 |
157 | Primary
158 |
159 |
160 | Secondary
161 |
162 |
163 | Success
164 |
165 |
166 | Danger
167 |
168 |
169 | Warning
170 |
171 |
172 | Info
173 |
174 |
175 | Light
176 |
177 |
178 | Dark
179 |
180 |
181 |
182 |
183 |
184 |
185 | {/* --------------------------------------------------------------------------------*/}
186 | {/* Row*/}
187 | {/* --------------------------------------------------------------------------------*/}
188 |
16 |
21 |
22 |
23 | Basic Breadcrumbs
24 |
25 |
26 |
27 | Home
28 |
29 |
30 |
31 |
33 | Library
34 |
35 |
36 |
37 |
39 |
40 |
42 | Data
43 |
44 |
45 |
46 |
47 |
48 | );
49 | };
50 |
51 | export default Breadcrumbs;
52 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/ui/cards/page.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import {
3 | Card,
4 | CardImg,
5 | CardText,
6 | CardBody,
7 | CardTitle,
8 | CardSubtitle,
9 | CardGroup,
10 | Button,
11 | Row,
12 | Col,
13 | } from "reactstrap";
14 |
15 | import Blog from "@/app/(DashboardLayout)/components/dashboard/Blog";
16 | import bg1 from "public/images/bg/bg1.jpg";
17 | import bg2 from "public/images/bg/bg2.jpg";
18 | import bg3 from "public/images/bg/bg3.jpg";
19 | import bg4 from "public/images/bg/bg4.jpg";
20 | import Image from "next/image";
21 |
22 | const BlogData = [
23 | {
24 | image: bg1,
25 | title: "This is simple blog",
26 | subtitle: "2 comments, 1 Like",
27 | description:
28 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
29 | btnbg: "primary",
30 | },
31 | {
32 | image: bg2,
33 | title: "Lets be simple blog",
34 | subtitle: "2 comments, 1 Like",
35 | description:
36 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
37 | btnbg: "primary",
38 | },
39 | {
40 | image: bg3,
41 | title: "Don't Lamp blog",
42 | subtitle: "2 comments, 1 Like",
43 | description:
44 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
45 | btnbg: "primary",
46 | },
47 | {
48 | image: bg4,
49 | title: "Simple is beautiful",
50 | subtitle: "2 comments, 1 Like",
51 | description:
52 | "This is a wider card with supporting text below as a natural lead-in to additional content.",
53 | btnbg: "primary",
54 | },
55 | ];
56 |
57 | const Cards = () => {
58 | return (
59 |
60 | {/* --------------------------------------------------------------------------------*/}
61 | {/* Card-1*/}
62 | {/* --------------------------------------------------------------------------------*/}
63 |
Basic Card
64 |
65 | {BlogData.map((blg) => (
66 |
78 | {/* --------------------------------------------------------------------------------*/}
79 | {/* Card-2*/}
80 | {/* --------------------------------------------------------------------------------*/}
81 |
82 | Alignment Text
83 |
85 | Special Title Treatment
86 |
87 | With supporting text below as a natural lead-in to additional
88 | content.
89 |
90 |
91 | Go somewhere
92 |
93 |
94 |
95 |
97 | Special Title Treatment
98 |
99 | With supporting text below as a natural lead-in to additional
100 | content.
101 |
102 |
103 | Go somewhere
104 |
105 |
106 |
107 |
109 | Special Title Treatment
110 |
111 | With supporting text below as a natural lead-in to additional
112 | content.
113 |
114 |
115 | Go somewhere
116 |
117 |
118 |
119 |
120 | {/* --------------------------------------------------------------------------------*/}
121 | {/* Card-2*/}
122 | {/* --------------------------------------------------------------------------------*/}
123 |
124 | Colored Card
125 |
127 | Special Title Treatment
128 |
129 | With supporting text below as a natural lead-in to additional
130 | content.
131 |
132 |
133 | Button
134 |
135 |
136 |
137 |
139 | Special Title Treatment
140 |
141 | With supporting text below as a natural lead-in to additional
142 | content.
143 |
144 |
145 | Button
146 |
147 |
148 |
149 |
151 | Special Title Treatment
152 |
153 | With supporting text below as a natural lead-in to additional
154 | content.
155 |
156 |
157 | Button
158 |
159 |
160 |
161 |
163 | Special Title Treatment
164 |
165 | With supporting text below as a natural lead-in to additional
166 | content.
167 |
168 |
169 | Button
170 |
171 |
172 |
173 |
175 | Special Title Treatment
176 |
177 | With supporting text below as a natural lead-in to additional
178 | content.
179 |
180 |
181 | Button
182 |
183 |
184 |
185 |
187 | Special Title Treatment
188 |
189 | With supporting text below as a natural lead-in to additional
190 | content.
191 |
192 |
193 | Button
194 |
195 |
196 |
197 |
199 | Special Title Treatment
200 |
201 | With supporting text below as a natural lead-in to additional
202 | content.
203 |
204 |
205 | Button
206 |
207 |
208 |
209 |
211 | Special Title Treatment
212 |
213 | With supporting text below as a natural lead-in to additional
214 | content.
215 |
216 |
217 | Button
218 |
219 |
220 |
221 |
222 | {/* --------------------------------------------------------------------------------*/}
223 | {/* Card-Group*/}
224 | {/* --------------------------------------------------------------------------------*/}
225 |
226 | Card Group
227 |
229 |
230 |
238 | Card title
239 |
240 | Card subtitle
241 |
242 |
243 | This is a wider card with supporting text below as a natural
244 | lead-in to additional content. This content is a little bit
245 | longer.
246 |
247 | Button
248 |
249 |
250 |
251 |
259 | Card title
260 |
261 | Card subtitle
262 |
263 |
264 | This card has supporting text below as a natural lead-in to
265 | additional content.
266 |
267 | Button
268 |
269 |
270 |
271 |
279 | Card title
280 |
281 | Card subtitle
282 |
283 |
284 | This is a wider card with supporting text below as a natural
285 | lead-in to additional content. This card has even longer
286 | content than the first to show that equal height action.
287 |
288 | Button
289 |
290 |
291 |
292 |
293 |
294 |
19 |
24 |
25 |
26 | Form Example
27 |
28 |
29 |
102 |
103 |
104 |
105 |
106 | );
107 | };
108 |
109 | export default Forms;
110 |
--------------------------------------------------------------------------------
/src/app/(DashboardLayout)/ui/grid/page.js:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import { Container, Col, Row, Card, CardBody, CardTitle } from "reactstrap";
3 |
4 | const Grid = () => {
5 | return (
6 |
7 | {/* --------------------------------------------------------------------------------*/}
8 | {/* Start Inner Div*/}
9 | {/* --------------------------------------------------------------------------------*/}
10 | {/* --------------------------------------------------------------------------------*/}
11 | {/* Row*/}
12 | {/* --------------------------------------------------------------------------------*/}
13 |
14 |
15 | Grid Layout
16 |
17 |
18 |
19 |
20 | .col
22 |
23 |
24 |
25 | .col
27 |
28 | .col
30 |
31 | .col
33 |
34 | .col
36 |
37 |
38 |
39 | .col-3
41 |
42 |
44 | .col-auto - variable width content
45 |
46 |
47 | .col-3
49 |
50 |
51 |
52 | .col-6
54 |
55 | .col-6
57 |
58 |
59 |
60 | .col-6 .col-sm-4
62 |
63 | .col-6 .col-sm-4
65 |
66 | .col-sm-4
68 |
69 |
70 |
71 |
79 | .col-sm-6 .col-sm-order-2 .col-sm-offset-2
80 |
81 |
82 |
83 |
84 |
92 | .col-sm-12 .col-md-6 .col-md-offset-3
93 |
94 |
95 |
96 |
97 |
104 | .col-sm .col-sm-offset-1
105 |
106 |
107 |
114 | .col-sm .col-sm-offset-1
115 |
116 |
117 |
118 |
119 |
120 |
121 | {/* --------------------------------------------------------------------------------*/}
122 | {/* Row*/}
123 | {/* --------------------------------------------------------------------------------*/}
124 |
125 | {/* --------------------------------------------------------------------------------*/}
126 | {/* End Inner Div*/}
127 | {/* --------------------------------------------------------------------------------*/}
128 |
8 | {/* --------------------------------------------------------------------------------*/}
9 | {/* table-1*/}
10 | {/* --------------------------------------------------------------------------------*/}
11 |
19 |
20 |
21 | Table with Border
22 |
23 |
24 |
25 |
26 |
27 | #
28 | First Name
29 | Last Name
30 | Username
31 |
32 |
33 |
34 |
35 | 1
36 | Mark
37 | Otto
38 | @mdo
39 |
40 |
41 | 2
42 | Jacob
43 | Thornton
44 | @fat
45 |
46 |
47 | 3
48 | Larry
49 | the Bird
50 | @twitter
51 |
52 |
53 |
54 |
55 |
56 |
57 | {/* --------------------------------------------------------------------------------*/}
58 | {/* table-3*/}
59 | {/* --------------------------------------------------------------------------------*/}
60 |
62 |
63 |
64 | Table with Striped
65 |
66 |
67 |
68 |
69 |
70 | #
71 | First Name
72 | Last Name
73 | Username
74 |
75 |
76 |
77 |
78 | 1
79 | Mark
80 | Otto
81 | @mdo
82 |
83 |
84 | 2
85 | Jacob
86 | Thornton
87 | @fat
88 |
89 |
90 | 3
91 | Larry
92 | the Bird
93 | @twitter
94 |
95 |
96 |
97 |
98 |
99 |
100 | {/* --------------------------------------------------------------------------------*/}
101 | {/* table-3*/}
102 | {/* --------------------------------------------------------------------------------*/}
103 |
105 |
106 |
107 | Table with Hover
108 |
109 |
110 |
111 |
112 |
113 | #
114 | First Name
115 | Last Name
116 | Username
117 |
118 |
119 |
120 |
121 | 1
122 | Mark
123 | Otto
124 | @mdo
125 |
126 |
127 | 2
128 | Jacob
129 | Thornton
130 | @fat
131 |
132 |
133 | 3
134 | Larry
135 | the Bird
136 | @twitter
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 | );
145 | };
146 |
147 | export default Tables;
148 |
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wrappixel/xtreme-admin-nextjs-free/60b00af6d2692bd6bc4f0f611a9cbad865e04f1e/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/layout.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import "@/styles/style.scss";
3 | export default function RootLayout({
4 | // Layouts must accept a children prop.
5 | // This will be populated with nested layouts or pages
6 | children,
7 | }) {
8 | return (
9 |
10 |
11 | Xtreme Free Next Js Dashboard
12 | 
8 |
9 |
10 |
11 | # Compare with Premium Version 🌓
12 |
13 | 
150 |
151 | 
177 |
178 | 
182 |
183 | 
187 |
188 | 
48 |
49 | 
53 |
54 | 
58 |
59 | 
63 |
64 | 
68 |
69 |