├── src
├── assets
│ ├── css
│ │ ├── Contact.css
│ │ ├── App.css
│ │ └── MiniCalendar.css
│ ├── img
│ │ ├── auth
│ │ │ └── auth.png
│ │ ├── nfts
│ │ │ ├── Nft1.png
│ │ │ ├── Nft2.png
│ │ │ ├── Nft3.png
│ │ │ ├── Nft4.png
│ │ │ ├── Nft5.png
│ │ │ ├── Nft6.png
│ │ │ └── NftBanner1.png
│ │ ├── layout
│ │ │ ├── Navbar.png
│ │ │ └── logoWhite.png
│ │ ├── avatars
│ │ │ ├── avatar1.png
│ │ │ ├── avatar10.png
│ │ │ ├── avatar11.png
│ │ │ ├── avatar2.png
│ │ │ ├── avatar3.png
│ │ │ ├── avatar4.png
│ │ │ ├── avatar5.png
│ │ │ ├── avatar6.png
│ │ │ ├── avatar7.png
│ │ │ ├── avatar8.png
│ │ │ ├── avatar9.png
│ │ │ └── avatarSimmmple.png
│ │ ├── dashboards
│ │ │ ├── Debit.png
│ │ │ ├── usa.png
│ │ │ ├── balanceImg.png
│ │ │ ├── fakeGraph.png
│ │ │ ├── starbucks.jpg
│ │ │ └── elipse-light.png
│ │ └── profile
│ │ │ ├── banner.png
│ │ │ ├── image1.png
│ │ │ ├── image2.png
│ │ │ └── image3.png
│ └── svg
│ │ └── checked.svg
├── components
│ ├── icons
│ │ ├── CloseIcon.jsx
│ │ ├── SearchIcon.jsx
│ │ ├── ProfileIcon.jsx
│ │ ├── ClockIcon.jsx
│ │ ├── DotIcon.jsx
│ │ ├── SignIn.jsx
│ │ ├── DashIcon.jsx
│ │ ├── MarketIcon.jsx
│ │ ├── KanbanIcon.jsx
│ │ ├── DarkmodeIcon.jsx
│ │ ├── NotificationIcon.jsx
│ │ ├── ClockIcon1.jsx
│ │ ├── ThemsIcon.jsx
│ │ ├── TablesIcon.jsx
│ │ ├── WidgetIcon
│ │ │ ├── ChartIcon.jsx
│ │ │ ├── PDFIcon.jsx
│ │ │ └── DollarIcon.jsx
│ │ └── VideoIcon.jsx
│ ├── charts
│ │ ├── PieChart.jsx
│ │ ├── LineChart.jsx
│ │ └── BarChart.jsx
│ ├── card
│ │ ├── index.jsx
│ │ ├── CardMenu.jsx
│ │ └── NftCard.jsx
│ ├── tooltip
│ │ └── index.jsx
│ ├── popover
│ │ └── index.jsx
│ ├── fields
│ │ ├── SwitchField.jsx
│ │ ├── InputField.jsx
│ │ └── TextField.jsx
│ ├── calendar
│ │ └── MiniCalendar.jsx
│ ├── widget
│ │ └── Widget.jsx
│ ├── fixedPlugin
│ │ └── FixedPlugin.jsx
│ ├── dropdown
│ │ └── index.jsx
│ ├── sidebar
│ │ ├── RTL.jsx
│ │ ├── index.jsx
│ │ ├── components
│ │ │ ├── Links.jsx
│ │ │ └── SidebarCard.jsx
│ │ └── componentsrtl
│ │ │ ├── Links.jsx
│ │ │ └── SidebarCard.jsx
│ ├── progress
│ │ └── index.jsx
│ ├── footer
│ │ ├── Footer.jsx
│ │ └── FooterAuthDefault.jsx
│ ├── switch
│ │ └── index.jsx
│ ├── checkbox
│ │ └── index.jsx
│ └── radio
│ │ └── index.jsx
├── views
│ ├── admin
│ │ ├── marketplace
│ │ │ ├── variables
│ │ │ │ ├── tableColumnsTopCreators.js
│ │ │ │ └── tableDataTopCreators.json
│ │ │ ├── components
│ │ │ │ ├── Banner.jsx
│ │ │ │ ├── HistoryCard.jsx
│ │ │ │ └── TableTopCreators.jsx
│ │ │ └── index.jsx
│ │ ├── default
│ │ │ ├── variables
│ │ │ │ ├── tableDataComplex.json
│ │ │ │ ├── tableDataCheck.json
│ │ │ │ └── columnsData.js
│ │ │ ├── components
│ │ │ │ ├── WeeklyRevenue.jsx
│ │ │ │ ├── DailyTraffic.jsx
│ │ │ │ ├── TotalSpent.jsx
│ │ │ │ ├── PieChartCard.jsx
│ │ │ │ ├── TaskCard.jsx
│ │ │ │ ├── CheckTable.jsx
│ │ │ │ └── ComplexTable.jsx
│ │ │ └── index.jsx
│ │ ├── tables
│ │ │ ├── variables
│ │ │ │ ├── tableDataComplex.json
│ │ │ │ ├── tableDataColumns.json
│ │ │ │ ├── columnsData.js
│ │ │ │ ├── tableDataCheck.json
│ │ │ │ └── tableDataDevelopment.json
│ │ │ ├── index.jsx
│ │ │ └── components
│ │ │ │ ├── ColumnsTable.jsx
│ │ │ │ ├── CheckTable.jsx
│ │ │ │ ├── ComplexTable.jsx
│ │ │ │ └── DevelopmentTable.jsx
│ │ └── profile
│ │ │ ├── index.jsx
│ │ │ └── components
│ │ │ ├── Storage.jsx
│ │ │ ├── Upload.jsx
│ │ │ ├── Banner.jsx
│ │ │ ├── General.jsx
│ │ │ ├── Notification.jsx
│ │ │ └── Project.jsx
│ ├── rtl
│ │ └── default
│ │ │ ├── variables
│ │ │ ├── tableDataComplex.json
│ │ │ ├── tableDataCheck.json
│ │ │ └── columnsData.js
│ │ │ ├── components
│ │ │ ├── Widget.jsx
│ │ │ ├── WeeklyRevenue.jsx
│ │ │ ├── DailyTraffic.jsx
│ │ │ ├── TotalSpent.jsx
│ │ │ ├── PieChartCard.jsx
│ │ │ ├── TaskCard.jsx
│ │ │ ├── CheckTable.jsx
│ │ │ └── ComplexTable.jsx
│ │ │ └── index.jsx
│ └── auth
│ │ └── SignIn.jsx
├── index.js
├── App.jsx
├── index.css
├── routes.js
└── layouts
│ ├── rtl
│ └── index.jsx
│ ├── admin
│ └── index.jsx
│ └── auth
│ └── index.jsx
├── public
├── robots.txt
├── favicon.ico
├── manifest.json
└── index.html
├── postcss.config.js
├── jsconfig.json
├── prettier.config.js
├── CHANGELOG.md
├── .gitignore
├── LICENSE.md
├── package.json
└── README.md
/src/assets/css/Contact.css:
--------------------------------------------------------------------------------
1 | form {
2 | width: 100%;
3 | }
4 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/src/assets/img/auth/auth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/auth/auth.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft1.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft2.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft3.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft4.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft5.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/Nft6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/Nft6.png
--------------------------------------------------------------------------------
/src/assets/img/layout/Navbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/layout/Navbar.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar1.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar10.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar11.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar2.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar3.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar4.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar5.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar6.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar7.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar8.png
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatar9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatar9.png
--------------------------------------------------------------------------------
/src/assets/img/dashboards/Debit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/Debit.png
--------------------------------------------------------------------------------
/src/assets/img/dashboards/usa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/usa.png
--------------------------------------------------------------------------------
/src/assets/img/layout/logoWhite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/layout/logoWhite.png
--------------------------------------------------------------------------------
/src/assets/img/nfts/NftBanner1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/nfts/NftBanner1.png
--------------------------------------------------------------------------------
/src/assets/img/profile/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/profile/banner.png
--------------------------------------------------------------------------------
/src/assets/img/profile/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/profile/image1.png
--------------------------------------------------------------------------------
/src/assets/img/profile/image2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/profile/image2.png
--------------------------------------------------------------------------------
/src/assets/img/profile/image3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/profile/image3.png
--------------------------------------------------------------------------------
/src/components/icons/CloseIcon.jsx:
--------------------------------------------------------------------------------
1 | const CloseIcon = () => {
2 | return hello
;
3 | };
4 |
5 | export default CloseIcon;
6 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "src",
4 | "paths": {
5 | "*": ["src/*"]
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/assets/img/dashboards/balanceImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/balanceImg.png
--------------------------------------------------------------------------------
/src/assets/img/dashboards/fakeGraph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/fakeGraph.png
--------------------------------------------------------------------------------
/src/assets/img/dashboards/starbucks.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/starbucks.jpg
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | // prettier.config.js or .prettierrc.js
2 | module.exports = {
3 | plugins: [require("prettier-plugin-tailwindcss")],
4 | };
5 |
--------------------------------------------------------------------------------
/src/assets/img/avatars/avatarSimmmple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/avatars/avatarSimmmple.png
--------------------------------------------------------------------------------
/src/assets/img/dashboards/elipse-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gruvector/horizon-tailwind-react/HEAD/src/assets/img/dashboards/elipse-light.png
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## [1.0.1] 2022-03-07
2 |
3 | 🐛 Bugs solved:
4 |
5 | - Bug with charts being uneven fixed
6 |
7 | ## [1.0.0] 2023-02-27
8 |
9 | ### Original Release
10 |
11 | - Added Tailwind CSS as base framework
12 |
--------------------------------------------------------------------------------
/src/assets/css/App.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
2 | body {
3 | font-family: "DM Sans", sans-serif;
4 | }
5 |
6 | option {
7 | color: black;
8 | }
9 |
--------------------------------------------------------------------------------
/src/assets/svg/checked.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/views/admin/marketplace/variables/tableColumnsTopCreators.js:
--------------------------------------------------------------------------------
1 | export const tableColumnsTopCreators = [
2 | {
3 | Header: "Name",
4 | accessor: "name",
5 | },
6 | {
7 | Header: "Artworks",
8 | accessor: "artworks",
9 | },
10 | {
11 | Header: "Rating",
12 | accessor: "rating",
13 | },
14 | ];
15 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ReactDOM from "react-dom/client";
2 | import { BrowserRouter } from "react-router-dom";
3 | import "./index.css";
4 |
5 | import App from "./App";
6 |
7 | const root = ReactDOM.createRoot(document.getElementById("root"));
8 |
9 | root.render(
10 |
11 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/components/charts/PieChart.jsx:
--------------------------------------------------------------------------------
1 | import Chart from "react-apexcharts";
2 |
3 | const PieChart = (props) => {
4 | const { series, options } = props;
5 |
6 | return (
7 |
8 | {children}
9 |
10 | );
11 | }
12 |
13 | export default Card;
14 |
--------------------------------------------------------------------------------
/src/components/tooltip/index.jsx:
--------------------------------------------------------------------------------
1 | import { Tooltip } from "@chakra-ui/tooltip";
2 | const TooltipHorizon = (props) => {
3 | const { extra, trigger, content, placement } = props;
4 | return (
5 |
10 | {trigger}
11 |
12 | );
13 | };
14 |
15 | export default TooltipHorizon;
16 |
--------------------------------------------------------------------------------
/src/components/icons/SearchIcon.jsx:
--------------------------------------------------------------------------------
1 | const SearchIcon = () => {
2 | return (
3 |
10 |
17 | );
18 | };
19 |
20 | export default SearchIcon;
21 |
--------------------------------------------------------------------------------
/src/components/icons/ProfileIcon.jsx:
--------------------------------------------------------------------------------
1 | const ProfileIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default ProfileIcon;
19 |
--------------------------------------------------------------------------------
/src/components/popover/index.jsx:
--------------------------------------------------------------------------------
1 | import { Popover, PopoverTrigger, PopoverContent } from "@chakra-ui/popover";
2 | const PopoverHorizon = (props) => {
3 | const { extra, trigger, content } = props;
4 | return (
5 |
6 | {trigger}
7 |
10 | {content}
11 |
12 |
13 | );
14 | };
15 |
16 | export default PopoverHorizon;
17 |
--------------------------------------------------------------------------------
/src/components/icons/ClockIcon.jsx:
--------------------------------------------------------------------------------
1 | const ClockIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default ClockIcon;
19 |
--------------------------------------------------------------------------------
/src/components/icons/DotIcon.jsx:
--------------------------------------------------------------------------------
1 | const DotIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default DotIcon;
19 |
--------------------------------------------------------------------------------
/src/views/admin/default/variables/tableDataComplex.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Marketplace",
4 | "status": "Approved",
5 | "date": "24.Jan.2021",
6 | "progress": 30
7 | },
8 | {
9 | "name": "Marketplace",
10 | "status": "Disable",
11 | "date": "30.Dec.2021",
12 | "progress": 30
13 | },
14 | {
15 | "name": "Marketplace",
16 | "status": "Error",
17 | "date": "20.May.2021",
18 | "progress": 30
19 | },
20 | {
21 | "name": "Marketplace",
22 | "status": "Approved",
23 | "date": "12.Jul.2021",
24 | "progress": 30
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/src/views/admin/tables/variables/tableDataComplex.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Marketplace",
4 | "status": "Approved",
5 | "date": "24.Jan.2021",
6 | "progress": 30
7 | },
8 | {
9 | "name": "Marketplace",
10 | "status": "Disable",
11 | "date": "30.Dec.2021",
12 | "progress": 30
13 | },
14 | {
15 | "name": "Marketplace",
16 | "status": "Error",
17 | "date": "20.May.2021",
18 | "progress": 30
19 | },
20 | {
21 | "name": "Marketplace",
22 | "status": "Approved",
23 | "date": "12.Jul.2021",
24 | "progress": 30
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/src/views/rtl/default/variables/tableDataComplex.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Marketplace",
4 | "status": "Approved",
5 | "date": "24.Jan.2021",
6 | "progress": 30
7 | },
8 | {
9 | "name": "Marketplace",
10 | "status": "Disable",
11 | "date": "30.Dec.2021",
12 | "progress": 30
13 | },
14 | {
15 | "name": "Marketplace",
16 | "status": "Error",
17 | "date": "20.May.2021",
18 | "progress": 30
19 | },
20 | {
21 | "name": "Marketplace",
22 | "status": "Approved",
23 | "date": "12.Jul.2021",
24 | "progress": 30
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Routes, Route, Navigate } from "react-router-dom";
3 |
4 | import RtlLayout from "layouts/rtl";
5 | import AdminLayout from "layouts/admin";
6 | import AuthLayout from "layouts/auth";
7 | const App = () => {
8 | return (
9 |
10 |
15 | );
16 | };
17 |
18 | export default App;
19 |
--------------------------------------------------------------------------------
/src/components/icons/SignIn.jsx:
--------------------------------------------------------------------------------
1 | const SignIn = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default SignIn;
19 |
--------------------------------------------------------------------------------
/src/views/admin/tables/variables/tableDataColumns.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Marketplace",
4 | "quantity": 2458,
5 | "date": "12.Jan.2021",
6 | "progress": 75.5
7 | },
8 | {
9 | "name": "Venus DB PRO",
10 | "quantity": 1485,
11 | "date": "21.Feb.2021",
12 | "progress": 35.4
13 | },
14 | {
15 | "name": "Venus DS",
16 | "quantity": 1024,
17 | "date": "13.Mar.2021",
18 | "progress": 25
19 | },
20 | {
21 | "name": "Venus 3D Asset",
22 | "quantity": 858,
23 | "date": "24.Jan.2021",
24 | "progress": 100
25 | },
26 | {
27 | "name": "Marketplace",
28 | "quantity": 258,
29 | "date": "Oct 24, 2022",
30 | "progress": 75
31 | }
32 | ]
33 |
--------------------------------------------------------------------------------
/src/components/fields/SwitchField.jsx:
--------------------------------------------------------------------------------
1 | import Switch from "components/switch";
2 |
3 | const SwitchField = (props) => {
4 | const { id, label, desc, mt, mb } = props;
5 | return (
6 |
7 |
11 |
12 | {label}
13 |
14 | {desc}
15 |
16 |
17 |
19 |
10 |
15 | );
16 | };
17 |
18 | export default DashIcon;
19 |
--------------------------------------------------------------------------------
/src/views/rtl/default/variables/tableDataCheck.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": ["Marketplace", false],
4 | "quantity": 2458,
5 | "date": "Apr 26, 2022",
6 | "progress": 75.5
7 | },
8 | {
9 | "name": ["Venus DB PRO", true],
10 | "quantity": 1485,
11 | "date": "Jul 20, 2022",
12 | "progress": 35.4
13 | },
14 | {
15 | "name": ["Venus DS", true],
16 | "quantity": 1024,
17 | "date": "Sep 30, 2022",
18 | "progress": 25
19 | },
20 | {
21 | "name": ["Venus 3D Asset", true],
22 | "quantity": 858,
23 | "date": "Oct 24, 2022",
24 | "progress": 100
25 | },
26 | {
27 | "name": ["Marketplace", false],
28 | "quantity": 258,
29 | "date": "Nov 29, 2022",
30 | "progress": 75.5
31 | }
32 | ]
33 |
--------------------------------------------------------------------------------
/src/views/admin/default/variables/tableDataCheck.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": ["Marketplace", false],
4 | "quantity": 2458,
5 | "date": "Apr 26, 2022",
6 | "progress": 75.5
7 | },
8 | {
9 | "name": ["Venus DB PRO", true],
10 | "quantity": 1485,
11 | "date": "Jul 20, 2022",
12 | "progress": 35.4
13 | },
14 | {
15 | "name": ["Venus DS", true],
16 | "quantity": 1024,
17 | "date": "Sep 30, 2022",
18 | "progress": 25
19 | },
20 | {
21 | "name": ["Venus 3D Asset", true],
22 | "quantity": 858,
23 | "date": "Oct 24, 2022",
24 | "progress": 100
25 | },
26 | {
27 | "name": ["Marketplace", false],
28 | "quantity": 258,
29 | "date": "Nov 29, 2022",
30 | "progress": 75.5
31 | }
32 | ]
33 |
--------------------------------------------------------------------------------
/src/components/icons/MarketIcon.jsx:
--------------------------------------------------------------------------------
1 | const MarketIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default MarketIcon;
19 |
--------------------------------------------------------------------------------
/src/components/charts/BarChart.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Chart from 'react-apexcharts';
3 |
4 | class BarChart extends Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {
8 | chartData: [],
9 | chartOptions: {},
10 | };
11 | }
12 |
13 | componentDidMount() {
14 | this.setState({
15 | chartData: this.props.chartData,
16 | chartOptions: this.props.chartOptions,
17 | });
18 | }
19 |
20 | render() {
21 | return (
22 |
10 |
15 | );
16 | };
17 |
18 | export default KanbanIcon;
19 |
--------------------------------------------------------------------------------
/src/components/icons/DarkmodeIcon.jsx:
--------------------------------------------------------------------------------
1 | const DarkmodeIcon = () => {
2 | return (
3 |
4 |
11 |
16 |
17 | );
18 | };
19 |
20 | export default DarkmodeIcon;
21 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
2 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | @layer base {
8 | html {
9 | font-family: 'DM Sans', sans-serif !important;
10 | font-feature-settings: 'kern' !important;
11 | -webkit-font-smoothing: antialiased;
12 | letter-spacing: -0.5px;
13 | }
14 | }
15 |
16 | input.defaultCheckbox::before {
17 | content: url(../src/assets/svg/checked.svg);
18 | color: white;
19 | opacity: 0;
20 | height: 16px;
21 | width: 16px;
22 | position: absolute;
23 | left: 50%;
24 | transform: translate(-50%, 0px);
25 | }
26 |
27 | input:checked.defaultCheckbox::before {
28 | opacity: 1;
29 | }
--------------------------------------------------------------------------------
/src/components/calendar/MiniCalendar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Calendar from "react-calendar";
3 | import Card from "components/card";
4 | import "react-calendar/dist/Calendar.css";
5 | import { MdChevronLeft, MdChevronRight } from "react-icons/md";
6 | import "assets/css/MiniCalendar.css";
7 |
8 | const MiniCalendar = () => {
9 | const [value, onChange] = useState(new Date());
10 |
11 | return (
12 |
13 |
14 |
22 |
23 | );
24 | };
25 |
26 | export default MiniCalendar;
27 |
--------------------------------------------------------------------------------
/src/components/widget/Widget.jsx:
--------------------------------------------------------------------------------
1 | import Card from "components/card";
2 |
3 | const Widget = ({ icon, title, subtitle }) => {
4 | return (
5 |
6 |
7 |
8 |
9 | {icon}
10 |
11 |
12 |
15 |
{title}
16 |
17 | {subtitle}
18 |
19 |
21 | );
22 | };
23 |
24 | export default Widget;
25 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/Widget.jsx:
--------------------------------------------------------------------------------
1 | import Card from "components/card";
2 |
3 | const Widget = ({ icon, title, subtitle }) => {
4 | return (
5 |
6 |
7 |
8 |
9 | {icon}
10 |
11 |
12 |
15 |
{title}
16 |
17 | {subtitle}
18 |
19 |
21 | );
22 | };
23 |
24 | export default Widget;
25 |
--------------------------------------------------------------------------------
/src/components/icons/NotificationIcon.jsx:
--------------------------------------------------------------------------------
1 | const NotificationIcon = () => {
2 | return (
3 |
4 |
11 |
16 |
17 | );
18 | };
19 |
20 | export default NotificationIcon;
21 |
--------------------------------------------------------------------------------
/src/components/icons/ClockIcon1.jsx:
--------------------------------------------------------------------------------
1 | const ClockIcon1 = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default ClockIcon1;
19 |
--------------------------------------------------------------------------------
/src/components/icons/ThemsIcon.jsx:
--------------------------------------------------------------------------------
1 | const ThemsIcon = () => {
2 | return (
3 |
4 |
11 |
12 |
17 |
18 |
19 |
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | export default ThemsIcon;
28 |
--------------------------------------------------------------------------------
/src/components/icons/TablesIcon.jsx:
--------------------------------------------------------------------------------
1 | const TablesIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default TablesIcon;
19 |
--------------------------------------------------------------------------------
/src/components/icons/WidgetIcon/ChartIcon.jsx:
--------------------------------------------------------------------------------
1 | const ChartIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default ChartIcon;
19 |
--------------------------------------------------------------------------------
/src/components/icons/WidgetIcon/PDFIcon.jsx:
--------------------------------------------------------------------------------
1 | const PDFIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default PDFIcon;
19 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Horizon UI
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 |
--------------------------------------------------------------------------------
/src/components/icons/VideoIcon.jsx:
--------------------------------------------------------------------------------
1 | const VideoIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default VideoIcon;
19 |
--------------------------------------------------------------------------------
/src/components/fixedPlugin/FixedPlugin.jsx:
--------------------------------------------------------------------------------
1 | // Chakra Imports
2 | // Custom Icons
3 | import React from "react";
4 |
5 | import { RiMoonFill, RiSunFill } from "react-icons/ri";
6 | export default function FixedPlugin(props) {
7 | const { ...rest } = props;
8 | const [darkmode, setDarkmode] = React.useState(
9 | document.body.classList.contains("dark")
10 | );
11 |
12 | return (
13 | {
16 | if (darkmode) {
17 | document.body.classList.remove("dark");
18 | setDarkmode(false);
19 | } else {
20 | document.body.classList.add("dark");
21 | setDarkmode(true);
22 | }
23 | }}
24 | {...rest}
25 | >
26 | {/* // left={document.documentElement.dir === "rtl" ? "35px" : ""}
27 | // right={document.documentElement.dir === "rtl" ? "" : "35px"} */}
28 |
29 | {darkmode ? (
30 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/views/admin/default/components/WeeklyRevenue.jsx:
--------------------------------------------------------------------------------
1 | import Card from "components/card";
2 | import BarChart from "components/charts/BarChart";
3 | import {
4 | barChartDataWeeklyRevenue,
5 | barChartOptionsWeeklyRevenue,
6 | } from "variables/charts";
7 | import { MdBarChart } from "react-icons/md";
8 |
9 | const WeeklyRevenue = () => {
10 | return (
11 |
12 |
13 |
14 | Weekly Revenue
15 |
16 |
17 |
19 |
20 |
21 |
29 |
30 | );
31 | };
32 |
33 | export default WeeklyRevenue;
34 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/WeeklyRevenue.jsx:
--------------------------------------------------------------------------------
1 | import Card from "components/card";
2 | import BarChart from "components/charts/BarChart";
3 | import {
4 | barChartDataWeeklyRevenue,
5 | barChartOptionsWeeklyRevenue,
6 | } from "variables/charts";
7 | import { MdBarChart } from "react-icons/md";
8 |
9 | const WeeklyRevenue = () => {
10 | return (
11 |
12 |
13 |
14 | Weekly Revenue
15 |
16 |
17 |
19 |
20 |
21 |
29 |
30 | );
31 | };
32 |
33 | export default WeeklyRevenue;
34 |
--------------------------------------------------------------------------------
/src/components/icons/WidgetIcon/DollarIcon.jsx:
--------------------------------------------------------------------------------
1 | const DollarIcon = () => {
2 | return (
3 |
10 |
15 | );
16 | };
17 |
18 | export default DollarIcon;
19 |
--------------------------------------------------------------------------------
/src/views/admin/default/variables/columnsData.js:
--------------------------------------------------------------------------------
1 | export const columnsDataDevelopment = [
2 | {
3 | Header: "NAME",
4 | accessor: "name",
5 | },
6 | {
7 | Header: "TECH",
8 | accessor: "tech",
9 | },
10 | {
11 | Header: "DATE",
12 | accessor: "date",
13 | },
14 | {
15 | Header: "PROGRESS",
16 | accessor: "progress",
17 | },
18 | ];
19 |
20 | export const columnsDataCheck = [
21 | {
22 | Header: "NAME",
23 | accessor: "name",
24 | },
25 | {
26 | Header: "PROGRESS",
27 | accessor: "progress",
28 | },
29 | {
30 | Header: "QUANTITY",
31 | accessor: "quantity",
32 | },
33 | {
34 | Header: "DATE",
35 | accessor: "date",
36 | },
37 | ];
38 |
39 | export const columnsDataColumns = [
40 | {
41 | Header: "NAME",
42 | accessor: "name",
43 | },
44 | {
45 | Header: "PROGRESS",
46 | accessor: "progress",
47 | },
48 | {
49 | Header: "QUANTITY",
50 | accessor: "quantity",
51 | },
52 | {
53 | Header: "DATE",
54 | accessor: "date",
55 | },
56 | ];
57 |
58 | export const columnsDataComplex = [
59 | {
60 | Header: "NAME",
61 | accessor: "name",
62 | },
63 | {
64 | Header: "STATUS",
65 | accessor: "status",
66 | },
67 | {
68 | Header: "DATE",
69 | accessor: "date",
70 | },
71 | {
72 | Header: "PROGRESS",
73 | accessor: "progress",
74 | },
75 | ];
76 |
--------------------------------------------------------------------------------
/src/views/admin/tables/variables/columnsData.js:
--------------------------------------------------------------------------------
1 | export const columnsDataDevelopment = [
2 | {
3 | Header: "NAME",
4 | accessor: "name",
5 | },
6 | {
7 | Header: "TECH",
8 | accessor: "tech",
9 | },
10 | {
11 | Header: "DATE",
12 | accessor: "date",
13 | },
14 | {
15 | Header: "PROGRESS",
16 | accessor: "progress",
17 | },
18 | ];
19 |
20 | export const columnsDataCheck = [
21 | {
22 | Header: "NAME",
23 | accessor: "name",
24 | },
25 | {
26 | Header: "PROGRESS",
27 | accessor: "progress",
28 | },
29 | {
30 | Header: "QUANTITY",
31 | accessor: "quantity",
32 | },
33 | {
34 | Header: "DATE",
35 | accessor: "date",
36 | },
37 | ];
38 |
39 | export const columnsDataColumns = [
40 | {
41 | Header: "NAME",
42 | accessor: "name",
43 | },
44 | {
45 | Header: "PROGRESS",
46 | accessor: "progress",
47 | },
48 | {
49 | Header: "QUANTITY",
50 | accessor: "quantity",
51 | },
52 | {
53 | Header: "DATE",
54 | accessor: "date",
55 | },
56 | ];
57 |
58 | export const columnsDataComplex = [
59 | {
60 | Header: "NAME",
61 | accessor: "name",
62 | },
63 | {
64 | Header: "STATUS",
65 | accessor: "status",
66 | },
67 | {
68 | Header: "DATE",
69 | accessor: "date",
70 | },
71 | {
72 | Header: "PROGRESS",
73 | accessor: "progress",
74 | },
75 | ];
76 |
--------------------------------------------------------------------------------
/src/views/rtl/default/variables/columnsData.js:
--------------------------------------------------------------------------------
1 | export const columnsDataDevelopment = [
2 | {
3 | Header: "NAME",
4 | accessor: "name",
5 | },
6 | {
7 | Header: "TECH",
8 | accessor: "tech",
9 | },
10 | {
11 | Header: "DATE",
12 | accessor: "date",
13 | },
14 | {
15 | Header: "PROGRESS",
16 | accessor: "progress",
17 | },
18 | ];
19 |
20 | export const columnsDataCheck = [
21 | {
22 | Header: "NAME",
23 | accessor: "name",
24 | },
25 | {
26 | Header: "PROGRESS",
27 | accessor: "progress",
28 | },
29 | {
30 | Header: "QUANTITY",
31 | accessor: "quantity",
32 | },
33 | {
34 | Header: "DATE",
35 | accessor: "date",
36 | },
37 | ];
38 |
39 | export const columnsDataColumns = [
40 | {
41 | Header: "NAME",
42 | accessor: "name",
43 | },
44 | {
45 | Header: "PROGRESS",
46 | accessor: "progress",
47 | },
48 | {
49 | Header: "QUANTITY",
50 | accessor: "quantity",
51 | },
52 | {
53 | Header: "DATE",
54 | accessor: "date",
55 | },
56 | ];
57 |
58 | export const columnsDataComplex = [
59 | {
60 | Header: "NAME",
61 | accessor: "name",
62 | },
63 | {
64 | Header: "STATUS",
65 | accessor: "status",
66 | },
67 | {
68 | Header: "DATE",
69 | accessor: "date",
70 | },
71 | {
72 | Header: "PROGRESS",
73 | accessor: "progress",
74 | },
75 | ];
76 |
--------------------------------------------------------------------------------
/src/views/admin/profile/index.jsx:
--------------------------------------------------------------------------------
1 | import Banner from "./components/Banner";
2 | import General from "./components/General";
3 | import Notification from "./components/Notification";
4 | import Project from "./components/Project";
5 | import Storage from "./components/Storage";
6 | import Upload from "./components/Upload";
7 |
8 | const ProfileOverview = () => {
9 | return (
10 |
11 |
12 |
13 |
15 |
16 |
17 |
19 |
20 |
21 |
23 |
24 | {/* all project & ... */}
25 |
26 |
27 |
30 |
31 |
33 |
34 |
35 |
37 |
38 |
10 |
16 | {label}
17 |
18 |
34 | );
35 | }
36 |
37 | export default InputField;
38 |
--------------------------------------------------------------------------------
/src/views/admin/default/components/DailyTraffic.jsx:
--------------------------------------------------------------------------------
1 | import BarChart from "components/charts/BarChart";
2 | import { barChartDataDailyTraffic } from "variables/charts";
3 | import { barChartOptionsDailyTraffic } from "variables/charts";
4 | import { MdArrowDropUp } from "react-icons/md";
5 | import Card from "components/card";
6 | const DailyTraffic = () => {
7 | return (
8 |
9 |
10 |
11 |
12 | Daily Traffic
13 |
14 |
15 | 2.579{" "}
16 |
17 | Visitors
18 |
19 |
20 |
21 |
27 |
30 |
35 |
36 | );
37 | };
38 |
39 | export default DailyTraffic;
40 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/DailyTraffic.jsx:
--------------------------------------------------------------------------------
1 | import BarChart from "components/charts/BarChart";
2 | import { barChartDataDailyTraffic } from "variables/charts";
3 | import { barChartOptionsDailyTraffic } from "variables/charts";
4 | import { MdArrowDropUp } from "react-icons/md";
5 | import Card from "components/card";
6 | const DailyTraffic = () => {
7 | return (
8 |
9 |
10 |
11 |
12 | Daily Traffic
13 |
14 |
15 | 2.579{" "}
16 |
17 | Visitors
18 |
19 |
20 |
21 |
27 |
30 |
35 |
36 | );
37 | };
38 |
39 | export default DailyTraffic;
40 |
--------------------------------------------------------------------------------
/src/components/dropdown/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | function useOutsideAlerter(ref, setX) {
4 | React.useEffect(() => {
5 | /**
6 | * Alert if clicked on outside of element
7 | */
8 | function handleClickOutside(event) {
9 | if (ref.current && !ref.current.contains(event.target)) {
10 | setX(false);
11 | }
12 | }
13 | // Bind the event listener
14 | document.addEventListener("mousedown", handleClickOutside);
15 | return () => {
16 | // Unbind the event listener on clean up
17 | document.removeEventListener("mousedown", handleClickOutside);
18 | };
19 | }, [ref, setX]);
20 | }
21 |
22 | const Dropdown = (props) => {
23 | const { button, children, classNames, animation } = props;
24 | const wrapperRef = React.useRef(null);
25 | const [openWrapper, setOpenWrapper] = React.useState(false);
26 | useOutsideAlerter(wrapperRef, setOpenWrapper);
27 |
28 | return (
29 |
30 |
setOpenWrapper(!openWrapper)}>
31 | {button}
32 |
33 |
40 | {children}
41 |
42 |
16 |
20 |
22 |
23 |
24 |
25 | Horizon FREE
26 |
27 |
28 |
29 | {/* Nav item */}
30 |
31 |
34 |
35 | {/* Free Horizon Card */}
36 |
37 |
39 |
40 | {/* Nav item end */}
41 |
16 |
20 |
22 |
23 |
24 |
25 | Horizon FREE
26 |
27 |
28 |
29 | {/* Nav item */}
30 |
31 |
34 |
35 | {/* Free Horizon Card */}
36 |
37 |
39 |
40 | {/* Nav item end */}
41 |
20 |
21 |
27 |
28 |
29 |
39 |
9 |
10 |
11 | Discover, collect, and sell extraordinary NFTs
12 |
13 |
14 | Enter in this creative world. Discover now the latest NFTs or start
15 | creating your own!
16 |
17 |
18 |
19 |
20 | Discover now
21 |
22 |
26 | Watch Video
27 |
28 |
29 |
30 |
9 |
13 | {label}
14 |
15 |
16 |
34 |
35 |
8 |
9 |
11 | {/* Your storage */}
12 |
13 |
14 |
16 |
17 | Your storage
18 |
19 |
20 | Supervise your drive space in the easiest way
21 |
22 |
27 |
28 |
25.6 GB
29 |
50 GB
30 |
31 |
32 |
34 |
36 | );
37 | };
38 |
39 | export default Storage;
40 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // Admin Imports
4 | import MainDashboard from "views/admin/default";
5 | import NFTMarketplace from "views/admin/marketplace";
6 | import Profile from "views/admin/profile";
7 | import DataTables from "views/admin/tables";
8 | import RTLDefault from "views/rtl/default";
9 |
10 | // Auth Imports
11 | import SignIn from "views/auth/SignIn";
12 |
13 | // Icon Imports
14 | import {
15 | MdHome,
16 | MdOutlineShoppingCart,
17 | MdBarChart,
18 | MdPerson,
19 | MdLock,
20 | } from "react-icons/md";
21 |
22 | const routes = [
23 | {
24 | name: "Main Dashboard",
25 | layout: "/admin",
26 | path: "default",
27 | icon:
4 |
5 |
6 | ©{1900 + new Date().getYear()} Horizon UI. All Rights Reserved.
7 |
8 |
9 |
49 |
6 |
7 | ©{1900 + new Date().getYear()} Horizon UI. All Rights Reserved.
8 |
9 |
47 |
Horizon UI - Tailwind React
36 |
37 |
38 | You need to enable JavaScript to run this app.
39 |
40 |
41 |
42 |
43 |
49 |
--------------------------------------------------------------------------------
/src/views/admin/profile/components/Upload.jsx:
--------------------------------------------------------------------------------
1 | import { MdFileUpload } from "react-icons/md";
2 | import Card from "components/card";
3 | import React from "react";
4 |
5 | const Upload = () => {
6 | return (
7 |
8 |
9 |
10 |
12 | Upload Files
13 |
14 |
15 | PNG, JPG and GIF files are allowed
16 |
17 |
18 |
21 |
22 | Complete Your Profile
23 |
24 |
25 | Stay on the pulse of distributed projects with an anline whiteboard to
26 | plan, coordinate and discuss
27 |
28 |
32 | Publish now
33 |
34 |
36 | );
37 | };
38 |
39 | export default Upload;
40 |
--------------------------------------------------------------------------------
/src/views/admin/profile/components/Banner.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import avatar from "assets/img/avatars/avatar11.png";
3 | import banner from "assets/img/profile/banner.png";
4 | import Card from "components/card";
5 |
6 | const Banner = () => {
7 | return (
8 |
9 | {/* Background and profile */}
10 |
14 |
15 |
16 |
17 |
21 |
22 | Adela Parkson
23 |
24 |
Product Manager
25 |
29 |
33 |
34 |
35 | 9.7K
36 |
37 |
Followers
38 |
39 |
40 |
41 | 434
42 |
43 |
Following
44 |
45 |
47 | );
48 | };
49 |
50 | export default Banner;
51 |
--------------------------------------------------------------------------------
/src/components/switch/index.jsx:
--------------------------------------------------------------------------------
1 | const Switch = (props) => {
2 | const { extra, color, ...rest } = props;
3 | return (
4 |
28 |
32 |
39 | {route.icon ? route.icon :
41 |
48 | {route.name}
49 |
50 |
51 | {activeRoute(route.path) ? (
52 |
53 | ) : null}
54 |
28 |
32 |
39 | {route.icon ? route.icon :
41 |
48 | {route.name}
49 |
50 |
51 | {activeRoute(route.path) ? (
52 |
53 | ) : null}
54 |
17 |
18 |
19 | This month
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
30 | $37.5K
31 |
32 |
33 |
Total Spent
34 |
38 |
39 |
40 |
41 |
46 |
48 | );
49 | };
50 |
51 | export default TotalSpent;
52 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/TotalSpent.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | MdArrowDropUp,
4 | MdOutlineCalendarToday,
5 | MdBarChart,
6 | } from "react-icons/md";
7 | import Card from "components/card";
8 | import {
9 | lineChartDataTotalSpent,
10 | lineChartOptionsTotalSpent,
11 | } from "variables/charts";
12 | import LineChart from "components/charts/LineChart";
13 |
14 | const TotalSpent = () => {
15 | return (
16 |
17 |
18 |
19 | This month
21 |
22 |
23 |
25 |
26 |
27 |
28 |
29 |
30 | $37.5K
31 |
32 |
33 |
Total Spent
34 |
38 |
39 |
40 |
41 |
46 |
48 | );
49 | };
50 |
51 | export default TotalSpent;
52 |
--------------------------------------------------------------------------------
/src/components/sidebar/components/SidebarCard.jsx:
--------------------------------------------------------------------------------
1 | const FreeCard = () => {
2 | return (
3 |
4 |
5 |
12 |
27 |
28 |
29 |
30 |
Upgrade to PRO
31 |
32 | Improve your development process and start doing more with Horizon UI
33 | PRO!
34 |
35 |
36 |
41 | Upgrade to PRO
42 |
43 |
44 |
4 |
5 |
12 |
27 |
28 |
29 |
30 |
Upgrade to PRO
31 |
32 | Improve your development process and start doing more with Horizon UI
33 | PRO!
34 |
35 |
36 |
41 | Upgrade to PRO
42 |
43 |
44 |
8 |
9 |
10 |
11 | Your Pie Chart
12 |
13 |
14 |
15 |
16 |
17 | Monthly
18 | Yearly
19 | Weekly
20 |
21 |
22 |
28 |
29 |
30 |
31 |
Your Files
32 |
33 |
34 | 63%
35 |
36 |
37 |
38 |
39 |
40 |
41 |
45 |
46 | 25%
47 |
48 |
49 |
51 | );
52 | };
53 |
54 | export default PieChartCard;
55 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/PieChartCard.jsx:
--------------------------------------------------------------------------------
1 | import PieChart from "components/charts/PieChart";
2 | import { pieChartData, pieChartOptions } from "variables/charts";
3 | import Card from "components/card";
4 |
5 | const PieChartCard = () => {
6 | return (
7 |
8 |
9 |
10 |
11 | Your Pie Chart
12 |
13 |
14 |
15 |
16 |
17 | Monthly
18 | Yearly
19 | Weekly
20 |
21 |
22 |
28 |
29 |
30 |
31 |
Your Files
32 |
33 |
34 | 63%
35 |
36 |
37 |
38 |
39 |
40 |
41 |
45 |
46 | 25%
47 |
48 |
49 |
51 | );
52 | };
53 |
54 | export default PieChartCard;
55 |
--------------------------------------------------------------------------------
/src/components/card/CardMenu.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Dropdown from "components/dropdown";
3 | import { AiOutlineUser } from "react-icons/ai";
4 | import { BsThreeDots } from "react-icons/bs";
5 | import { FiSettings } from "react-icons/fi";
6 | import { AiOutlineShop } from "react-icons/ai";
7 | import { TiLightbulb } from "react-icons/ti";
8 |
9 | function CardMenu(props) {
10 | const { transparent } = props;
11 | const [open, setOpen] = React.useState(false);
12 | return (
13 | setOpen(!open)}
17 | open={open}
18 | className={`flex items-center text-xl hover:cursor-pointer ${
19 | transparent
20 | ? "bg-none text-white hover:bg-none active:bg-none"
21 | : "bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10"
22 | } linear justify-center rounded-lg font-bold transition duration-200`}
23 | >
24 |
31 |
32 |
33 |
35 | Panel 1
36 |
37 |
38 |
39 |
41 | Panel 2
42 |
43 |
44 |
45 |
47 | Panel 3
48 |
49 |
50 |
51 |
53 | Panel 4
54 |
55 |
62 |
setOpen(false)} />
63 | {/* Navbar & Main Content */}
64 |
65 | {/* Main Content */}
66 |
69 | {/* Routes */}
70 |
71 |
setOpen(true)}
73 | logoText={"Horizon UI Tailwind React"}
74 | brandText={currentRoute}
75 | secondary={getActiveNavbar(routes)}
76 | {...rest}
77 | />
78 |
79 |
80 | {getRoutes(routes)}
81 |
82 |
87 |
88 |
89 |
90 |
91 |
93 |
62 |
setOpen(false)} />
63 | {/* Navbar & Main Content */}
64 |
65 | {/* Main Content */}
66 |
69 | {/* Routes */}
70 |
71 |
setOpen(true)}
73 | logoText={"Horizon UI Tailwind React"}
74 | brandText={currentRoute}
75 | secondary={getActiveNavbar(routes)}
76 | {...rest}
77 | />
78 |
79 |
80 | {getRoutes(routes)}
81 |
82 |
87 |
88 |
89 |
90 |
91 |
93 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
37 |
42 |
43 | Back to Dashboard
44 |
45 |
46 |
47 |
48 | {getRoutes(routes)}
49 |
54 |
60 |
61 |
62 |
63 |
65 |
66 |
8 | {/* Sign in section */}
9 |
10 |
11 | Sign In
12 |
13 |
14 | Enter your email and password to sign in!
15 |
16 |
17 |
18 |
20 |
21 | Sign In with Google
22 |
23 |
24 |
29 | {/* Email */}
30 |
38 |
39 | {/* Password */}
40 |
48 | {/* Checkbox */}
49 |
63 |
64 | Sign In
65 |
66 |
77 |
78 |
7 | {/* Header */}
8 |
9 |
10 | General Information
11 |
12 |
13 | As we live, our hearts turn colder. Cause pain is what we go through
14 | as we become older. We get insulted by others, lose trust for those
15 | others. We get back stabbed by friends. It becomes harder for us to
16 | give others a hand. We get our heart broken by people we love, even
17 | that we give them all...
18 |
19 |
22 |
23 |
Education
24 |
25 | Stanford University
26 |
27 |
28 |
29 |
30 |
Languages
31 |
32 | English, Spanish, Italian
33 |
34 |
35 |
36 |
37 |
Department
38 |
39 | Product Design
40 |
41 |
42 |
43 |
44 |
Work History
45 |
46 | English, Spanish, Italian
47 |
48 |
49 |
50 |
51 |
Organization
52 |
53 | Simmmple Web LLC
54 |
55 |
56 |
57 |
58 |
Birthday
59 |
60 | 20 July 1986
61 |
62 |
63 |
65 | );
66 | };
67 |
68 | export default General;
69 |
--------------------------------------------------------------------------------
/src/components/card/NftCard.jsx:
--------------------------------------------------------------------------------
1 | import { IoHeart, IoHeartOutline } from "react-icons/io5";
2 | import { useState } from "react";
3 | import Card from "components/card";
4 |
5 | const NftCard = ({ title, author, price, image, bidders, extra }) => {
6 | const [heart, setHeart] = useState(true);
7 | return (
8 |
11 |
12 |
13 |
18 |
setHeart(!heart)}
20 | className="absolute top-3 right-3 flex items-center justify-center rounded-full bg-white p-2 text-brand-500 hover:cursor-pointer"
21 | >
22 |
23 | {heart ? (
24 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | {" "}
36 | {title}{" "}
37 |
38 |
39 | By {author}{" "}
40 |
41 |
42 |
43 |
44 |
45 | +5
46 |
47 | {bidders.map((avt, key) => (
48 |
52 |
58 | ))}
59 |
60 |
61 |
62 |
63 |
64 |
65 | Current Bid: {price} ETH
66 |
67 |
68 |
72 | Place Bid
73 |
74 |
75 |
77 | );
78 | };
79 |
80 | export default NftCard;
81 |
--------------------------------------------------------------------------------
/src/views/admin/default/components/TaskCard.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import React from "react";
3 | import Checkbox from "components/checkbox";
4 | import { MdDragIndicator, MdCheckCircle } from "react-icons/md";
5 | import Card from "components/card";
6 |
7 | const TaskCard = () => {
8 | return (
9 |
10 | {/* task header */}
11 |
12 |
13 |
14 |
16 |
17 | Tasks
18 |
19 |
20 |
21 |
26 |
27 |
28 |
29 |
30 | Landing Page Design
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Mobile App Design
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | Dashboard Builder
55 |
56 |
57 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | Landing Page Design
67 |
68 |
69 |
70 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Dashboard Builder
79 |
80 |
81 |
82 |
84 |
85 |
87 | );
88 | };
89 |
90 | export default TaskCard;
91 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/TaskCard.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import React from "react";
3 | import Checkbox from "components/checkbox";
4 | import { MdDragIndicator, MdCheckCircle } from "react-icons/md";
5 | import Card from "components/card";
6 |
7 | const TaskCard = () => {
8 | return (
9 |
10 | {/* task header */}
11 |
12 |
13 |
14 |
16 |
17 | Tasks
18 |
19 |
20 |
21 |
26 |
27 |
28 |
29 |
30 | Landing Page Design
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Mobile App Design
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | Dashboard Builder
55 |
56 |
57 |
58 |
60 |
61 |
62 |
63 |
64 |
65 |
66 | Landing Page Design
67 |
68 |
69 |
70 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | Dashboard Builder
79 |
80 |
81 |
82 |
84 |
85 |
87 | );
88 | };
89 |
90 | export default TaskCard;
91 |
--------------------------------------------------------------------------------
/src/views/admin/default/index.jsx:
--------------------------------------------------------------------------------
1 | import MiniCalendar from "components/calendar/MiniCalendar";
2 | import WeeklyRevenue from "views/admin/default/components/WeeklyRevenue";
3 | import TotalSpent from "views/admin/default/components/TotalSpent";
4 | import PieChartCard from "views/admin/default/components/PieChartCard";
5 | import { IoMdHome } from "react-icons/io";
6 | import { IoDocuments } from "react-icons/io5";
7 | import { MdBarChart, MdDashboard } from "react-icons/md";
8 |
9 | import { columnsDataCheck, columnsDataComplex } from "./variables/columnsData";
10 |
11 | import Widget from "components/widget/Widget";
12 | import CheckTable from "views/admin/default/components/CheckTable";
13 | import ComplexTable from "views/admin/default/components/ComplexTable";
14 | import DailyTraffic from "views/admin/default/components/DailyTraffic";
15 | import TaskCard from "views/admin/default/components/TaskCard";
16 | import tableDataCheck from "./variables/tableDataCheck.json";
17 | import tableDataComplex from "./variables/tableDataComplex.json";
18 |
19 | const Dashboard = () => {
20 | return (
21 |
22 | {/* Card widget */}
23 |
24 |
25 |
56 |
57 | {/* Charts */}
58 |
59 |
60 |
63 |
64 | {/* Tables & Charts */}
65 |
66 |
67 | {/* Check Table */}
68 |
69 |
74 |
75 | {/* Traffic chart & Pie Chart */}
76 |
77 |
81 |
82 | {/* Complex Table , Task & Calendar */}
83 |
84 |
88 |
89 | {/* Task chart & Calendar */}
90 |
91 |
97 |
98 |
22 | {/* Card widget */}
23 |
24 |
25 |
56 |
57 | {/* Charts */}
58 |
59 |
60 |
63 |
64 | {/* Tables & Charts */}
65 |
66 |
67 | {/* Check Table */}
68 |
69 |
74 |
75 | {/* Traffic chart & Pie Chart */}
76 |
77 |
81 |
82 | {/* Complex Table , Task & Calendar */}
83 |
84 |
88 |
89 | {/* Task chart & Calendar */}
90 |
91 |
97 |
98 |
9 |
10 |
11 | Notifications
12 |
13 |
16 | {/* the custom checkbox desing added in src/index.js */}
17 |
18 |
23 | Item comment notifications
24 |
25 |
26 |
27 |
28 |
33 | Buyer review notifications
34 |
35 |
36 |
37 |
38 |
43 | Rating reminders notifications
44 |
45 |
46 |
47 |
48 |
53 | Meetups near you notifications
54 |
55 |
56 |
57 |
58 |
63 | Company news notifications
64 |
65 |
66 |
67 |
68 |
73 | New launches and projects
74 |
75 |
76 |
77 |
82 | Monthly product changes
83 |
84 |
85 |
86 |
91 | Subscribe to newsletter
92 |
93 |
94 |
95 |
100 | Email me when someone follows me
101 |
102 |
103 |
105 | );
106 | }
107 |
108 | export default Notification;
109 |
--------------------------------------------------------------------------------
/src/views/admin/marketplace/components/HistoryCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Nft2 from "assets/img/nfts/Nft2.png";
3 | import Nft1 from "assets/img/nfts/Nft1.png";
4 | import Nft3 from "assets/img/nfts/Nft3.png";
5 | import Nft4 from "assets/img/nfts/Nft4.png";
6 | import Nft5 from "assets/img/nfts/Nft5.png";
7 | import Nft6 from "assets/img/nfts/Nft6.png";
8 |
9 | import { FaEthereum } from "react-icons/fa";
10 | import Card from "components/card";
11 |
12 | const HistoryCard = () => {
13 | const HistoryData = [
14 | {
15 | image: Nft1,
16 | title: "Colorful Heaven",
17 | owner: "Mark Benjamin",
18 | price: 0.4,
19 | time: "30s",
20 | },
21 | {
22 | image: Nft2,
23 | title: "Abstract Colors",
24 | owner: "Esthera Jackson",
25 | price: 2.4,
26 | time: "50m",
27 | },
28 | {
29 | image: Nft3,
30 | title: "ETH AI Brain",
31 | owner: "Nick Wilson",
32 | price: 0.3,
33 | time: "20s",
34 | },
35 | {
36 | image: Nft4,
37 | title: "Swipe Circles",
38 | owner: " Peter Will",
39 | price: 0.4,
40 | time: "4h",
41 | },
42 | {
43 | image: Nft5,
44 | title: "Mesh Gradients",
45 | owner: "Will Smith",
46 | price: 0.4,
47 | time: "30s",
48 | },
49 | {
50 | image: Nft6,
51 | title: "3D Cubes Art",
52 | owner: " Manny Gates",
53 | price: 0.4,
54 | time: "2m",
55 | },
56 | ];
57 |
58 | return (
59 |
60 | {/* HistoryCard Header */}
61 |
62 |
63 | History
64 |
65 |
66 | See all
67 |
68 |
74 |
75 |
76 |
81 |
82 |
83 |
84 | {" "}
85 | {data.title}
86 |
87 |
88 | {" "}
89 | {data.owner}{" "}
90 |
91 |
92 |
93 |
94 |
95 |
96 |
98 |
99 |
{}
100 | {data.price}
ETH
101 |
102 |
103 |
{data.time}
104 |
ago
105 |
106 |
107 |
110 | );
111 | };
112 |
113 | export default HistoryCard;
114 |
--------------------------------------------------------------------------------
/src/views/admin/profile/components/Project.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { MdModeEditOutline } from "react-icons/md";
3 | import image1 from "assets/img/profile/image1.png";
4 | import image2 from "assets/img/profile/image2.png";
5 | import image3 from "assets/img/profile/image3.png";
6 | import Card from "components/card";
7 |
8 | const Project = () => {
9 | return (
10 |
11 |
12 |
13 | All projects
14 |
15 |
16 | Here you can find more details about your projects. Keep you user
17 | engaged by providing meaningful information.
18 |
19 |
22 |
23 |
24 |
25 |
26 |
40 |
41 |
42 |
44 |
47 |
48 |
49 |
50 |
51 |
65 |
66 |
67 |
69 |
72 |
73 |
74 |
75 |
76 |
90 |
91 |
92 |
94 |
96 | );
97 | };
98 |
99 | export default Project;
100 |
--------------------------------------------------------------------------------
/src/views/admin/tables/components/ColumnsTable.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import Card from "components/card";
3 | import React, { useMemo } from "react";
4 | import {
5 | useGlobalFilter,
6 | usePagination,
7 | useSortBy,
8 | useTable,
9 | } from "react-table";
10 |
11 | const ColumnsTable = (props) => {
12 | const { columnsData, tableData } = props;
13 |
14 | const columns = useMemo(() => columnsData, [columnsData]);
15 | const data = useMemo(() => tableData, [tableData]);
16 |
17 | const tableInstance = useTable(
18 | {
19 | columns,
20 | data,
21 | },
22 | useGlobalFilter,
23 | useSortBy,
24 | usePagination
25 | );
26 |
27 | const {
28 | getTableProps,
29 | getTableBodyProps,
30 | headerGroups,
31 | page,
32 | prepareRow,
33 | initialState,
34 | } = tableInstance;
35 | initialState.pageSize = 5;
36 |
37 | return (
38 |
39 |
45 |
46 |
47 |
48 |
49 | {headerGroups.map((headerGroup, index) => (
50 |
51 | {headerGroup.headers.map((column, index) => (
52 |
57 |
58 | {column.render("Header")}
59 |
60 |
61 | ))}
62 |
63 | ))}
64 |
65 |
66 | {page.map((row, index) => {
67 | prepareRow(row);
68 | return (
69 |
70 | {row.cells.map((cell, index) => {
71 | let data;
72 | if (cell.column.Header === "NAME") {
73 | data = (
74 |
75 | {cell.value}
76 |
77 | );
78 | } else if (cell.column.Header === "PROGRESS") {
79 | data = (
80 |
81 | {cell.value}%
82 |
83 | );
84 | } else if (cell.column.Header === "QUANTITY") {
85 | data = (
86 |
87 | {cell.value}
88 |
89 | );
90 | } else if (cell.column.Header === "DATE") {
91 | data = (
92 |
93 | {cell.value}
94 |
95 | );
96 | }
97 | return (
98 |
103 | {data}
104 |
105 | );
106 | })}
107 |
108 | );
109 | })}
110 |
111 |
112 |
114 | );
115 | };
116 |
117 | export default ColumnsTable;
118 |
--------------------------------------------------------------------------------
/src/views/admin/tables/components/CheckTable.jsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import CardMenu from "components/card/CardMenu";
3 | import Card from "components/card";
4 | import Checkbox from "components/checkbox";
5 |
6 | import {
7 | useGlobalFilter,
8 | usePagination,
9 | useSortBy,
10 | useTable,
11 | } from "react-table";
12 |
13 | const CheckTable = (props) => {
14 | const { columnsData, tableData } = props;
15 |
16 | const columns = useMemo(() => columnsData, [columnsData]);
17 | const data = useMemo(() => tableData, [tableData]);
18 |
19 | const tableInstance = useTable(
20 | {
21 | columns,
22 | data,
23 | },
24 | useGlobalFilter,
25 | useSortBy,
26 | usePagination
27 | );
28 |
29 | const {
30 | getTableProps,
31 | getTableBodyProps,
32 | headerGroups,
33 | page,
34 | prepareRow,
35 | initialState,
36 | } = tableInstance;
37 | initialState.pageSize = 11;
38 |
39 | return (
40 |
41 |
42 |
43 | Check Table
44 |
45 |
46 |
48 |
49 |
50 |
57 |
58 | {headerGroups.map((headerGroup, index) => (
59 |
60 | {headerGroup.headers.map((column, index) => (
61 |
66 |
67 | {column.render("Header")}
68 |
69 |
70 | ))}
71 |
72 | ))}
73 |
74 |
75 | {page.map((row, index) => {
76 | prepareRow(row);
77 | return (
78 |
79 | {row.cells.map((cell, index) => {
80 | let data = "";
81 | if (cell.column.Header === "NAME") {
82 | data = (
83 |
84 |
85 |
86 | {cell.value[0]}
87 |
88 |
93 |
94 | {cell.value}%
95 |
96 |
101 | {" "}
102 | {cell.value}{" "}
103 |
104 | );
105 | } else if (cell.column.Header === "DATE") {
106 | data = (
107 |
108 | {cell.value}
109 |
110 | );
111 | }
112 | return (
113 |
118 | {data}
119 |
120 | );
121 | })}
122 |
123 | );
124 | })}
125 |
126 |
127 |
129 | );
130 | };
131 |
132 | export default CheckTable;
133 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/CheckTable.jsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import CardMenu from "components/card/CardMenu";
3 | import Checkbox from "components/checkbox";
4 | import Card from "components/card";
5 |
6 | import {
7 | useGlobalFilter,
8 | usePagination,
9 | useSortBy,
10 | useTable,
11 | } from "react-table";
12 |
13 | const CheckTable = (props) => {
14 | const { columnsData, tableData } = props;
15 |
16 | const columns = useMemo(() => columnsData, [columnsData]);
17 | const data = useMemo(() => tableData, [tableData]);
18 |
19 | const tableInstance = useTable(
20 | {
21 | columns,
22 | data,
23 | },
24 | useGlobalFilter,
25 | useSortBy,
26 | usePagination
27 | );
28 |
29 | const {
30 | getTableProps,
31 | getTableBodyProps,
32 | headerGroups,
33 | page,
34 | prepareRow,
35 | initialState,
36 | } = tableInstance;
37 | initialState.pageSize = 11;
38 |
39 | return (
40 |
41 |
42 |
43 | Check Table
44 |
45 |
46 |
48 |
49 |
50 |
57 |
58 | {headerGroups.map((headerGroup, index) => (
59 |
60 | {headerGroup.headers.map((column, index) => (
61 |
66 |
67 | {column.render("Header")}
68 |
69 |
70 | ))}
71 |
72 | ))}
73 |
74 |
75 | {page.map((row, index) => {
76 | prepareRow(row);
77 | return (
78 |
79 | {row.cells.map((cell, index) => {
80 | let data = "";
81 | if (cell.column.Header === "NAME") {
82 | data = (
83 |
84 |
85 |
86 | {cell.value[0]}
87 |
88 |
93 |
94 | {cell.value}%
95 |
96 |
101 | {" "}
102 | {cell.value}{" "}
103 |
104 | );
105 | } else if (cell.column.Header === "DATE") {
106 | data = (
107 |
108 | {cell.value}
109 |
110 | );
111 | }
112 | return (
113 |
118 | {data}
119 |
120 | );
121 | })}
122 |
123 | );
124 | })}
125 |
126 |
127 |
129 | );
130 | };
131 |
132 | export default CheckTable;
133 |
--------------------------------------------------------------------------------
/src/views/admin/default/components/CheckTable.jsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import CardMenu from "components/card/CardMenu";
3 | import Checkbox from "components/checkbox";
4 | import Card from "components/card";
5 |
6 | import {
7 | useGlobalFilter,
8 | usePagination,
9 | useSortBy,
10 | useTable,
11 | } from "react-table";
12 |
13 | const CheckTable = (props) => {
14 | const { columnsData, tableData } = props;
15 |
16 | const columns = useMemo(() => columnsData, [columnsData]);
17 | const data = useMemo(() => tableData, [tableData]);
18 |
19 | const tableInstance = useTable(
20 | {
21 | columns,
22 | data,
23 | },
24 | useGlobalFilter,
25 | useSortBy,
26 | usePagination
27 | );
28 |
29 | const {
30 | getTableProps,
31 | getTableBodyProps,
32 | headerGroups,
33 | page,
34 | prepareRow,
35 | initialState,
36 | } = tableInstance;
37 | initialState.pageSize = 11;
38 |
39 | return (
40 |
41 |
42 |
43 | Check Table
44 |
45 |
46 |
48 |
49 |
50 |
57 |
58 | {headerGroups.map((headerGroup, index) => (
59 |
60 | {headerGroup.headers.map((column, index) => (
61 |
66 |
67 | {column.render("Header")}
68 |
69 |
70 | ))}
71 |
72 | ))}
73 |
74 |
75 | {page.map((row, index) => {
76 | prepareRow(row);
77 | return (
78 |
79 | {row.cells.map((cell, index) => {
80 | let data = "";
81 | if (cell.column.Header === "NAME") {
82 | data = (
83 |
84 |
85 |
86 | {cell.value[0]}
87 |
88 |
93 |
94 | {cell.value}%
95 |
96 |
101 | {" "}
102 | {cell.value}{" "}
103 |
104 | );
105 | } else if (cell.column.Header === "DATE") {
106 | data = (
107 |
108 | {cell.value}
109 |
110 | );
111 | }
112 | return (
113 |
118 | {data}
119 |
120 | );
121 | })}
122 |
123 | );
124 | })}
125 |
126 |
127 |
129 | );
130 | };
131 |
132 | export default CheckTable;
133 |
--------------------------------------------------------------------------------
/src/views/admin/marketplace/components/TableTopCreators.jsx:
--------------------------------------------------------------------------------
1 | import Card from "components/card";
2 | import Progress from "components/progress";
3 | import React, { useMemo } from "react";
4 | import {
5 | useGlobalFilter,
6 | usePagination,
7 | useSortBy,
8 | useTable,
9 | } from "react-table";
10 |
11 | function TopCreatorTable(props) {
12 | const { columnsData, tableData } = props;
13 |
14 | const columns = useMemo(() => columnsData, [columnsData]);
15 | const data = useMemo(() => tableData, [tableData]);
16 |
17 | const tableInstance = useTable(
18 | {
19 | columns,
20 | data,
21 | },
22 | useGlobalFilter,
23 | useSortBy,
24 | usePagination
25 | );
26 |
27 | const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
28 | tableInstance;
29 |
30 | return (
31 |
32 | {/* Top Creator Header */}
33 |
34 |
35 | Top Creators
36 |
37 |
38 | See all
39 |
40 |
41 |
42 | {/* Top Creator Heading */}
43 |
44 |
48 |
49 | {headerGroups.map((headerGroup, index) => (
50 |
51 | {headerGroup.headers.map((column, index) => (
52 |
56 |
57 | {column.render("Header")}
58 |
59 |
60 | ))}
61 |
62 | ))}
63 |
64 |
65 |
66 | {page.map((row, index) => {
67 | prepareRow(row);
68 | return (
69 |
70 | {row.cells.map((cell, index) => {
71 | let data = "";
72 | if (cell.column.Header === "Name") {
73 | data = (
74 |
75 |
76 |
81 |
82 |
83 | {cell.value[0]}
84 |
85 |
90 | {cell.value}
91 |
92 | );
93 | } else if (cell.column.Header === "Rating") {
94 | data = (
95 |
98 | );
99 | }
100 | return (
101 |
106 | {data}
107 |
108 | );
109 | })}
110 |
111 | );
112 | })}
113 |
114 |
115 |
117 | );
118 | }
119 |
120 | export default TopCreatorTable;
121 |
--------------------------------------------------------------------------------
/src/views/admin/tables/components/ComplexTable.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import Card from "components/card";
3 | import {
4 | useGlobalFilter,
5 | usePagination,
6 | useSortBy,
7 | useTable,
8 | } from "react-table";
9 | import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
10 | import { useMemo } from "react";
11 | import Progress from "components/progress";
12 | const ComplexTable = (props) => {
13 | const { columnsData, tableData } = props;
14 |
15 | const columns = useMemo(() => columnsData, [columnsData]);
16 | const data = useMemo(() => tableData, [tableData]);
17 |
18 | const tableInstance = useTable(
19 | {
20 | columns,
21 | data,
22 | },
23 | useGlobalFilter,
24 | useSortBy,
25 | usePagination
26 | );
27 |
28 | const {
29 | getTableProps,
30 | getTableBodyProps,
31 | headerGroups,
32 | page,
33 | prepareRow,
34 | initialState,
35 | } = tableInstance;
36 | initialState.pageSize = 5;
37 |
38 | return (
39 |
40 |
41 |
42 | Complex Table
43 |
44 |
45 |
122 | );
123 | };
124 |
125 | export default ComplexTable;
126 |
--------------------------------------------------------------------------------
/src/views/rtl/default/components/ComplexTable.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import Card from "components/card";
3 | import {
4 | useGlobalFilter,
5 | usePagination,
6 | useSortBy,
7 | useTable,
8 | } from "react-table";
9 | import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
10 | import { useMemo } from "react";
11 | import Progress from "components/progress";
12 | const ComplexTable = (props) => {
13 | const { columnsData, tableData } = props;
14 |
15 | const columns = useMemo(() => columnsData, [columnsData]);
16 | const data = useMemo(() => tableData, [tableData]);
17 |
18 | const tableInstance = useTable(
19 | {
20 | columns,
21 | data,
22 | },
23 | useGlobalFilter,
24 | useSortBy,
25 | usePagination
26 | );
27 |
28 | const {
29 | getTableProps,
30 | getTableBodyProps,
31 | headerGroups,
32 | page,
33 | prepareRow,
34 | initialState,
35 | } = tableInstance;
36 | initialState.pageSize = 5;
37 |
38 | return (
39 |
40 |
41 |
42 | Complex Table
43 |
44 |
45 |
122 | );
123 | };
124 |
125 | export default ComplexTable;
126 |
--------------------------------------------------------------------------------
/src/views/admin/default/components/ComplexTable.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import Card from "components/card";
3 | import {
4 | useGlobalFilter,
5 | usePagination,
6 | useSortBy,
7 | useTable,
8 | } from "react-table";
9 | import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
10 | import { useMemo } from "react";
11 | import Progress from "components/progress";
12 | const ComplexTable = (props) => {
13 | const { columnsData, tableData } = props;
14 |
15 | const columns = useMemo(() => columnsData, [columnsData]);
16 | const data = useMemo(() => tableData, [tableData]);
17 |
18 | const tableInstance = useTable(
19 | {
20 | columns,
21 | data,
22 | },
23 | useGlobalFilter,
24 | useSortBy,
25 | usePagination
26 | );
27 |
28 | const {
29 | getTableProps,
30 | getTableBodyProps,
31 | headerGroups,
32 | page,
33 | prepareRow,
34 | initialState,
35 | } = tableInstance;
36 | initialState.pageSize = 5;
37 |
38 | return (
39 |
40 |
41 |
42 | Complex Table
43 |
44 |
45 |
122 | );
123 | };
124 |
125 | export default ComplexTable;
126 |
--------------------------------------------------------------------------------
/src/assets/css/MiniCalendar.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
2 | /* LIGHT MODE + GENERAL */
3 |
4 | .react-calendar {
5 | border: unset;
6 | background-color: transparent;
7 | font-family: "DM Sans", sans-serif;
8 | }
9 | .react-calendar__navigation__prev2-button {
10 | display: none;
11 | }
12 | .react-calendar__navigation__next2-button {
13 | display: none;
14 | }
15 | .react-calendar__navigation {
16 | align-items: center;
17 | }
18 | abbr[title] {
19 | border-bottom: none;
20 | -webkit-text-decoration: unset;
21 | text-decoration: unset;
22 | -webkit-text-decoration: unset;
23 | -webkit-text-decoration: unset;
24 | text-decoration: unset !important;
25 | }
26 | .react-calendar__navigation__prev-button {
27 | background-color: #4318ff !important;
28 | border-radius: 10px;
29 | min-width: 34px !important;
30 | height: 34px !important;
31 | color: white;
32 | }
33 | .react-calendar__navigation__next-button {
34 | background-color: #4318ff !important;
35 | border-radius: 10px;
36 | min-width: 34px !important;
37 | width: 34px !important;
38 | height: 34px !important;
39 | color: white;
40 | }
41 | .react-calendar__navigation__label {
42 | font-weight: 700 !important;
43 | font-size: 18px;
44 | }
45 | .react-calendar__navigation__label:hover,
46 | .react-calendar__navigation__label:focus {
47 | background-color: unset !important;
48 | border-radius: 10px;
49 | }
50 | .react-calendar__tile {
51 | font-size: 12px;
52 | display: flex;
53 | align-items: center;
54 | justify-content: center;
55 | padding: 0px !important;
56 | height: 34px !important;
57 | color: #1b2559;
58 | }
59 | .react-calendar__month-view__weekdays {
60 | background-color: #f4f7fe;
61 | border-radius: 10px;
62 | margin-bottom: 6px;
63 | }
64 | .react-calendar__tile--now,
65 | .react-calendar__tile--now:enabled:hover,
66 | .react-calendar__tile--now:enabled:focus {
67 | background-color: #f4f7fe;
68 | border-radius: 10px;
69 | }
70 | .react-calendar__month-view__days__day--neighboringMonth {
71 | color: #b0bbd5;
72 | }
73 | .react-calendar__tile--active,
74 | .react-calendar__tile--active:enabled:hover,
75 | .react-calendar__tile--active:enabled:focus {
76 | background: #4318ff;
77 | border-radius: 10px;
78 | color: white;
79 | }
80 | .react-calendar__tile--range,
81 | .react-calendar__tile--range:enabled:hover,
82 | .react-calendar__tile--range:enabled:focus {
83 | background: #f4f7fe;
84 | color: #4318ff;
85 | border-radius: 0px;
86 | }
87 | .react-calendar__tile--rangeStart,
88 | .react-calendar__tile--rangeStart:enabled:hover,
89 | .react-calendar__tile--rangeStart:enabled:focus {
90 | background: #4318ff;
91 | border-top-left-radius: 10px;
92 | border-bottom-left-radius: 10px;
93 | color: white;
94 | }
95 | .react-calendar__tile--rangeEnd,
96 | .react-calendar__tile--rangeEnd:enabled:hover,
97 | .react-calendar__tile--rangeEnd:enabled:focus {
98 | background: #4318ff;
99 | border-top-right-radius: 10px;
100 | border-bottom-right-radius: 10px;
101 | color: white;
102 | }
103 |
104 | /* DARK MODE */
105 |
106 | body.dark .react-calendar {
107 | border-radius: 30px;
108 | }
109 | body.dark .react-calendar__navigation__prev-button {
110 | background-color: #7551ff !important;
111 | }
112 | body.dark .react-calendar__navigation__next-button {
113 | background-color: #7551ff !important;
114 | color: white;
115 | }
116 | body.dark .react-calendar__tile {
117 | color: white;
118 | }
119 | body.dark .react-calendar__tile:enabled:hover,
120 | body.dark .react-calendar__tile:enabled:focus {
121 | background-color: rgba(255, 255, 255, 0.1);
122 | }
123 | body.dark .react-calendar__month-view__weekdays {
124 | background-color: rgba(255, 255, 255, 0.1);
125 | }
126 | body.dark .react-calendar__tile--now,
127 | body.dark .react-calendar__tile--now:enabled:hover,
128 | body.dark .react-calendar__tile--now:enabled:focus {
129 | background-color: rgba(255, 255, 255, 0.1);
130 | }
131 | body.dark .react-calendar__month-view__days__day--neighboringMonth {
132 | color: #b0bbd5;
133 | }
134 | body.dark .react-calendar__tile--active,
135 | body.dark .react-calendar__tile--active:enabled:hover,
136 | body.dark .react-calendar__tile--active:enabled:focus {
137 | background: #7551ff;
138 | color: white;
139 | }
140 | body.dark .react-calendar__tile--range,
141 | body.dark .react-calendar__tile--range:enabled:hover,
142 | body.dark .react-calendar__tile--range:enabled:focus {
143 | background: rgba(255, 255, 255, 0.1);
144 | color: #7551ff;
145 | }
146 | body.dark .react-calendar__tile--rangeStart,
147 | body.dark .react-calendar__tile--rangeStart:enabled:hover,
148 | body.dark .react-calendar__tile--rangeStart:enabled:focus {
149 | background: #7551ff;
150 | color: white;
151 | }
152 | body.dark .react-calendar__tile--rangeEnd,
153 | body.dark .react-calendar__tile--rangeEnd:enabled:hover,
154 | body.dark .react-calendar__tile--rangeEnd:enabled:focus {
155 | background: #7551ff;
156 | color: white;
157 | }
--------------------------------------------------------------------------------
/src/views/admin/marketplace/index.jsx:
--------------------------------------------------------------------------------
1 | import Banner from "./components/Banner";
2 | import NFt2 from "assets/img/nfts/Nft2.png";
3 | import NFt4 from "assets/img/nfts/Nft4.png";
4 | import NFt3 from "assets/img/nfts/Nft3.png";
5 | import NFt5 from "assets/img/nfts/Nft5.png";
6 | import NFt6 from "assets/img/nfts/Nft6.png";
7 | import avatar1 from "assets/img/avatars/avatar1.png";
8 | import avatar2 from "assets/img/avatars/avatar2.png";
9 | import avatar3 from "assets/img/avatars/avatar3.png";
10 |
11 | import tableDataTopCreators from "views/admin/marketplace/variables/tableDataTopCreators.json";
12 | import { tableColumnsTopCreators } from "views/admin/marketplace/variables/tableColumnsTopCreators";
13 | import HistoryCard from "./components/HistoryCard";
14 | import TopCreatorTable from "./components/TableTopCreators";
15 | import NftCard from "components/card/NftCard";
16 |
17 | const Marketplace = () => {
18 | return (
19 |
20 |
21 | {/* NFt Banner */}
22 |
23 |
24 | {/* NFt Header */}
25 |
26 |
27 | Trending NFTs
28 |
29 |
63 |
64 |
65 | {/* NFTs trending card */}
66 |
67 |
89 |
90 | {/* Recenlty Added setion */}
91 |
92 |
93 | Recently Added
94 |
95 |
96 |
97 | {/* Recently Add NFTs */}
98 |
99 |
121 |
122 |
123 | {/* right side section */}
124 |
125 |
126 |
133 |
8 |
9 | [
12 |
13 |
14 | Get started and build your dream web app with Horizon UI, the trendiest & innovative Open Source Admin Template for Tailwind CSS & React!
15 |
16 | ---
17 |
18 | ### Introduction
19 |
20 | Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Horizon UI is ready to help you create stunning websites and webapps.
21 |
22 | Save hundreds of hours trying to create and develop a dashboard from scratch.
23 | The fastest, most responsive & trendiest dashboard for Tailwind CSS is here. Seriously.
24 |
25 | With Horizon UI you will find many examples for pages like NFTs Pages,
26 | Authentication Pages, Profile and so on. Just choose between a Basic Design or a cover and you are good to go!
27 |
28 | ### 🎉 [NEW] Horizon UI Components
29 | All the main components from both versions, this will help you to see and interact with all & the latest added components of Horizon (also, new components are on the way, stay tuned)! ⚡️
30 | See all components
31 |
32 |
33 | ### Documentation
34 |
35 | Each element is well presented in a very complex documentation. You can read more about the documentation here.
36 |
37 | ### Quick Start
38 |
39 | Install Horizon UI by running either of the following:
40 |
41 | - Install NodeJS LTS from [NodeJs Official Page](https://nodejs.org/en/?ref=horizon-documentation) (NOTE: Product only works with LTS version).
42 |
43 | Clone the repository with the following command:
44 |
45 | ```bash
46 | git clone https://github.com/horizon-ui/horizon-tailwind-react.git
47 | ```
48 |
49 | Run in terminal this command:
50 |
51 | ```bash
52 | npm install
53 | ```
54 |
55 | Then run this command to start your local server
56 |
57 | ```bash
58 | npm start
59 | ```
60 |
61 | ### Example Pages
62 |
63 | If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.
64 |
65 | View example pages here.
66 |
67 | ### Versions
68 |
69 | | Free Version | PRO Version |
70 | | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
71 | | [](https://www.horizon-ui.com/?ref=readme-horizon-tailwind-react) | [](https://www.horizon-ui.com/pro?ref=readme-horizon-tailwind-react) |
72 |
73 | ### Figma Version
74 |
75 | Horizon UI is available in Figma format as well! Check it out on Figma
76 | Community! 🎨
77 | [See the Horizon UI Figma design files](https://bit.ly/horizon-figma)
78 |
79 | ### Reporting Issues
80 |
81 | We use GitHub Issues as the official bug tracker for the Horizon UI. Here are
82 | some advices for our users that want to report an issue:
83 |
84 | 1. Make sure that you are using the latest version of the Horizon UI Dashbaord.
85 | Check the CHANGELOG from your dashboard on our
86 | [CHANGE LOG File](https://github.com/horizon-ui/horizon-tailwind-react/blob/main/CHANGELOG.md?ref=readme-horizon-tailwind-react).
87 | 2. Providing us reproducible steps for the issue will shorten the time it takes
88 | for it to be fixed.
89 | 3. Some issues may be browser specific, so specifying in what browser you
90 | encountered the issue might help.
91 |
92 | ---
93 |
94 | ### Community
95 |
96 | Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon UI!
97 |
98 | 💬 [Join the #HorizonUI Discord Community!](https://discord.gg/f6tEKFBd4m)
99 |
100 | ### Copyright and license
101 |
102 | ⭐️ [Copyright 2023 Horizon UI ](https://www.horizon-ui.com/?ref=readme-horizon-tailwind-react)
103 |
104 | 📄 [Horizon UI License](https://www.simmmple.com/licenses?ref=readme-horizon-tailwind-react)
105 |
--------------------------------------------------------------------------------
/src/views/admin/tables/components/DevelopmentTable.jsx:
--------------------------------------------------------------------------------
1 | import CardMenu from "components/card/CardMenu";
2 | import Card from "components/card";
3 | import { DiApple } from "react-icons/di";
4 | import { DiAndroid } from "react-icons/di";
5 | import { DiWindows } from "react-icons/di";
6 |
7 | import React, { useMemo } from "react";
8 | import {
9 | useGlobalFilter,
10 | usePagination,
11 | useSortBy,
12 | useTable,
13 | } from "react-table";
14 | import Progress from "components/progress";
15 |
16 | const DevelopmentTable = (props) => {
17 | const { columnsData, tableData } = props;
18 |
19 | const columns = useMemo(() => columnsData, [columnsData]);
20 | const data = useMemo(() => tableData, [tableData]);
21 |
22 | const tableInstance = useTable(
23 | {
24 | columns,
25 | data,
26 | },
27 | useGlobalFilter,
28 | useSortBy,
29 | usePagination
30 | );
31 |
32 | const {
33 | getTableProps,
34 | getTableBodyProps,
35 | headerGroups,
36 | page,
37 | prepareRow,
38 | initialState,
39 | } = tableInstance;
40 | initialState.pageSize = 11;
41 |
42 | return (
43 |
44 |
45 |
46 | Development Table
47 |
48 |
49 |
157 | );
158 | };
159 |
160 | export default DevelopmentTable;
161 |
--------------------------------------------------------------------------------
](https://github.com/horizon-ui/horizon-tailwind-react)
10 |
11 |