) => {
104 | setAnchorEl(event.currentTarget);
105 | };
106 |
107 | const handleClose = () => {
108 | setAnchorEl(null);
109 | };
110 |
111 | return (
112 |
113 |
142 | );
143 | };
144 |
145 | export default LivePreviewDropdown;
146 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/components/utilities/auto-complete/ComboBoxAutocomplete.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import React from "react";
3 |
4 | import { TextField } from "@mui/material";
5 |
6 | import Autocomplete from '@mui/material/Autocomplete';
7 |
8 | import BaseCard from "../../shared/BaseCard";
9 |
10 |
11 | const ComboBoxAutocomplete = () => {
12 | return (
13 |
14 |
22 | );
23 | };
24 |
25 | // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
26 | const top100Films = [
27 | { label: "The Shawshank Redemption", year: 1994 },
28 | { label: "The Godfather", year: 1972 },
29 | { label: "The Godfather: Part II", year: 1974 },
30 | { label: "The Dark Knight", year: 2008 },
31 | { label: "12 Angry Men", year: 1957 },
32 | { label: "Schindler's List", year: 1993 },
33 | { label: "Pulp Fiction", year: 1994 },
34 | {
35 | label: "The Lord of the Rings: The Return of the King",
36 | year: 2003,
37 | },
38 | { label: "The Good, the Bad and the Ugly", year: 1966 },
39 | { label: "Fight Club", year: 1999 },
40 | {
41 | label: "The Lord of the Rings: The Fellowship of the Ring",
42 | year: 2001,
43 | },
44 | {
45 | label: "Star Wars: Episode V - The Empire Strikes Back",
46 | year: 1980,
47 | },
48 | { label: "Forrest Gump", year: 1994 },
49 | { label: "Inception", year: 2010 },
50 | {
51 | label: "The Lord of the Rings: The Two Towers",
52 | year: 2002,
53 | },
54 | { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
55 | { label: "Goodfellas", year: 1990 },
56 | { label: "The Matrix", year: 1999 },
57 | { label: "Seven Samurai", year: 1954 },
58 | {
59 | label: "Star Wars: Episode IV - A New Hope",
60 | year: 1977,
61 | },
62 | { label: "City of God", year: 2002 },
63 | { label: "Se7en", year: 1995 },
64 | { label: "The Silence of the Lambs", year: 1991 },
65 | { label: "It's a Wonderful Life", year: 1946 },
66 | { label: "Life Is Beautiful", year: 1997 },
67 | { label: "The Usual Suspects", year: 1995 },
68 | { label: "Léon: The Professional", year: 1994 },
69 | { label: "Spirited Away", year: 2001 },
70 | { label: "Saving Private Ryan", year: 1998 },
71 | { label: "Once Upon a Time in the West", year: 1968 },
72 | { label: "American History X", year: 1998 },
73 | { label: "Interstellar", year: 2014 },
74 | { label: "Casablanca", year: 1942 },
75 | { label: "City Lights", year: 1931 },
76 | { label: "Psycho", year: 1960 },
77 | { label: "The Green Mile", year: 1999 },
78 | { label: "The Intouchables", year: 2011 },
79 | { label: "Modern Times", year: 1936 },
80 | { label: "Raiders of the Lost Ark", year: 1981 },
81 | { label: "Rear Window", year: 1954 },
82 | { label: "The Pianist", year: 2002 },
83 | { label: "The Departed", year: 2006 },
84 | { label: "Terminator 2: Judgment Day", year: 1991 },
85 | { label: "Back to the Future", year: 1985 },
86 | { label: "Whiplash", year: 2014 },
87 | { label: "Gladiator", year: 2000 },
88 | { label: "Memento", year: 2000 },
89 | { label: "The Prestige", year: 2006 },
90 | { label: "The Lion King", year: 1994 },
91 | { label: "Apocalypse Now", year: 1979 },
92 | { label: "Alien", year: 1979 },
93 | { label: "Sunset Boulevard", year: 1950 },
94 | {
95 | label:
96 | "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
97 | year: 1964,
98 | },
99 | { label: "The Great Dictator", year: 1940 },
100 | { label: "Cinema Paradiso", year: 1988 },
101 | { label: "The Lives of Others", year: 2006 },
102 | { label: "Grave of the Fireflies", year: 1988 },
103 | { label: "Paths of Glory", year: 1957 },
104 | { label: "Django Unchained", year: 2012 },
105 | { label: "The Shining", year: 1980 },
106 | { label: "WALL·E", year: 2008 },
107 | { label: "American Beauty", year: 1999 },
108 | { label: "The Dark Knight Rises", year: 2012 },
109 | { label: "Princess Mononoke", year: 1997 },
110 | { label: "Aliens", year: 1986 },
111 | { label: "Oldboy", year: 2003 },
112 | { label: "Once Upon a Time in America", year: 1984 },
113 | { label: "Witness for the Prosecution", year: 1957 },
114 | { label: "Das Boot", year: 1981 },
115 | { label: "Citizen Kane", year: 1941 },
116 | { label: "North by Northwest", year: 1959 },
117 | { label: "Vertigo", year: 1958 },
118 | {
119 | label: "Star Wars: Episode VI - Return of the Jedi",
120 | year: 1983,
121 | },
122 | { label: "Reservoir Dogs", year: 1992 },
123 | { label: "Braveheart", year: 1995 },
124 | { label: "M", year: 1931 },
125 | { label: "Requiem for a Dream", year: 2000 },
126 | { label: "Amélie", year: 2001 },
127 | { label: "A Clockwork Orange", year: 1971 },
128 | { label: "Like Stars on Earth", year: 2007 },
129 | { label: "Taxi Driver", year: 1976 },
130 | { label: "Lawrence of Arabia", year: 1962 },
131 | { label: "Double Indemnity", year: 1944 },
132 | {
133 | label: "Eternal Sunshine of the Spotless Mind",
134 | year: 2004,
135 | },
136 | { label: "Amadeus", year: 1984 },
137 | { label: "To Kill a Mockingbird", year: 1962 },
138 | { label: "Toy Story 3", year: 2010 },
139 | { label: "Logan", year: 2017 },
140 | { label: "Full Metal Jacket", year: 1987 },
141 | { label: "Dangal", year: 2016 },
142 | { label: "The Sting", year: 1973 },
143 | { label: "2001: A Space Odyssey", year: 1968 },
144 | { label: "Singin' in the Rain", year: 1952 },
145 | { label: "Toy Story", year: 1995 },
146 | { label: "Bicycle Thieves", year: 1948 },
147 | { label: "The Kid", year: 1921 },
148 | { label: "Inglourious Basterds", year: 2009 },
149 | { label: "Snatch", year: 2000 },
150 | { label: "3 Idiots", year: 2009 },
151 | { label: "Monty Python and the Holy Grail", year: 1975 },
152 | ];
153 |
154 | export { ComboBoxAutocomplete };
155 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/utilities/switch/page.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Grid,
4 | Box,
5 | Switch,
6 | FormGroup,
7 | FormControlLabel,
8 | } from "@mui/material";
9 |
10 | import BaseCard from '@/app/(DashboardLayout)/components/shared/BaseCard';
11 |
12 |
13 | const ExSwitch = () => {
14 | // 2
15 |
16 | return (
17 | (
18 |
19 | {/* ------------------------- row 1 ------------------------- */}
20 |
26 |
27 |
28 |
33 |
34 |
35 |
36 | {/* ------------------------- row 1 ------------------------- */}
37 |
43 |
44 |
45 |
46 |
56 |
57 |
58 |
59 |
60 | {/* ------------------------- row 1 ------------------------- */}
61 |
67 |
68 |
69 |
72 |
73 |
74 |
75 | {/* ------------------------- row 1 ------------------------- */}
76 |
82 |
83 |
84 |
91 |
92 |
93 |
94 | {/* ------------------------- row 1 ------------------------- */}
95 |
101 |
102 |
103 |
104 |
129 |
130 |
131 |
132 |
133 | )
134 | );
135 | };
136 |
137 | export default ExSwitch;
138 |
--------------------------------------------------------------------------------
/package/README.md:
--------------------------------------------------------------------------------
1 |
2 | # MaterialPro NextJS Free
3 | MaterialPro NextJS Admin Dashboard
4 |
5 |
6 |
7 |
9 |
10 |
11 | # Compare with Premium Version 🌓
12 |
13 |
14 |
15 |
16 | MaterialPro NextJS Free Version
17 | MaterialPro 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 | 6+ Stunning Dashboards
43 |
44 |
45 |
46 |
47 | -
48 |
49 |
50 | Dashboard Figma Files
51 |
52 |
53 |
54 |
55 | Material Ui
56 |
57 |
58 | Material Ui
59 |
60 |
61 |
62 |
63 | Fully Responsive Pages
64 |
65 |
66 | Fully Responsive Pages
67 |
68 |
69 |
70 |
71 | 7+ Pages Template
72 |
73 |
74 | 65+ Page Templates
75 |
76 |
77 |
78 |
79 | 7+ 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 | Tabler Icons
96 |
97 |
98 | Tabler 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 | 15+ Integrated Plugins
123 |
124 |
125 |
126 |
127 | -
128 |
129 |
130 | 8+ 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 MaterialPro 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 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/layout/sidebar/SidebarProfile.tsx:
--------------------------------------------------------------------------------
1 | import { Box, Avatar, Typography, Tooltip, IconButton, MenuItem, Divider, Button, MenuProps, styled, Menu } from "@mui/material";
2 | import { useState } from "react";
3 | import { IconCaretDownFilled } from '@tabler/icons-react';
4 | import { Icon } from "@iconify/react";
5 | import Link from "next/link";
6 | export const SidebarProfile = () => {
7 |
8 | const [anchorEl, setAnchorEl] = useState(null);
9 | const open = Boolean(anchorEl);
10 | const handleClick = (event: any) => {
11 | setAnchorEl(event.currentTarget);
12 | };
13 | const handleClose = () => {
14 | setAnchorEl(null);
15 | };
16 |
17 |
18 | const StyledMenu = styled((props: MenuProps) => (
19 |
63 | <>
64 |
71 |
72 |
74 |
75 |
83 | {
96 |
107 | Markarn Doe
108 |
109 |
110 |
111 |
112 |
114 |
115 |
116 |
117 | }
118 |
119 |
120 |
180 |
181 |
182 | );
183 | };
184 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/utilities/buttons/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import {
3 | Paper, Grid,
4 | Button,
5 | Box,
6 | Stack,
7 | IconButton,
8 | Fab,
9 | ButtonGroup,
10 | } from '@mui/material';
11 | import BaseCard from '@/app/(DashboardLayout)/components/shared/BaseCard';
12 | import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
13 | import { IconHome, IconTrash, IconUser } from '@tabler/icons-react';
14 |
15 |
16 | const Item = styled(Paper)(({ theme }) => ({
17 | ...theme.typography.body1,
18 | textAlign: 'center',
19 | color: theme.palette.text.secondary,
20 | height: 60,
21 | lineHeight: '60px',
22 | }));
23 | const darkTheme = createTheme({ palette: { mode: 'dark' } });
24 | const lightTheme = createTheme({ palette: { mode: 'light' } });
25 |
26 | const Buttons = () => {
27 | return (
28 | (
29 |
30 |
35 |
36 |
37 |
38 | Contained
39 |
40 |
41 | Contained
42 |
43 |
44 | Contained
45 |
46 |
47 | Contained
48 |
49 |
50 | Contained
51 |
52 |
53 |
54 |
55 |
60 |
61 |
62 | Text
63 | Text
64 | Text
65 | Text
66 | Text
67 |
68 |
69 |
70 |
75 |
76 |
77 |
78 | outlined
79 |
80 |
81 | outlined
82 |
83 |
84 | outlined
85 |
86 |
87 | outlined
88 |
89 |
90 | outlined
91 |
92 |
93 |
94 |
95 |
100 |
101 |
102 |
103 | small
104 |
105 |
106 | medium
107 |
108 |
109 | large
110 |
111 |
112 |
113 |
114 |
119 |
120 |
121 |
122 |
124 |
125 |
127 |
128 |
130 |
131 |
132 |
133 |
138 |
139 |
140 |
141 |
143 |
144 |
146 |
147 |
149 |
150 |
151 |
152 |
157 |
158 |
162 | One
163 | Two
164 | Three
165 |
166 |
167 |
168 |
173 |
174 |
175 | One
176 | Two
177 | Three
178 |
179 |
180 |
181 |
182 | )
183 | );
184 | };
185 |
186 | export default Buttons;
187 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/components/utilities/auto-complete/MultipleValuesAutocomplete.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from "react";
4 |
5 | import { TextField } from "@mui/material";
6 |
7 | import Autocomplete from '@mui/material/Autocomplete';
8 |
9 | import BaseCard from "../../shared/BaseCard";
10 |
11 |
12 | const MultipleValuesAutocomplete = () => {
13 | return (
14 |
15 | option.title}
21 | defaultValue={[top100Films[13]]}
22 | filterSelectedOptions
23 | renderInput={(params) => (
24 |
32 | );
33 | };
34 |
35 | // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
36 | const top100Films = [
37 | { title: "The Shawshank Redemption", year: 1994 },
38 | { title: "The Godfather", year: 1972 },
39 | { title: "The Godfather: Part II", year: 1974 },
40 | { title: "The Dark Knight", year: 2008 },
41 | { title: "12 Angry Men", year: 1957 },
42 | { title: "Schindler's List", year: 1993 },
43 | { title: "Pulp Fiction", year: 1994 },
44 | {
45 | title: "The Lord of the Rings: The Return of the King",
46 | year: 2003,
47 | },
48 | { title: "The Good, the Bad and the Ugly", year: 1966 },
49 | { title: "Fight Club", year: 1999 },
50 | {
51 | title: "The Lord of the Rings: The Fellowship of the Ring",
52 | year: 2001,
53 | },
54 | {
55 | title: "Star Wars: Episode V - The Empire Strikes Back",
56 | year: 1980,
57 | },
58 | { title: "Forrest Gump", year: 1994 },
59 | { title: "Inception", year: 2010 },
60 | {
61 | title: "The Lord of the Rings: The Two Towers",
62 | year: 2002,
63 | },
64 | { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
65 | { title: "Goodfellas", year: 1990 },
66 | { title: "The Matrix", year: 1999 },
67 | { title: "Seven Samurai", year: 1954 },
68 | {
69 | title: "Star Wars: Episode IV - A New Hope",
70 | year: 1977,
71 | },
72 | { title: "City of God", year: 2002 },
73 | { title: "Se7en", year: 1995 },
74 | { title: "The Silence of the Lambs", year: 1991 },
75 | { title: "It's a Wonderful Life", year: 1946 },
76 | { title: "Life Is Beautiful", year: 1997 },
77 | { title: "The Usual Suspects", year: 1995 },
78 | { title: "Léon: The Professional", year: 1994 },
79 | { title: "Spirited Away", year: 2001 },
80 | { title: "Saving Private Ryan", year: 1998 },
81 | { title: "Once Upon a Time in the West", year: 1968 },
82 | { title: "American History X", year: 1998 },
83 | { title: "Interstellar", year: 2014 },
84 | { title: "Casablanca", year: 1942 },
85 | { title: "City Lights", year: 1931 },
86 | { title: "Psycho", year: 1960 },
87 | { title: "The Green Mile", year: 1999 },
88 | { title: "The Intouchables", year: 2011 },
89 | { title: "Modern Times", year: 1936 },
90 | { title: "Raiders of the Lost Ark", year: 1981 },
91 | { title: "Rear Window", year: 1954 },
92 | { title: "The Pianist", year: 2002 },
93 | { title: "The Departed", year: 2006 },
94 | { title: "Terminator 2: Judgment Day", year: 1991 },
95 | { title: "Back to the Future", year: 1985 },
96 | { title: "Whiplash", year: 2014 },
97 | { title: "Gladiator", year: 2000 },
98 | { title: "Memento", year: 2000 },
99 | { title: "The Prestige", year: 2006 },
100 | { title: "The Lion King", year: 1994 },
101 | { title: "Apocalypse Now", year: 1979 },
102 | { title: "Alien", year: 1979 },
103 | { title: "Sunset Boulevard", year: 1950 },
104 | {
105 | title:
106 | "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
107 | year: 1964,
108 | },
109 | { title: "The Great Dictator", year: 1940 },
110 | { title: "Cinema Paradiso", year: 1988 },
111 | { title: "The Lives of Others", year: 2006 },
112 | { title: "Grave of the Fireflies", year: 1988 },
113 | { title: "Paths of Glory", year: 1957 },
114 | { title: "Django Unchained", year: 2012 },
115 | { title: "The Shining", year: 1980 },
116 | { title: "WALL·E", year: 2008 },
117 | { title: "American Beauty", year: 1999 },
118 | { title: "The Dark Knight Rises", year: 2012 },
119 | { title: "Princess Mononoke", year: 1997 },
120 | { title: "Aliens", year: 1986 },
121 | { title: "Oldboy", year: 2003 },
122 | { title: "Once Upon a Time in America", year: 1984 },
123 | { title: "Witness for the Prosecution", year: 1957 },
124 | { title: "Das Boot", year: 1981 },
125 | { title: "Citizen Kane", year: 1941 },
126 | { title: "North by Northwest", year: 1959 },
127 | { title: "Vertigo", year: 1958 },
128 | {
129 | title: "Star Wars: Episode VI - Return of the Jedi",
130 | year: 1983,
131 | },
132 | { title: "Reservoir Dogs", year: 1992 },
133 | { title: "Braveheart", year: 1995 },
134 | { title: "M", year: 1931 },
135 | { title: "Requiem for a Dream", year: 2000 },
136 | { title: "Amélie", year: 2001 },
137 | { title: "A Clockwork Orange", year: 1971 },
138 | { title: "Like Stars on Earth", year: 2007 },
139 | { title: "Taxi Driver", year: 1976 },
140 | { title: "Lawrence of Arabia", year: 1962 },
141 | { title: "Double Indemnity", year: 1944 },
142 | {
143 | title: "Eternal Sunshine of the Spotless Mind",
144 | year: 2004,
145 | },
146 | { title: "Amadeus", year: 1984 },
147 | { title: "To Kill a Mockingbird", year: 1962 },
148 | { title: "Toy Story 3", year: 2010 },
149 | { title: "Logan", year: 2017 },
150 | { title: "Full Metal Jacket", year: 1987 },
151 | { title: "Dangal", year: 2016 },
152 | { title: "The Sting", year: 1973 },
153 | { title: "2001: A Space Odyssey", year: 1968 },
154 | { title: "Singin' in the Rain", year: 1952 },
155 | { title: "Toy Story", year: 1995 },
156 | { title: "Bicycle Thieves", year: 1948 },
157 | { title: "The Kid", year: 1921 },
158 | { title: "Inglourious Basterds", year: 2009 },
159 | { title: "Snatch", year: 2000 },
160 | { title: "3 Idiots", year: 2009 },
161 | { title: "Monty Python and the Holy Grail", year: 1975 },
162 | ];
163 |
164 | export { MultipleValuesAutocomplete };
165 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/components/utilities/auto-complete/SizesAutocomplete.tsx:
--------------------------------------------------------------------------------
1 |
2 | 'use client'
3 |
4 | import React from "react";
5 |
6 | import { TextField } from "@mui/material";
7 |
8 | import Autocomplete from '@mui/material/Autocomplete';
9 |
10 | import BaseCard from "../../shared/BaseCard";
11 |
12 |
13 | const SizesAutocomplete = () => {
14 | return (
15 |
16 |
35 | );
36 | };
37 |
38 | // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
39 | const top100Films = [
40 | { label: "The Shawshank Redemption", year: 1994 },
41 | { label: "The Godfather", year: 1972 },
42 | { label: "The Godfather: Part II", year: 1974 },
43 | { label: "The Dark Knight", year: 2008 },
44 | { label: "12 Angry Men", year: 1957 },
45 | { label: "Schindler's List", year: 1993 },
46 | { label: "Pulp Fiction", year: 1994 },
47 | {
48 | label: "The Lord of the Rings: The Return of the King",
49 | year: 2003,
50 | },
51 | { label: "The Good, the Bad and the Ugly", year: 1966 },
52 | { label: "Fight Club", year: 1999 },
53 | {
54 | label: "The Lord of the Rings: The Fellowship of the Ring",
55 | year: 2001,
56 | },
57 | {
58 | label: "Star Wars: Episode V - The Empire Strikes Back",
59 | year: 1980,
60 | },
61 | { label: "Forrest Gump", year: 1994 },
62 | { label: "Inception", year: 2010 },
63 | {
64 | label: "The Lord of the Rings: The Two Towers",
65 | year: 2002,
66 | },
67 | { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
68 | { label: "Goodfellas", year: 1990 },
69 | { label: "The Matrix", year: 1999 },
70 | { label: "Seven Samurai", year: 1954 },
71 | {
72 | label: "Star Wars: Episode IV - A New Hope",
73 | year: 1977,
74 | },
75 | { label: "City of God", year: 2002 },
76 | { label: "Se7en", year: 1995 },
77 | { label: "The Silence of the Lambs", year: 1991 },
78 | { label: "It's a Wonderful Life", year: 1946 },
79 | { label: "Life Is Beautiful", year: 1997 },
80 | { label: "The Usual Suspects", year: 1995 },
81 | { label: "Léon: The Professional", year: 1994 },
82 | { label: "Spirited Away", year: 2001 },
83 | { label: "Saving Private Ryan", year: 1998 },
84 | { label: "Once Upon a Time in the West", year: 1968 },
85 | { label: "American History X", year: 1998 },
86 | { label: "Interstellar", year: 2014 },
87 | { label: "Casablanca", year: 1942 },
88 | { label: "City Lights", year: 1931 },
89 | { label: "Psycho", year: 1960 },
90 | { label: "The Green Mile", year: 1999 },
91 | { label: "The Intouchables", year: 2011 },
92 | { label: "Modern Times", year: 1936 },
93 | { label: "Raiders of the Lost Ark", year: 1981 },
94 | { label: "Rear Window", year: 1954 },
95 | { label: "The Pianist", year: 2002 },
96 | { label: "The Departed", year: 2006 },
97 | { label: "Terminator 2: Judgment Day", year: 1991 },
98 | { label: "Back to the Future", year: 1985 },
99 | { label: "Whiplash", year: 2014 },
100 | { label: "Gladiator", year: 2000 },
101 | { label: "Memento", year: 2000 },
102 | { label: "The Prestige", year: 2006 },
103 | { label: "The Lion King", year: 1994 },
104 | { label: "Apocalypse Now", year: 1979 },
105 | { label: "Alien", year: 1979 },
106 | { label: "Sunset Boulevard", year: 1950 },
107 | {
108 | label:
109 | "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb",
110 | year: 1964,
111 | },
112 | { label: "The Great Dictator", year: 1940 },
113 | { label: "Cinema Paradiso", year: 1988 },
114 | { label: "The Lives of Others", year: 2006 },
115 | { label: "Grave of the Fireflies", year: 1988 },
116 | { label: "Paths of Glory", year: 1957 },
117 | { label: "Django Unchained", year: 2012 },
118 | { label: "The Shining", year: 1980 },
119 | { label: "WALL·E", year: 2008 },
120 | { label: "American Beauty", year: 1999 },
121 | { label: "The Dark Knight Rises", year: 2012 },
122 | { label: "Princess Mononoke", year: 1997 },
123 | { label: "Aliens", year: 1986 },
124 | { label: "Oldboy", year: 2003 },
125 | { label: "Once Upon a Time in America", year: 1984 },
126 | { label: "Witness for the Prosecution", year: 1957 },
127 | { label: "Das Boot", year: 1981 },
128 | { label: "Citizen Kane", year: 1941 },
129 | { label: "North by Northwest", year: 1959 },
130 | { label: "Vertigo", year: 1958 },
131 | {
132 | label: "Star Wars: Episode VI - Return of the Jedi",
133 | year: 1983,
134 | },
135 | { label: "Reservoir Dogs", year: 1992 },
136 | { label: "Braveheart", year: 1995 },
137 | { label: "M", year: 1931 },
138 | { label: "Requiem for a Dream", year: 2000 },
139 | { label: "Amélie", year: 2001 },
140 | { label: "A Clockwork Orange", year: 1971 },
141 | { label: "Like Stars on Earth", year: 2007 },
142 | { label: "Taxi Driver", year: 1976 },
143 | { label: "Lawrence of Arabia", year: 1962 },
144 | { label: "Double Indemnity", year: 1944 },
145 | {
146 | label: "Eternal Sunshine of the Spotless Mind",
147 | year: 2004,
148 | },
149 | { label: "Amadeus", year: 1984 },
150 | { label: "To Kill a Mockingbird", year: 1962 },
151 | { label: "Toy Story 3", year: 2010 },
152 | { label: "Logan", year: 2017 },
153 | { label: "Full Metal Jacket", year: 1987 },
154 | { label: "Dangal", year: 2016 },
155 | { label: "The Sting", year: 1973 },
156 | { label: "2001: A Space Odyssey", year: 1968 },
157 | { label: "Singin' in the Rain", year: 1952 },
158 | { label: "Toy Story", year: 1995 },
159 | { label: "Bicycle Thieves", year: 1948 },
160 | { label: "The Kid", year: 1921 },
161 | { label: "Inglourious Basterds", year: 2009 },
162 | { label: "Snatch", year: 2000 },
163 | { label: "3 Idiots", year: 2009 },
164 | { label: "Monty Python and the Holy Grail", year: 1975 },
165 | ];
166 |
167 | export { SizesAutocomplete };
168 |
--------------------------------------------------------------------------------
/package/src/app/(DashboardLayout)/layout/header/Topbar.tsx:
--------------------------------------------------------------------------------
1 | import { Box, AppBar, Toolbar, styled, Stack, Button } from "@mui/material";
2 |
3 | import { IconLifebuoy, IconGift, IconBriefcase } from "@tabler/icons-react";
4 | import { Typography } from "@mui/material";
5 | import Link from "next/link";
6 | import { Icon } from "@iconify/react";
7 | import LivePreviewDropdown from "./LivePreviewDropdown";
8 |
9 | const Topbar = () => {
10 | const AppBarStyled = styled(AppBar)(({ theme }) => ({
11 | boxShadow: "none",
12 | background: "linear-gradient(90deg,#0f0533 0,#1b0a5c 100%)",
13 | justifyContent: "center",
14 | [theme.breakpoints.up("lg")]: {
15 | minHeight: "72px",
16 | },
17 | zIndex: 9,
18 | }));
19 | const ToolbarStyled = styled(Toolbar)(({ theme }) => ({
20 | width: "100%",
21 | color: theme.palette.text.secondary,
22 | }));
23 |
24 | const GhostButton = styled(Button)(({ theme }) => ({
25 | color: theme.palette.primary.contrastText,
26 | backgroundColor: "#ffffff00",
27 | boxShadow: "none",
28 | borderRadius: "7px",
29 | fontWeight: 400,
30 | "&:hover": {
31 | backgroundColor: theme.palette.primary.main,
32 | },
33 | "& .MuiButton-startIcon": {
34 | marginRight: "4px",
35 | },
36 | }));
37 |
38 | return (
39 |
40 |
41 |
50 |
58 |
59 |
65 |
69 |
70 |
71 |
72 |
73 |
79 |
83 |
84 |
85 |
86 |
87 |
93 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
110 | theme.palette.primary.contrastText }}
113 | >
114 | Checkout Pro Version
115 |
116 | {/*
125 |
132 |
135 |
138 |
139 |
140 |
141 |
144 |
145 |
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default Topbar;
153 |
--------------------------------------------------------------------------------
/package/public/images/logos/logo-wrappixel.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
12 |
13 |
--------------------------------------------------------------------------------
/package/src/utils/theme/DefaultColors.tsx:
--------------------------------------------------------------------------------
1 | import { createTheme } from "@mui/material/styles";
2 |
3 | import { Poppins } from "next/font/google";
4 | import theme from "../theme";
5 |
6 |
7 | export const poppins = Poppins({
8 | weight: ["300", "400", "500", "600", "700"],
9 | subsets: ["latin"],
10 | display: "swap",
11 | fallback: ["Helvetica", "Arial", "sans-serif"],
12 | });
13 |
14 | const baselightTheme = createTheme({
15 | direction: "ltr",
16 | palette: {
17 | primary: {
18 | main: '#1B84FF',
19 | light: '#EDF5FD',
20 | dark: '#1B84FF',
21 | contrastText: "#ffffff"
22 | },
23 | secondary: {
24 | main: '#43CED7',
25 | light: '#F2FCFC',
26 | dark: '#43CED7',
27 | },
28 | success: {
29 | main: '#2cd07e',
30 | light: '#EDFDF2',
31 | dark: '#2cd07e',
32 | contrastText: '#ffffff',
33 | },
34 | info: {
35 | main: '#725AF2',
36 | light: '#e9e5ff',
37 | dark: '#725AF2',
38 | contrastText: '#ffffff',
39 | },
40 | error: {
41 | main: '#F8285A',
42 | light: '#FFF0F4',
43 | dark: '#F8285A',
44 | contrastText: '#ffffff',
45 | },
46 | warning: {
47 | main: '#F6C000',
48 | light: '#FFFCF0',
49 | dark: '#F6C000',
50 | contrastText: '#ffffff',
51 | },
52 | grey: {
53 | 100: '#f2f4f8',
54 | 200: '#e9ecef',
55 | 300: '#dee2e6',
56 | 400: '#ced4da',
57 | 500: '#768B9E',
58 | 600: '#2a3547',
59 | },
60 | text: {
61 | primary: '#3A4752',
62 | secondary: '#768B9E',
63 | },
64 | action: {
65 | disabledBackground: 'rgba(73,82,88,0.12)',
66 | hoverOpacity: 0.02,
67 | hover: '#EDF5FD',
68 | },
69 |
70 | divider: '#ebf1f6',
71 | background: {
72 | default: '#EEF5F9',
73 | paper: '#ffffff',
74 | },
75 | },
76 | shape: {
77 | borderRadius: 10,
78 | },
79 | typography: {
80 | fontFamily: poppins.style.fontFamily,
81 | h1: {
82 | fontWeight: 500,
83 | fontSize: '2.25rem',
84 | lineHeight: '2.75rem',
85 | },
86 | h2: {
87 | fontWeight: 500,
88 | fontSize: '1.875rem',
89 | lineHeight: '2.25rem',
90 | },
91 | h3: {
92 | fontWeight: 500,
93 | fontSize: '1.5rem',
94 | lineHeight: '1.75rem',
95 | },
96 | h4: {
97 | fontWeight: 500,
98 | fontSize: '1.3125rem',
99 | lineHeight: '1.6rem',
100 | },
101 | h5: {
102 | fontWeight: 500,
103 | fontSize: '1.125rem',
104 | lineHeight: '1.6rem',
105 | },
106 | h6: {
107 | fontWeight: 500,
108 | fontSize: '1rem',
109 | lineHeight: '1.2rem',
110 | },
111 | button: {
112 | textTransform: 'capitalize',
113 | fontWeight: 400,
114 | },
115 | body1: {
116 | fontSize: '0.875rem',
117 | fontWeight: 400,
118 | lineHeight: '1.334rem',
119 | },
120 | body2: {
121 | fontSize: '0.75rem',
122 | letterSpacing: '0rem',
123 | fontWeight: 400,
124 | lineHeight: '1rem',
125 | },
126 | subtitle1: {
127 | fontSize: '0.875rem',
128 | fontWeight: 400,
129 | },
130 | subtitle2: {
131 | fontSize: '0.875rem',
132 | fontWeight: 400,
133 | },
134 | },
135 | components: {
136 | MuiCssBaseline: {
137 | styleOverrides: {
138 | ".MuiPaper-elevation9, .MuiPopover-root .MuiPaper-elevation": {
139 | boxShadow:
140 | "rgba(145 158 171 / 30%) 0px 0px 2px 0px, rgba(145 158 171 / 12%) 0px 12px 24px -4px !important",
141 | },
142 | a: {
143 | color: '#3A4752',
144 | textDecoration: "none",
145 | },
146 | ".MuiTimelineConnector-root": {
147 | width: "1px !important",
148 | backgroundColor: theme.palette.divider,
149 | },
150 | ".simplebar-scrollbar:before": {
151 | background: " #DFE5EF!important",
152 | },
153 | ".rounded-bars .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path":
154 | {
155 | clipPath: "inset(0 0 5% 0 round 20px)",
156 | },
157 | '.MuiBox-root': {
158 | borderRadius: theme.shape.borderRadius,
159 | },
160 | '.MuiTypography-root, .MuiListSubheader-root, .MuiChip-label': {
161 | fontFamily: '"poppins", sans !important'
162 | },
163 |
164 | },
165 | },
166 |
167 | MuiButtonGroup: {
168 | styleOverrides: {
169 | root: {
170 | boxShadow: "none",
171 | },
172 | },
173 | },
174 | MuiButton: {
175 | styleOverrides: {
176 | root: {
177 | textTransform: 'none',
178 | boxShadow: 'none',
179 | borderRadius: 30,
180 | },
181 | },
182 | },
183 | MuiFab: {
184 | styleOverrides: {
185 | root: {
186 | boxShadow: "none",
187 | },
188 | },
189 | },
190 | MuiCardHeader: {
191 | styleOverrides: {
192 | root: {
193 | padding: "16px 24px",
194 | },
195 | title: {
196 | fontSize: "1.125rem",
197 | },
198 | },
199 | },
200 | MuiCard: {
201 | styleOverrides: {
202 | root: {
203 | borderRadius: "7px",
204 | padding: "0",
205 | boxShadow: "0px 3px 4px 0px rgba(0, 0, 0, 0.03),0px 0px 1px 0px rgba(0, 0, 0, 0.1)",
206 | },
207 | },
208 | },
209 | MuiCardContent: {
210 | styleOverrides: {
211 | root: {
212 | padding: "30px",
213 | },
214 | },
215 | },
216 | MuiTableCell: {
217 | styleOverrides: {
218 | root: {
219 | borderBottom: `1px solid #e5eaef`,
220 |
221 | },
222 | },
223 | },
224 | MuiTableRow: {
225 | styleOverrides: {
226 | root: {
227 | "&:last-child td": {
228 | borderBottom: 0,
229 | },
230 | },
231 | },
232 | },
233 | MuiLinearProgress: {
234 | styleOverrides: {
235 | root: {
236 | backgroundColor: theme.palette.grey[200],
237 | borderRadius: "6px",
238 | },
239 | },
240 | },
241 | MuiChip: {
242 | styleOverrides: {
243 | root: {
244 | fontWeight: 400,
245 | fontSize: '0.75rem',
246 | height: '26px',
247 | },
248 | sizeSmall: {
249 | fontSize: '0.65rem',
250 | },
251 | },
252 | },
253 | MuiDivider: {
254 | styleOverrides: {
255 | root: {
256 | borderColor: theme.palette.divider,
257 | },
258 | },
259 | },
260 |
261 | MuiOutlinedInput: {
262 | styleOverrides: {
263 | root: {
264 | '& .MuiOutlinedInput-notchedOutline': {
265 | borderColor: '#e5eaef !important',
266 | },
267 | borderRadius: "7px",
268 | '&.Mui-focused .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline': {
269 | borderColor: '#1B84FF !important'
270 | },
271 | },
272 | input: {
273 | padding: "12px 14px",
274 | },
275 | inputSizeSmall: {
276 | padding: "8px 14px",
277 | },
278 | },
279 | },
280 |
281 | MuiAlert: {
282 | styleOverrides: {
283 | filledSuccess: {
284 | color: "white",
285 | },
286 | filledInfo: {
287 | color: "white",
288 | },
289 | filledError: {
290 | color: "white",
291 | },
292 | filledWarning: {
293 | color: "white",
294 | },
295 | standardSuccess: {
296 | backgroundColor: theme.palette.success.light,
297 | color: theme.palette.success.main,
298 | },
299 | standardError: {
300 | backgroundColor: theme.palette.error.light,
301 | color: theme.palette.error.main,
302 | },
303 | standardWarning: {
304 | backgroundColor: theme.palette.warning.light,
305 | color: theme.palette.warning.main,
306 | },
307 | standardInfo: {
308 | backgroundColor: theme.palette.info.light,
309 | color: theme.palette.info.main,
310 | },
311 | outlinedSuccess: {
312 | borderColor: theme.palette.success.main,
313 | color: theme.palette.success.main,
314 | },
315 | outlinedWarning: {
316 | borderColor: theme.palette.warning.main,
317 | color: theme.palette.warning.main,
318 | },
319 | outlinedError: {
320 | borderColor: theme.palette.error.main,
321 | color: theme.palette.error.main,
322 | },
323 | outlinedInfo: {
324 | borderColor: theme.palette.info.main,
325 | color: theme.palette.info.main,
326 | }
327 | },
328 | },
329 |
330 | },
331 |
332 | });
333 |
334 | export { baselightTheme };
335 |
--------------------------------------------------------------------------------
23 | 
93 | 
8 |
9 |
10 |
11 | # Compare with Premium Version 🌓
12 |
13 | 
150 |
151 | 
177 |
178 | 
182 |
183 | 
187 |
188 | 
52 |
53 |