setOpenSidebar(false)} />
19 |
23 |
setOpenSidebar(false)} >
24 |
26 |
27 |
28 |
29 | Horizon FREE
30 |
31 |
32 |
33 |
34 |
35 | {/* Nav item */}
36 |
37 | setOpenSidebar(false) : undefined} />
38 |
39 |
40 | {/* Free Horizon Card */}
41 |
42 |
44 |
45 | {/* Nav item end */}
46 |
47 |
48 | );
49 | };
50 |
51 | export default Sidebar;
52 |
--------------------------------------------------------------------------------
/components/progress/index.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | value?: string | number
3 | color?: string
4 | width?: string
5 | }
6 |
7 | const Progress = (props: Props) => {
8 | const { value, color, width } = props;
9 | return (
10 |
48 | );
49 | };
50 |
51 | export default Progress;
52 |
--------------------------------------------------------------------------------
/components/sidebar/components/SidebarCard.tsx:
--------------------------------------------------------------------------------
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 |
45 | );
46 | };
47 |
48 | export default FreeCard;
49 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/components/TotalSpent.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
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 "@/data/charts";
12 |
13 | const LineChart = dynamic(() => import("@/components/charts/LineChart"), {
14 | loading: () =>
loading...
,
15 | ssr: false
16 | })
17 |
18 | const TotalSpent = () => {
19 | return (
20 |
21 |
22 |
23 | This month
25 |
26 |
27 |
29 |
30 |
31 |
32 |
33 |
34 | $37.5K
35 |
36 |
37 |
Total Spent
38 |
42 |
43 |
44 |
45 |
51 |
53 | );
54 | };
55 |
56 | export default TotalSpent;
57 |
--------------------------------------------------------------------------------
/components/sidebar/components/Links.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React, { MouseEvent } from "react";
4 | import Link from "next/link";
5 | import { usePathname } from 'next/navigation';
6 | import DashIcon from "@/components/icons/DashIcon";
7 | // chakra imports
8 |
9 | import routes from "@/data/routes";
10 |
11 |
12 | type Props = {
13 | onClickRoute?: (e: MouseEvent
) => any | any
14 | }
15 |
16 | export function SidebarLinks({ onClickRoute }: Props) {
17 | // Chakra color mode
18 | const pathname = usePathname()
19 |
20 | // verifies if routeName is the one active (in browser input)
21 | const activeRoute = (routeName: string) => {
22 | return pathname.includes(routeName);
23 | };
24 |
25 | const createLinks = (routes: any) => {
26 | return routes.map((route: any, index: number) => {
27 | if (
28 | route.layout === "/dashboard" ||
29 | route.layout === "/auth" ||
30 | route.layout === "/rtl"
31 | ) {
32 | return (
33 | //
36 |
40 |
46 | {route.icon ? route.icon :
48 |
54 | {route.name}
55 |
56 |
57 | {activeRoute(route.path) ? (
58 |
59 | ) : null}
60 |
setOpen(!open)}
24 | // open={open}
25 | className={`flex items-center text-xl hover:cursor-pointer ${transparent
26 | ? "bg-none text-white hover:bg-none active:bg-none"
27 | : "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"
28 | } linear justify-center rounded-lg font-bold transition duration-200`}
29 | >
30 |
37 |
38 |
39 |
41 | Panel 1
42 |
43 |
44 |
45 |
47 | Panel 2
48 |
49 |
50 |
51 |
53 | Panel 3
54 |
55 |
56 |
57 |
59 | Panel 4
60 |
61 |
63 | );
64 | }
65 |
66 | export default CardMenu;
67 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/components/PieChartCard.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from "next/dynamic";
2 | import { pieChartData, pieChartOptions } from "@/data/charts";
3 | import Card from "@/components/card";
4 |
5 | const PieChart = dynamic(() => import("@/components/charts/PieChart"), {
6 | loading: () => loading...
,
7 | ssr: false
8 | })
9 |
10 | const PieChartCard = () => {
11 | return (
12 |
13 |
14 |
15 |
16 | Your Pie Chart
17 |
18 |
19 |
20 |
21 |
22 | Monthly
23 | Yearly
24 | Weekly
25 |
26 |
27 |
37 |
38 |
39 |
40 |
Your Files
41 |
42 |
43 | 63%
44 |
45 |
46 |
47 |
48 |
49 |
50 |
54 |
55 | 25%
56 |
57 |
58 |
60 | );
61 | };
62 |
63 | export default PieChartCard;
64 |
--------------------------------------------------------------------------------
/components/switch/index.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | className?: string
3 | color?: string
4 | id?: string
5 | }
6 |
7 | const Switch = (props: Props) => {
8 | const { className, color, id } = props;
9 | return (
10 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
33 |
38 |
39 | Back to Dashboard
40 |
41 |
42 |
43 | {children}
44 |
49 |
50 |
51 |
52 |
54 |
55 |
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 |
--------------------------------------------------------------------------------
/app/(dashboard)/profile/components/Notification.tsx:
--------------------------------------------------------------------------------
1 | import Card from "@/components/card";
2 | import CardMenu from "@/components/card/CardMenu";
3 | import Switch from "@/components/switch";
4 |
5 | function Notification() {
6 | return (
7 |
8 |
9 |
10 | Notifications
11 |
12 |
15 | {/* the custom checkbox desing added in src/index.js */}
16 |
17 |
19 | Item comment notifications
20 |
21 |
22 |
23 |
24 |
26 | Buyer review notifications
27 |
28 |
29 |
30 |
31 |
33 | Rating reminders notifications
34 |
35 |
36 |
37 |
38 |
40 | Meetups near you notifications
41 |
42 |
43 |
44 |
45 |
47 | Company news notifications
48 |
49 |
50 |
51 |
52 |
54 | New launches and projects
55 |
56 |
57 |
58 |
60 | Monthly product changes
61 |
62 |
63 |
64 |
66 | Subscribe to newsletter
67 |
68 |
69 |
70 |
72 | Email me when someone follows me
73 |
74 |
75 |
77 | );
78 | }
79 |
80 | export default Notification;
81 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/components/TaskCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import Card from "@/components/card";
4 | import CardMenu from "@/components/card/CardMenu";
5 | import Checkbox from "@/components/checkbox";
6 | import { MdDragIndicator, MdCheckCircle } from "react-icons/md";
7 |
8 | const TaskCard = () => {
9 | return (
10 |
11 | {/* task header */}
12 |
13 |
14 |
15 |
17 |
18 | Tasks
19 |
20 |
21 |
22 |
27 |
28 |
29 |
30 |
31 | Landing Page Design
32 |
33 |
34 |
35 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | Mobile App Design
44 |
45 |
46 |
47 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | Dashboard Builder
56 |
57 |
58 |
59 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | Landing Page Design
68 |
69 |
70 |
71 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | Dashboard Builder
80 |
81 |
82 |
83 |
85 |
86 |
88 | );
89 | };
90 |
91 | export default TaskCard;
92 |
--------------------------------------------------------------------------------
/components/radio/index.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | id?: string
3 | name?: string
4 | color?: string
5 | }
6 |
7 | const Radio = (props: Props) => {
8 | const { color, id, name } = props;
9 |
10 | return (
11 |
52 | {/* HistoryCard Header */}
53 |
54 |
55 | History
56 |
57 |
58 | See all
59 |
60 |
65 |
66 |
67 |
72 |
73 |
74 |
75 | {" "}
76 | {data.title}
77 |
78 |
79 | {" "}
80 | {data.owner}{" "}
81 |
82 |
83 |
84 |
85 |
86 |
87 |
89 |
90 |
{ }
91 | {data.price}
ETH
92 |
93 |
94 |
{data.time}
95 |
ago
96 |
97 |
98 |
101 | );
102 | };
103 |
104 | export default HistoryCard;
105 |
--------------------------------------------------------------------------------
/components/card/NftCard.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { FC, useState } from "react";
4 | import { IoHeart, IoHeartOutline } from "react-icons/io5";
5 | import Card from "@/components/card";
6 | import { type StaticImageData } from "next/image";
7 |
8 | type Props = {
9 | title?: string
10 | author?: string
11 | price?: string | number
12 | image?: string | StaticImageData
13 | bidders?: any[]
14 | className?: string
15 | }
16 |
17 | const NftCard: FC = ({ title, author, price, image, bidders, className }) => {
18 | const [heart, setHeart] = useState(true);
19 |
20 | return (
21 |
23 |
24 |
25 |
30 |
setHeart(!heart)}
32 | className="absolute top-3 right-3 flex items-center justify-center rounded-full bg-white p-2 text-brand-500 hover:cursor-pointer"
33 | >
34 |
35 | {heart ? (
36 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {" "}
48 | {title}{" "}
49 |
50 |
51 | By {author}{" "}
52 |
53 |
54 |
55 |
56 |
57 | +5
58 |
59 | {bidders!.map((avt, key) => (
60 |
64 |
70 | ))}
71 |
72 |
73 |
74 |
75 |
76 |
77 | Current Bid: {price} ETH
78 |
79 |
80 |
83 | Place Bid
84 |
85 |
86 |
88 | );
89 | };
90 |
91 | export default NftCard;
92 |
--------------------------------------------------------------------------------
/app/auth/page.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { FcGoogle } from "react-icons/fc";
3 | import InputField from '@/components/fields/InputField';
4 | import Checkbox from '@/components/checkbox';
5 |
6 | type Props = {};
7 |
8 | const AuthPage: FC = () => {
9 | return (
10 | <>
11 |
12 | {/* Sign in section */}
13 |
14 |
15 | Sign In
16 |
17 |
18 | Enter your email and password to sign in!
19 |
20 |
21 |
22 |
24 |
25 | Sign In with Google
26 |
27 |
28 |
33 |
34 | {/* Email */}
35 |
36 |
37 | {/* Password */}
38 |
39 |
40 | {/* Checkbox */}
41 |
52 |
53 |
54 | Sign In
55 |
56 |
57 |
65 |
66 |
7 |
8 |
9 | All projects
10 |
11 |
12 | Here you can find more details about your projects. Keep you user
13 | engaged by providing meaningful information.
14 |
15 |
18 |
19 |
20 |
21 |
22 |
36 |
37 |
38 |
40 |
43 |
44 |
45 |
46 |
47 |
61 |
62 |
63 |
65 |
68 |
69 |
70 |
71 |
72 |
86 |
87 |
88 |
90 |
92 | );
93 | };
94 |
95 | export default Project;
96 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/page.tsx:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic';
2 | import { FC } from 'react';
3 |
4 | // import MiniCalendar from "@/components/calendar/MiniCalendar";
5 | import WeeklyRevenue from "./components/WeeklyRevenue";
6 | import TotalSpent from "./components/TotalSpent";
7 | import PieChartCard from "./components/PieChartCard";
8 | import { IoMdHome } from "react-icons/io";
9 | import { IoDocuments } from "react-icons/io5";
10 | import { MdBarChart, MdDashboard } from "react-icons/md";
11 |
12 | import { columnsDataCheck, columnsDataComplex } from "./variables/columnsData";
13 |
14 | import Widget from "@/components/widget/Widget";
15 | import CheckTable from "./components/CheckTable";
16 | import ComplexTable from "./components/ComplexTable";
17 | import DailyTraffic from "./components/DailyTraffic";
18 | import TaskCard from "./components/TaskCard";
19 | import tableDataCheck from "./variables/tableDataCheck.json";
20 | import tableDataComplex from "./variables/tableDataComplex.json";
21 |
22 | const MiniCalendar = dynamic(() => import("@/components/calendar/MiniCalendar"), {
23 | loading: () => loading...
,
24 | ssr: false
25 | })
26 |
27 | type Props = {};
28 |
29 | const DashboardPage: FC = () => {
30 | return (
31 | <>
32 | {/* Card widget */}
33 |
34 |
65 |
66 | {/* Charts */}
67 |
68 |
71 |
72 | {/* Tables & Charts */}
73 |
74 | {/* Check Table */}
75 |
76 |
81 |
82 | {/* Traffic chart & Pie Chart */}
83 |
87 |
88 | {/* Complex Table , Task & Calendar */}
89 |
93 |
94 | {/* Task chart & Calendar */}
95 |
96 |
97 |
98 |
100 |
101 |
47 |
53 |
54 |
55 |
56 |
57 | {headerGroups.map((headerGroup, index) => (
58 |
59 | {headerGroup.headers.map((column, index) => (
60 |
65 |
66 | {column.render("Header")}
67 |
68 |
69 | ))}
70 |
71 | ))}
72 |
73 |
74 | {page.map((row, index) => {
75 | prepareRow(row);
76 | return (
77 |
78 | {row.cells.map((cell, index) => {
79 | let data;
80 | if (cell.column.Header === "NAME") {
81 | data = (
82 |
83 | {cell.value}
84 |
85 | );
86 | } else if (cell.column.Header === "PROGRESS") {
87 | data = (
88 |
89 | {cell.value}%
90 |
91 | );
92 | } else if (cell.column.Header === "QUANTITY") {
93 | data = (
94 |
95 | {cell.value}
96 |
97 | );
98 | } else if (cell.column.Header === "DATE") {
99 | data = (
100 |
101 | {cell.value}
102 |
103 | );
104 | }
105 | return (
106 |
111 | {data}
112 |
113 | );
114 | })}
115 |
116 | );
117 | })}
118 |
119 |
120 |
122 | );
123 | };
124 |
125 | export default ColumnsTable;
126 |
--------------------------------------------------------------------------------
/app/(dashboard)/nft-marketplace/page.tsx:
--------------------------------------------------------------------------------
1 | import { type Metadata } from "next";
2 | import Banner from "./components/Banner";
3 | import HistoryCard from "./components/HistoryCard";
4 | import TopCreatorTable from "./components/TableTopCreators";
5 | import NftCard from "@/components/card/NftCard";
6 |
7 | import tableDataTopCreators from "./variables/tableDataTopCreators.json";
8 | import { tableColumnsTopCreators } from "./variables/tableColumnsTopCreators";
9 |
10 | export const metadata: Metadata = {
11 | title: 'NFT | Horizon UI by Ories',
12 | }
13 |
14 | const NFTMarketPlacePage = () => {
15 | const bidders = ['/img/avatars/avatar1.png', '/img/avatars/avatar2.png', '/img/avatars/avatar3.png']
16 |
17 | return (
18 |
19 |
20 | {/* NFt Banner */}
21 |
22 |
23 | {/* NFt Header */}
24 |
25 |
26 | Trending NFTs
27 |
28 |
50 |
51 |
52 | {/* NFTs trending card */}
53 |
54 |
76 |
77 | {/* Recenlty Added setion */}
78 |
79 |
80 | Recently Added
81 |
82 |
83 |
84 | {/* Recently Add NFTs */}
85 |
86 |
108 |
109 |
110 | {/* right side section */}
111 |
112 |
119 |
>
55 | extends UseExpandedOptions,
56 | UseFiltersOptions,
57 | UseGlobalFiltersOptions,
58 | UseGroupByOptions,
59 | UsePaginationOptions,
60 | UseResizeColumnsOptions,
61 | UseRowSelectOptions,
62 | UseRowStateOptions,
63 | UseSortByOptions,
64 | // note that having Record here allows you to add anything to the options, this matches the spirit of the
65 | // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
66 | // feature set, this is a safe default.
67 | Record { }
68 |
69 | export interface Hooks<
70 | D extends Record = Record
71 | >
72 | extends UseExpandedHooks,
73 | UseGroupByHooks,
74 | UseRowSelectHooks,
75 | UseSortByHooks { }
76 |
77 | export interface TableInstance<
78 | D extends Record = Record
79 | >
80 | extends UseColumnOrderInstanceProps,
81 | UseExpandedInstanceProps,
82 | UseFiltersInstanceProps,
83 | UseGlobalFiltersInstanceProps,
84 | UseGroupByInstanceProps,
85 | UsePaginationInstanceProps,
86 | UseRowSelectInstanceProps,
87 | UseRowStateInstanceProps,
88 | UseSortByInstanceProps { }
89 |
90 | export interface TableState<
91 | D extends Record = Record
92 | >
93 | extends UseColumnOrderState,
94 | UseExpandedState,
95 | UseFiltersState,
96 | UseGlobalFiltersState,
97 | UseGroupByState,
98 | UsePaginationState,
99 | UseResizeColumnsState,
100 | UseRowSelectState,
101 | UseRowStateState,
102 | UseSortByState { }
103 |
104 | export interface ColumnInterface<
105 | D extends Record = Record
106 | >
107 | extends UseFiltersColumnOptions,
108 | UseGlobalFiltersColumnOptions,
109 | UseGroupByColumnOptions,
110 | UseResizeColumnsColumnOptions,
111 | UseSortByColumnOptions { }
112 |
113 | export interface ColumnInstance<
114 | D extends Record = Record
115 | >
116 | extends UseFiltersColumnProps,
117 | UseGroupByColumnProps,
118 | UseResizeColumnsColumnProps,
119 | UseSortByColumnProps { }
120 |
121 | export interface Cell<
122 | D extends Record = Record,
123 | V = any // eslint-disable-line
124 | > extends UseGroupByCellProps, UseRowStateCellProps { }
125 |
126 | export interface Row<
127 | D extends Record = Record
128 | >
129 | extends UseExpandedRowProps,
130 | UseGroupByRowProps,
131 | UseRowSelectRowProps,
132 | UseRowStateRowProps { }
133 | }
134 |
--------------------------------------------------------------------------------
/app/(dashboard)/data-tables/components/CheckTable.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMemo } from "react";
4 | import CardMenu from "@/components/card/CardMenu";
5 | import Card from "@/components/card";
6 | import Checkbox from "@/components/checkbox";
7 |
8 | import {
9 | useGlobalFilter,
10 | usePagination,
11 | useSortBy,
12 | useTable,
13 | } from "react-table";
14 |
15 | type Props = {
16 | columnsData: any[]
17 | tableData: any[]
18 | }
19 |
20 | const CheckTable = (props: Props) => {
21 | const { columnsData, tableData } = props;
22 |
23 | const columns = useMemo(() => columnsData, [columnsData]);
24 | const data = useMemo(() => tableData, [tableData]);
25 |
26 | const tableInstance = useTable(
27 | {
28 | columns,
29 | data,
30 | },
31 | useGlobalFilter,
32 | useSortBy,
33 | usePagination
34 | );
35 |
36 | const {
37 | getTableProps,
38 | getTableBodyProps,
39 | headerGroups,
40 | page,
41 | prepareRow,
42 | initialState,
43 | } = tableInstance;
44 | initialState.pageSize = 11;
45 |
46 | return (
47 |
48 |
49 |
50 | Check Table
51 |
52 |
53 |
55 |
56 |
57 |
64 |
65 | {headerGroups.map((headerGroup, index) => (
66 |
67 | {headerGroup.headers.map((column, index) => (
68 |
73 |
74 | {column.render("Header")}
75 |
76 |
77 | ))}
78 |
79 | ))}
80 |
81 |
82 | {page.map((row, index) => {
83 | prepareRow(row);
84 | return (
85 |
86 | {row.cells.map((cell, index) => {
87 | let renderData;
88 | if (cell.column.Header === "NAME") {
89 | renderData = (
90 |
91 |
92 |
93 | {cell.value[0]}
94 |
95 |
100 |
101 | {cell.value}%
102 |
103 |
108 | {" "}
109 | {cell.value}{" "}
110 |
111 | );
112 | } else if (cell.column.Header === "DATE") {
113 | renderData = (
114 |
115 | {cell.value}
116 |
117 | );
118 | }
119 | return (
120 |
125 | {renderData}
126 |
127 | );
128 | })}
129 |
130 | );
131 | })}
132 |
133 |
134 |
136 | );
137 | };
138 |
139 | export default CheckTable;
140 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/components/CheckTable.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMemo } from "react";
4 | import {
5 | useGlobalFilter,
6 | usePagination,
7 | useSortBy,
8 | useTable,
9 | } from "react-table";
10 |
11 | import CardMenu from "@/components/card/CardMenu";
12 | import Checkbox from "@/components/checkbox";
13 | import Card from "@/components/card";
14 |
15 |
16 | type Props = {
17 | columnsData: any[]
18 | tableData: any[]
19 | }
20 |
21 | const CheckTable = (props: Props) => {
22 | const { columnsData, tableData } = props;
23 |
24 | const columns = useMemo(() => columnsData, [columnsData]);
25 | const data = useMemo(() => tableData, [tableData]);
26 |
27 | const tableInstance = useTable(
28 | {
29 | columns,
30 | data,
31 | },
32 | useGlobalFilter,
33 | useSortBy,
34 | usePagination
35 | );
36 |
37 | const {
38 | getTableProps,
39 | getTableBodyProps,
40 | headerGroups,
41 | page,
42 | prepareRow,
43 | initialState,
44 | } = tableInstance;
45 |
46 | initialState.pageSize = 11;
47 |
48 | return (
49 |
50 |
51 |
52 | Check Table
53 |
54 |
55 |
57 |
58 |
59 |
66 |
67 | {headerGroups.map((headerGroup, index) => (
68 |
69 | {headerGroup.headers.map((column, index) => (
70 |
75 |
76 | {column.render("Header")}
77 |
78 |
79 | ))}
80 |
81 | ))}
82 |
83 |
84 | {page.map((row, index) => {
85 | prepareRow(row);
86 | return (
87 |
88 | {row.cells.map((cell, index) => {
89 | let renderData;
90 | if (cell.column.Header === "NAME") {
91 | renderData = (
92 |
93 |
94 |
95 | {cell.value[0]}
96 |
97 |
102 |
103 | {cell.value}%
104 |
105 |
110 | {" "}
111 | {cell.value}{" "}
112 |
113 | );
114 | } else if (cell.column.Header === "DATE") {
115 | renderData = (
116 |
117 | {cell.value}
118 |
119 | );
120 | }
121 | return (
122 |
127 | {renderData}
128 |
129 | );
130 | })}
131 |
132 | );
133 | })}
134 |
135 |
136 |
138 | );
139 | };
140 |
141 | export default CheckTable;
142 |
--------------------------------------------------------------------------------
/app/(dashboard)/nft-marketplace/components/TableTopCreators.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMemo } from "react";
4 | import Card from "@/components/card";
5 | import Progress from "@/components/progress";
6 | import {
7 | useGlobalFilter,
8 | usePagination,
9 | useSortBy,
10 | useTable,
11 | } from "react-table";
12 |
13 | type Props = {
14 | columnsData: any[]
15 | tableData: any[]
16 | }
17 |
18 | function TopCreatorTable(props: Props) {
19 | const { columnsData, tableData } = props;
20 |
21 | const columns = useMemo(() => columnsData, [columnsData]);
22 | const data = useMemo(() => tableData, [tableData]);
23 |
24 | const tableInstance = useTable(
25 | {
26 | columns,
27 | data,
28 | },
29 | useGlobalFilter,
30 | useSortBy,
31 | usePagination
32 | );
33 |
34 | const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
35 | tableInstance;
36 |
37 | return (
38 |
39 | {/* Top Creator Header */}
40 |
41 |
42 | Top Creators
43 |
44 |
45 | See all
46 |
47 |
48 |
49 | {/* Top Creator Heading */}
50 |
51 |
55 |
56 | {headerGroups.map((headerGroup, index) => (
57 |
58 | {headerGroup.headers.map((column, index) => (
59 |
63 |
64 | {column.render("Header")}
65 |
66 |
67 | ))}
68 |
69 | ))}
70 |
71 |
72 |
73 | {page.map((row, index) => {
74 | prepareRow(row);
75 | return (
76 |
77 | {row.cells.map((cell, index) => {
78 | let renderData;
79 | if (cell.column.Header === "Name") {
80 | renderData = (
81 |
82 |
83 |
88 |
89 |
90 | {cell.value[0]}
91 |
92 |
97 | {cell.value}
98 |
99 | );
100 | } else if (cell.column.Header === "Rating") {
101 | renderData = (
102 |
105 | );
106 | }
107 | return (
108 |
113 | {renderData}
114 |
115 | );
116 | })}
117 |
118 | );
119 | })}
120 |
121 |
122 |
124 | );
125 | }
126 |
127 | export default TopCreatorTable;
128 |
--------------------------------------------------------------------------------
/app/(dashboard)/dashboard/components/ComplexTable.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import CardMenu from "@/components/card/CardMenu";
4 | import Card from "@/components/card";
5 | import {
6 | useGlobalFilter,
7 | usePagination,
8 | useSortBy,
9 | useTable,
10 | } from "react-table";
11 | import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
12 | import { useMemo } from "react";
13 | import Progress from "@/components/progress";
14 |
15 | type Props = {
16 | columnsData: any[]
17 | tableData: any[]
18 | }
19 |
20 | const ComplexTable = (props: Props) => {
21 | const { columnsData, tableData } = props;
22 |
23 | const columns = useMemo(() => columnsData, [columnsData]);
24 | const data = useMemo(() => tableData, [tableData]);
25 |
26 | const tableInstance = useTable(
27 | {
28 | columns,
29 | data,
30 | },
31 | useGlobalFilter,
32 | useSortBy,
33 | usePagination
34 | );
35 |
36 | const {
37 | getTableProps,
38 | getTableBodyProps,
39 | headerGroups,
40 | page,
41 | prepareRow,
42 | initialState,
43 | } = tableInstance;
44 | initialState.pageSize = 5;
45 |
46 | return (
47 |
48 |
49 |
50 | Complex Table
51 |
52 |
53 |
56 |
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 renderData;
81 | if (cell.column.Header === "NAME") {
82 | renderData = (
83 |
84 | {cell.value}
85 |
86 | );
87 | } else if (cell.column.Header === "STATUS") {
88 | renderData = (
89 |
90 |
91 | {cell.value === "Approved" ? (
92 |
99 |
100 | {cell.value}
101 |
102 |
107 | {cell.value}
108 |
109 | );
110 | } else if (cell.column.Header === "PROGRESS") {
111 | renderData =
119 | {renderData}
120 |
121 | );
122 | })}
123 |
124 | );
125 | })}
126 |
127 |
128 |
130 | );
131 | };
132 |
133 | export default ComplexTable;
134 |
--------------------------------------------------------------------------------
/app/(dashboard)/data-tables/components/ComplexTable.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMemo } from "react";
4 | import {
5 | useGlobalFilter,
6 | usePagination,
7 | useSortBy,
8 | useTable,
9 | } from "react-table";
10 | import { MdCheckCircle, MdCancel, MdOutlineError } from "react-icons/md";
11 |
12 | import CardMenu from "@/components/card/CardMenu";
13 | import Card from "@/components/card";
14 | import Progress from "@/components/progress";
15 |
16 | type Props = {
17 | columnsData: any[]
18 | tableData: any[]
19 | }
20 |
21 | const ComplexTable = (props: Props) => {
22 | const { columnsData, tableData } = props;
23 |
24 | const columns = useMemo(() => columnsData, [columnsData]);
25 | const data = useMemo(() => tableData, [tableData]);
26 |
27 | const tableInstance = useTable(
28 | {
29 | columns,
30 | data,
31 | },
32 | useGlobalFilter,
33 | useSortBy,
34 | usePagination
35 | );
36 |
37 | const {
38 | getTableProps,
39 | getTableBodyProps,
40 | headerGroups,
41 | page,
42 | prepareRow,
43 | initialState,
44 | } = tableInstance;
45 | initialState.pageSize = 5;
46 |
47 | return (
48 |
49 |
50 |
51 | Complex Table
52 |
53 |
54 |
57 |
58 |
59 | {headerGroups.map((headerGroup, index) => (
60 |
61 | {headerGroup.headers.map((column, index) => (
62 |
67 |
68 | {column.render("Header")}
69 |
70 |
71 | ))}
72 |
73 | ))}
74 |
75 |
76 | {page.map((row, index) => {
77 | prepareRow(row);
78 | return (
79 |
80 | {row.cells.map((cell, index) => {
81 | let renderData;
82 | if (cell.column.Header === "NAME") {
83 | renderData = (
84 |
85 | {cell.value}
86 |
87 | );
88 | } else if (cell.column.Header === "STATUS") {
89 | renderData = (
90 |
91 |
92 | {cell.value === "Approved" ? (
93 |
100 |
101 | {cell.value}
102 |
103 |
108 | {cell.value}
109 |
110 | );
111 | } else if (cell.column.Header === "PROGRESS") {
112 | renderData =
120 | {renderData}
121 |
122 | );
123 | })}
124 |
125 | );
126 | })}
127 |
128 |
129 |
131 | );
132 | };
133 |
134 | export default ComplexTable;
135 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from 'next/image'
2 |
3 | export default function Home() {
4 | return (
5 |
6 |
7 |
8 | Get started by editing
9 | app/page.tsx
10 |
11 |
29 |
32 |
41 |
42 |
111 |
112 | )
113 | }
114 |
--------------------------------------------------------------------------------
/app/(dashboard)/data-tables/components/DevelopmentTable.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useMemo } from "react";
4 | import {
5 | useGlobalFilter,
6 | usePagination,
7 | useSortBy,
8 | useTable,
9 | } from "react-table";
10 |
11 | import CardMenu from "@/components/card/CardMenu";
12 | import Card from "@/components/card";
13 | import Progress from "@/components/progress";
14 | import { DiApple, DiAndroid, DiWindows } from "react-icons/di";
15 |
16 |
17 | type Props = {
18 | columnsData: any[]
19 | tableData: any[]
20 | }
21 |
22 | const DevelopmentTable = (props: Props) => {
23 | const { columnsData, tableData } = props;
24 |
25 | const columns = useMemo(() => columnsData, [columnsData]);
26 | const data = useMemo(() => tableData, [tableData]);
27 |
28 | const tableInstance = useTable(
29 | {
30 | columns,
31 | data,
32 | },
33 | useGlobalFilter,
34 | useSortBy,
35 | usePagination
36 | );
37 |
38 | const {
39 | getTableProps,
40 | getTableBodyProps,
41 | headerGroups,
42 | page,
43 | prepareRow,
44 | initialState,
45 | } = tableInstance;
46 | initialState.pageSize = 11;
47 |
48 | return (
49 |
50 |
51 |
52 | Development Table
53 |
54 |
55 |
58 |
65 |
66 | {headerGroups.map((headerGroup, index) => (
67 |
68 | {headerGroup.headers.map((column, index) => (
69 |
74 |
75 | {column.render("Header")}
76 |
77 |
78 | ))}
79 |
80 | ))}
81 |
82 |
83 | {page.map((row, index) => {
84 | prepareRow(row);
85 | return (
86 |
87 | {row.cells.map((cell, index) => {
88 | let renderData;
89 | if (cell.column.Header === "NAME") {
90 | renderData = (
91 |
92 | {cell.value}
93 |
94 | );
95 | } else if (cell.column.Header === "TECH") {
96 | renderData = (
97 |
98 | {cell.value.map((item: any, key: number) => {
99 | if (item === "apple") {
100 | return (
101 |
105 |
107 | );
108 | } else if (item === "android") {
109 | return (
110 |
114 |
116 | );
117 | } else if (item === "windows") {
118 | return (
119 |
123 |
125 | );
126 | } else return null;
127 | })}
128 |
133 | {cell.value}
134 |
135 | );
136 | } else if (cell.column.Header === "PROGRESS") {
137 | renderData = (
138 |
139 |
140 | {cell.value}%
141 |
142 |
143 |
152 | {renderData}
153 |
154 | );
155 | })}
156 |
157 | );
158 | })}
159 |
160 |
161 |
163 | );
164 | };
165 |
166 | export default DevelopmentTable;
167 |
--------------------------------------------------------------------------------
/data/charts.ts:
--------------------------------------------------------------------------------
1 | export const barChartDataDailyTraffic = [
2 | {
3 | name: "Daily Traffic",
4 | data: [20, 30, 40, 20, 45, 50, 30],
5 | },
6 | ];
7 |
8 | export const barChartOptionsDailyTraffic = {
9 | chart: {
10 | toolbar: {
11 | show: false,
12 | },
13 | },
14 | tooltip: {
15 | style: {
16 | fontSize: "12px",
17 | fontFamily: undefined,
18 | backgroundColor: "#000000"
19 | },
20 | onDatasetHover: {
21 | style: {
22 | fontSize: "12px",
23 | fontFamily: undefined,
24 | },
25 | },
26 | theme: "dark",
27 | },
28 | xaxis: {
29 | categories: ["00", "04", "08", "12", "14", "16", "18"],
30 | show: false,
31 | labels: {
32 | show: true,
33 | style: {
34 | colors: "#A3AED0",
35 | fontSize: "14px",
36 | fontWeight: "500",
37 | },
38 | },
39 | axisBorder: {
40 | show: false,
41 | },
42 | axisTicks: {
43 | show: false,
44 | },
45 | },
46 | yaxis: {
47 | show: false,
48 | color: "black",
49 | labels: {
50 | show: true,
51 | style: {
52 | colors: "#CBD5E0",
53 | fontSize: "14px",
54 | },
55 | },
56 | },
57 | grid: {
58 | show: false,
59 | strokeDashArray: 5,
60 | yaxis: {
61 | lines: {
62 | show: true,
63 | },
64 | },
65 | xaxis: {
66 | lines: {
67 | show: false,
68 | },
69 | },
70 | },
71 | fill: {
72 | type: "gradient",
73 | gradient: {
74 | type: "vertical",
75 | shadeIntensity: 1,
76 | opacityFrom: 0.7,
77 | opacityTo: 0.9,
78 | colorStops: [
79 | [
80 | {
81 | offset: 0,
82 | color: "#4318FF",
83 | opacity: 1,
84 | },
85 | {
86 | offset: 100,
87 | color: "rgba(67, 24, 255, 1)",
88 | opacity: 0.28,
89 | },
90 | ],
91 | ],
92 | },
93 | },
94 | dataLabels: {
95 | enabled: false,
96 | },
97 | plotOptions: {
98 | bar: {
99 | borderRadius: 10,
100 | columnWidth: "25px",
101 | },
102 | },
103 | responsive: [{
104 | breakpoint: 1368,
105 | options: {
106 | plotOptions: {
107 | bar: {
108 | borderRadius: 5,
109 | columnWidth: "10px",
110 | },
111 | },
112 | },
113 | }]
114 | };
115 |
116 | export const pieChartOptions = {
117 | labels: ["Your files", "System", "Empty"],
118 | colors: ["#4318FF", "#6AD2FF", "#EFF4FB"],
119 | chart: {
120 | width: "50px",
121 | },
122 | states: {
123 | hover: {
124 | filter: {
125 | type: "none",
126 | },
127 | },
128 | },
129 | legend: {
130 | show: false,
131 | },
132 | dataLabels: {
133 | enabled: false,
134 | },
135 | hover: { mode: null },
136 | plotOptions: {
137 | donut: {
138 | expandOnClick: false,
139 | donut: {
140 | labels: {
141 | show: false,
142 | },
143 | },
144 | },
145 | },
146 | fill: {
147 | colors: ["#4318FF", "#6AD2FF", "#EFF4FB"],
148 | },
149 | tooltip: {
150 | enabled: true,
151 | theme: "dark",
152 | style: {
153 | fontSize: "12px",
154 | fontFamily: undefined,
155 | backgroundColor: "#000000"
156 | },
157 | },
158 | };
159 |
160 | export const pieChartData = [63, 25, 12];
161 |
162 | export const barChartDataWeeklyRevenue = [
163 | {
164 | name: "PRODUCT A",
165 | data: [400, 370, 330, 390, 320, 350, 360, 320, 380],
166 | color: "#6AD2Fa",
167 | },
168 | {
169 | name: "PRODUCT B",
170 | data: [400, 370, 330, 390, 320, 350, 360, 320, 380],
171 | color: "#4318FF",
172 | },
173 | {
174 | name: "PRODUCT C",
175 | data: [400, 370, 330, 390, 320, 350, 360, 320, 380],
176 | color: "#EFF4FB",
177 | },
178 | ];
179 |
180 | export const barChartOptionsWeeklyRevenue = {
181 | chart: {
182 | stacked: true,
183 | toolbar: {
184 | show: false,
185 | },
186 | },
187 | // colors:['#ff3322','#faf']
188 | tooltip: {
189 | style: {
190 | fontSize: "12px",
191 | fontFamily: undefined,
192 | backgroundColor: "#000000"
193 | },
194 | theme: 'dark',
195 | onDatasetHover: {
196 | style: {
197 | fontSize: "12px",
198 | fontFamily: undefined,
199 | },
200 | },
201 | },
202 | xaxis: {
203 | categories: ["17", "18", "19", "20", "21", "22", "23", "24", "25"],
204 | show: false,
205 | labels: {
206 | show: true,
207 | style: {
208 | colors: "#A3AED0",
209 | fontSize: "14px",
210 | fontWeight: "500",
211 | },
212 | },
213 | axisBorder: {
214 | show: false,
215 | },
216 | axisTicks: {
217 | show: false,
218 | },
219 | },
220 | yaxis: {
221 | show: false,
222 | color: "black",
223 | labels: {
224 | show: false,
225 | style: {
226 | colors: "#A3AED0",
227 | fontSize: "14px",
228 | fontWeight: "500",
229 | },
230 | },
231 | },
232 | grid: {
233 | borderColor: "rgba(163, 174, 208, 0.3)",
234 | show: true,
235 | yaxis: {
236 | lines: {
237 | show: false,
238 | opacity: 0.5,
239 | },
240 | },
241 | row: {
242 | opacity: 0.5,
243 | },
244 | xaxis: {
245 | lines: {
246 | show: false,
247 | },
248 | },
249 | },
250 | fill: {
251 | type: "solid",
252 | colors: ["#5E37FF", "#6AD2FF", "#E1E9F8"],
253 | },
254 | legend: {
255 | show: false,
256 | },
257 | colors: ["#5E37FF", "#6AD2FF", "#E1E9F8"],
258 | dataLabels: {
259 | enabled: false,
260 | },
261 | plotOptions: {
262 | bar: {
263 | borderRadius: 10,
264 | columnWidth: "20px",
265 | },
266 | },
267 | };
268 |
269 | export const lineChartDataTotalSpent = [
270 | {
271 | name: "Revenue",
272 | data: [50, 64, 48, 66, 49, 68],
273 | color: "#4318FF",
274 | },
275 | {
276 | name: "Profit",
277 | data: [30, 40, 24, 46, 20, 46],
278 | color: "#6AD2FF",
279 | },
280 | ];
281 |
282 | export const lineChartOptionsTotalSpent = {
283 | legend: {
284 | show: false,
285 | },
286 |
287 | theme: {
288 | mode: "light",
289 | },
290 | chart: {
291 | type: "line",
292 |
293 | toolbar: {
294 | show: false,
295 | },
296 | },
297 |
298 | dataLabels: {
299 | enabled: false,
300 | },
301 | stroke: {
302 | curve: "smooth",
303 | },
304 |
305 | tooltip: {
306 | style: {
307 | fontSize: "12px",
308 | fontFamily: undefined,
309 | backgroundColor: "#000000"
310 | },
311 | theme: 'dark',
312 | x: {
313 | format: "dd/MM/yy HH:mm",
314 | },
315 | },
316 | grid: {
317 | show: false,
318 | },
319 | xaxis: {
320 | axisBorder: {
321 | show: false,
322 | },
323 | axisTicks: {
324 | show: false,
325 | },
326 | labels: {
327 | style: {
328 | colors: "#A3AED0",
329 | fontSize: "12px",
330 | fontWeight: "500",
331 | },
332 | },
333 | type: "text",
334 | range: undefined,
335 | categories: ["SEP", "OCT", "NOV", "DEC", "JAN", "FEB"],
336 | },
337 |
338 | yaxis: {
339 | show: false,
340 | },
341 | };
342 |
--------------------------------------------------------------------------------
/components/calendar/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 | /*
5 | STYLE FROM
6 | react-calendar/dist/Calendar.css
7 | */
8 | .react-calendar {
9 | width: 350px;
10 | max-width: 100%;
11 | background: white;
12 | border: 1px solid #a0a096;
13 | font-family: Arial, Helvetica, sans-serif;
14 | line-height: 1.125em;
15 | }
16 |
17 | .react-calendar--doubleView {
18 | width: 700px;
19 | }
20 |
21 | .react-calendar--doubleView .react-calendar__viewContainer {
22 | display: flex;
23 | margin: -0.5em;
24 | }
25 |
26 | .react-calendar--doubleView .react-calendar__viewContainer > * {
27 | width: 50%;
28 | margin: 0.5em;
29 | }
30 |
31 | .react-calendar,
32 | .react-calendar *,
33 | .react-calendar *:before,
34 | .react-calendar *:after {
35 | -moz-box-sizing: border-box;
36 | -webkit-box-sizing: border-box;
37 | box-sizing: border-box;
38 | }
39 |
40 | .react-calendar button {
41 | margin: 0;
42 | border: 0;
43 | outline: none;
44 | }
45 |
46 | .react-calendar button:enabled:hover {
47 | cursor: pointer;
48 | }
49 |
50 | .react-calendar__navigation {
51 | display: flex;
52 | height: 44px;
53 | margin-bottom: 1em;
54 | }
55 |
56 | .react-calendar__navigation button {
57 | min-width: 44px;
58 | background: none;
59 | }
60 |
61 | .react-calendar__navigation button:disabled {
62 | background-color: #f0f0f0;
63 | }
64 |
65 | .react-calendar__navigation button:enabled:hover,
66 | .react-calendar__navigation button:enabled:focus {
67 | background-color: #e6e6e6;
68 | }
69 |
70 | .react-calendar__month-view__weekdays {
71 | text-align: center;
72 | text-transform: uppercase;
73 | font-weight: bold;
74 | font-size: 0.75em;
75 | }
76 |
77 | .react-calendar__month-view__weekdays__weekday {
78 | padding: 0.5em;
79 | }
80 |
81 | .react-calendar__month-view__weekNumbers .react-calendar__tile {
82 | display: flex;
83 | align-items: center;
84 | justify-content: center;
85 | font-size: 0.75em;
86 | font-weight: bold;
87 | }
88 |
89 | .react-calendar__month-view__days__day--weekend {
90 | color: #d10000;
91 | }
92 |
93 | .react-calendar__month-view__days__day--neighboringMonth {
94 | color: #757575;
95 | }
96 |
97 | .react-calendar__year-view .react-calendar__tile,
98 | .react-calendar__decade-view .react-calendar__tile,
99 | .react-calendar__century-view .react-calendar__tile {
100 | padding: 2em 0.5em;
101 | }
102 |
103 | .react-calendar__tile {
104 | max-width: 100%;
105 | padding: 10px 6.6667px;
106 | background: none;
107 | text-align: center;
108 | line-height: 16px;
109 | }
110 |
111 | .react-calendar__tile:disabled {
112 | background-color: #f0f0f0;
113 | }
114 |
115 | .react-calendar__tile:enabled:hover,
116 | .react-calendar__tile:enabled:focus {
117 | background-color: #e6e6e6;
118 | }
119 |
120 | .react-calendar__tile--now {
121 | background: #ffff76;
122 | }
123 |
124 | .react-calendar__tile--now:enabled:hover,
125 | .react-calendar__tile--now:enabled:focus {
126 | background: #ffffa9;
127 | }
128 |
129 | .react-calendar__tile--hasActive {
130 | background: #76baff;
131 | }
132 |
133 | .react-calendar__tile--hasActive:enabled:hover,
134 | .react-calendar__tile--hasActive:enabled:focus {
135 | background: #a9d4ff;
136 | }
137 |
138 | .react-calendar__tile--active {
139 | background: #006edc;
140 | color: white;
141 | }
142 |
143 | .react-calendar__tile--active:enabled:hover,
144 | .react-calendar__tile--active:enabled:focus {
145 | background: #1087ff;
146 | }
147 |
148 | .react-calendar--selectRange .react-calendar__tile--hover {
149 | background-color: #e6e6e6;
150 | }
151 | /* END STYLE FROM react-calendar/dist/Calendar.css */
152 |
153 |
154 |
155 | .react-calendar {
156 | border: unset;
157 | background-color: transparent;
158 | font-family: "DM Sans", sans-serif;
159 | }
160 | .react-calendar__navigation__prev2-button {
161 | display: none;
162 | }
163 | .react-calendar__navigation__next2-button {
164 | display: none;
165 | }
166 | .react-calendar__navigation {
167 | align-items: center;
168 | }
169 | abbr[title] {
170 | border-bottom: none;
171 | -webkit-text-decoration: unset;
172 | text-decoration: unset;
173 | -webkit-text-decoration: unset;
174 | -webkit-text-decoration: unset;
175 | text-decoration: unset !important;
176 | }
177 | .react-calendar__navigation__prev-button {
178 | background-color: #4318ff !important;
179 | border-radius: 10px;
180 | min-width: 34px !important;
181 | height: 34px !important;
182 | color: white;
183 | }
184 | .react-calendar__navigation__next-button {
185 | background-color: #4318ff !important;
186 | border-radius: 10px;
187 | min-width: 34px !important;
188 | width: 34px !important;
189 | height: 34px !important;
190 | color: white;
191 | }
192 | .react-calendar__navigation__label {
193 | font-weight: 700 !important;
194 | font-size: 18px;
195 | }
196 | .react-calendar__navigation__label:hover,
197 | .react-calendar__navigation__label:focus {
198 | background-color: unset !important;
199 | border-radius: 10px;
200 | }
201 | .react-calendar__tile {
202 | font-size: 12px;
203 | display: flex;
204 | align-items: center;
205 | justify-content: center;
206 | padding: 0px !important;
207 | height: 34px !important;
208 | color: #1b2559;
209 | }
210 | .react-calendar__month-view__weekdays {
211 | background-color: #f4f7fe;
212 | border-radius: 10px;
213 | margin-bottom: 6px;
214 | }
215 | .react-calendar__tile--now,
216 | .react-calendar__tile--now:enabled:hover,
217 | .react-calendar__tile--now:enabled:focus {
218 | background-color: #f4f7fe;
219 | border-radius: 10px;
220 | }
221 | .react-calendar__month-view__days__day--neighboringMonth {
222 | color: #b0bbd5;
223 | }
224 | .react-calendar__tile--active,
225 | .react-calendar__tile--active:enabled:hover,
226 | .react-calendar__tile--active:enabled:focus {
227 | background: #4318ff;
228 | border-radius: 10px;
229 | color: white;
230 | }
231 | .react-calendar__tile--range,
232 | .react-calendar__tile--range:enabled:hover,
233 | .react-calendar__tile--range:enabled:focus {
234 | background: #f4f7fe;
235 | color: #4318ff;
236 | border-radius: 0px;
237 | }
238 | .react-calendar__tile--rangeStart,
239 | .react-calendar__tile--rangeStart:enabled:hover,
240 | .react-calendar__tile--rangeStart:enabled:focus {
241 | background: #4318ff;
242 | border-top-left-radius: 10px;
243 | border-bottom-left-radius: 10px;
244 | color: white;
245 | }
246 | .react-calendar__tile--rangeEnd,
247 | .react-calendar__tile--rangeEnd:enabled:hover,
248 | .react-calendar__tile--rangeEnd:enabled:focus {
249 | background: #4318ff;
250 | border-top-right-radius: 10px;
251 | border-bottom-right-radius: 10px;
252 | color: white;
253 | }
254 |
255 | /* DARK MODE */
256 |
257 | .dark .react-calendar {
258 | border-radius: 30px;
259 | }
260 | .dark .react-calendar__navigation__prev-button {
261 | background-color: #7551ff !important;
262 | }
263 | .dark .react-calendar__navigation__next-button {
264 | background-color: #7551ff !important;
265 | color: white;
266 | }
267 | .dark .react-calendar__tile {
268 | color: white;
269 | }
270 | .dark .react-calendar__tile:enabled:hover,
271 | .dark .react-calendar__tile:enabled:focus {
272 | background-color: rgba(255, 255, 255, 0.1);
273 | }
274 | .dark .react-calendar__month-view__weekdays {
275 | background-color: rgba(255, 255, 255, 0.1);
276 | }
277 | .dark .react-calendar__tile--now,
278 | .dark .react-calendar__tile--now:enabled:hover,
279 | .dark .react-calendar__tile--now:enabled:focus {
280 | background-color: rgba(255, 255, 255, 0.1);
281 | }
282 | .dark .react-calendar__month-view__days__day--neighboringMonth {
283 | color: #b0bbd5;
284 | }
285 | .dark .react-calendar__tile--active,
286 | .dark .react-calendar__tile--active:enabled:hover,
287 | .dark .react-calendar__tile--active:enabled:focus {
288 | background: #7551ff;
289 | color: white;
290 | }
291 | .dark .react-calendar__tile--range,
292 | .dark .react-calendar__tile--range:enabled:hover,
293 | .dark .react-calendar__tile--range:enabled:focus {
294 | background: rgba(255, 255, 255, 0.1);
295 | color: #7551ff;
296 | }
297 | .dark .react-calendar__tile--rangeStart,
298 | .dark .react-calendar__tile--rangeStart:enabled:hover,
299 | .dark .react-calendar__tile--rangeStart:enabled:focus {
300 | background: #7551ff;
301 | color: white;
302 | }
303 | .dark .react-calendar__tile--rangeEnd,
304 | .dark .react-calendar__tile--rangeEnd:enabled:hover,
305 | .dark .react-calendar__tile--rangeEnd:enabled:focus {
306 | background: #7551ff;
307 | color: white;
308 | }
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: 'class',
4 | content: [
5 | './pages/**/*.{js,ts,jsx,tsx,mdx}',
6 | './components/**/*.{js,ts,jsx,tsx,mdx}',
7 | './app/**/*.{js,ts,jsx,tsx,mdx}',
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 | 'gradient-conic':
14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 | },
16 | width: {
17 | "1p": "1%",
18 | "2p": "2%",
19 | "3p": "3%",
20 | "4p": "4%",
21 | "5p": "5%",
22 | "6p": "6%",
23 | "7p": "7%",
24 | "8p": "8%",
25 | "9p": "9%",
26 | "10p": "10%",
27 | "11p": "11%",
28 | "12p": "12%",
29 | "13p": "13%",
30 | "14p": "14%",
31 | "15p": "15%",
32 | "16p": "16%",
33 | "17p": "17%",
34 | "18p": "18%",
35 | "19p": "19%",
36 | "20p": "20%",
37 | "21p": "21%",
38 | "22p": "22%",
39 | "23p": "23%",
40 | "24p": "24%",
41 | "25p": "25%",
42 | "26p": "26%",
43 | "27p": "27%",
44 | "28p": "28%",
45 | "29p": "29%",
46 | "30p": "30%",
47 | "31p": "31%",
48 | "32p": "32%",
49 | "33p": "33%",
50 | "34p": "34%",
51 | "35p": "35%",
52 | "36p": "36%",
53 | "37p": "37%",
54 | "38p": "38%",
55 | "39p": "39%",
56 | "40p": "40%",
57 | "41p": "41%",
58 | "42p": "42%",
59 | "43p": "43%",
60 | "44p": "44%",
61 | "45p": "45%",
62 | "46p": "46%",
63 | "47p": "47%",
64 | "48p": "48%",
65 | "49p": "49%",
66 | "50p": "50%",
67 | "51p": "51%",
68 | "52p": "52%",
69 | "53p": "53%",
70 | "54p": "54%",
71 | "55p": "55%",
72 | "56p": "56%",
73 | "57p": "57%",
74 | "58p": "58%",
75 | "59p": "59%",
76 | "60p": "60%",
77 | "61p": "61%",
78 | "62p": "62%",
79 | "63p": "63%",
80 | "64p": "64%",
81 | "65p": "65%",
82 | "66p": "66%",
83 | "67p": "67%",
84 | "68p": "68%",
85 | "69p": "69%",
86 | "70p": "70%",
87 | "71p": "71%",
88 | "72p": "72%",
89 | "73p": "73%",
90 | "74p": "74%",
91 | "75p": "75%",
92 | "76p": "76%",
93 | "77p": "77%",
94 | "78p": "78%",
95 | "79p": "79%",
96 | "80p": "80%",
97 | "81p": "81%",
98 | "82p": "82%",
99 | "83p": "83%",
100 | "84p": "84%",
101 | "85p": "85%",
102 | "86p": "86%",
103 | "87p": "87%",
104 | "88p": "88%",
105 | "89p": "89%",
106 | "90p": "90%",
107 | "91p": "91%",
108 | "92p": "92%",
109 | "93p": "93%",
110 | "94p": "94%",
111 | "95p": "95%",
112 | "96p": "96%",
113 | "97p": "97%",
114 | "98p": "98%",
115 | "99p": "99%",
116 | },
117 | fontFamily: {
118 | poppins: ["Poppins", "sans-serif"],
119 | dm: ["DM Sans", "sans-serif"],
120 | },
121 | boxShadow: {
122 | "3xl": "14px 17px 40px 4px",
123 | inset: "inset 0px 18px 22px",
124 | darkinset: "0px 4px 4px inset",
125 | },
126 | borderRadius: {
127 | primary: "20px",
128 | },
129 | },
130 | screens: {
131 | sm: "576px",
132 | "sm-max": { max: "576px" },
133 | md: "768px",
134 | "md-max": { max: "768px" },
135 | lg: "992px",
136 | "lg-max": { max: "992px" },
137 | xl: "1200px",
138 | "xl-max": { max: "1200px" },
139 | "2xl": "1320px",
140 | "2xl-max": { max: "1320px" },
141 | "3xl": "1600px",
142 | "3xl-max": { max: "1600px" },
143 | "4xl": "1850px",
144 | "4xl-max": { max: "1850px" },
145 | },
146 | colors: () => ({
147 | white: "#ffffff",
148 | lightPrimary: "#F4F7FE",
149 | blueSecondary: "#4318FF",
150 | brandLinear: "#868CFF",
151 | gray: {
152 | 50: "#f8f9fa",
153 | 100: "#edf2f7",
154 | 200: "#e9ecef",
155 | 300: "#cbd5e0",
156 | 400: "#a0aec0",
157 | 500: "#adb5bd",
158 | 600: "#a3aed0",
159 | 700: "#707eae",
160 | 800: "#252f40",
161 | 900: "#1b2559",
162 | },
163 | navy: {
164 | 50: "#d0dcfb",
165 | 100: "#aac0fe",
166 | 200: "#a3b9f8",
167 | 300: "#728fea",
168 | 400: "#3652ba",
169 | 500: "#1b3bbb",
170 | 600: "#24388a",
171 | 700: "#1B254B",
172 | 800: "#111c44",
173 | 900: "#0b1437",
174 | },
175 | red: {
176 | 50: "#ee5d501a",
177 | 100: "#fee2e2",
178 | 200: "#fecaca",
179 | 300: "#fca5a5",
180 | 400: "#f87171",
181 | 500: "#f53939",
182 | 600: "#ea0606",
183 | 700: "#b91c1c",
184 | 800: "#991b1b",
185 | 900: "#7f1d1d",
186 | },
187 | orange: {
188 | 50: "#fff7ed",
189 | 100: "#ffedd5",
190 | 200: "#fed7aa",
191 | 300: "#fdba74",
192 | 400: "#fb923c",
193 | 500: "#f97316",
194 | 600: "#ea580c",
195 | 700: "#c2410c",
196 | 800: "#9a3412",
197 | 900: "#7c2d12",
198 | },
199 | amber: {
200 | 50: "#fffbeb",
201 | 100: "#fef3c7",
202 | 200: "#fde68a",
203 | 300: "#fcd34d",
204 | 400: "#fbbf24",
205 | 500: "#f59e0b",
206 | 600: "#d97706",
207 | 700: "#b45309",
208 | 800: "#92400e",
209 | 900: "#78350f",
210 | },
211 | yellow: {
212 | 50: "#fefce8",
213 | 100: "#fef9c3",
214 | 200: "#fef08a",
215 | 300: "#fde047",
216 | 400: "#fbcf33",
217 | 500: "#eab308",
218 | 600: "#ca8a04",
219 | 700: "#a16207",
220 | 800: "#854d0e",
221 | 900: "#713f12",
222 | },
223 | lime: {
224 | 50: "#f7fee7",
225 | 100: "#ecfccb",
226 | 200: "#d9f99d",
227 | 300: "#bef264",
228 | 400: "#98ec2d",
229 | 500: "#82d616",
230 | 600: "#65a30d",
231 | 700: "#4d7c0f",
232 | 800: "#3f6212",
233 | 900: "#365314",
234 | },
235 | green: {
236 | 50: "#05cd991a",
237 | 100: "#dcfce7",
238 | 200: "#bbf7d0",
239 | 300: "#86efac",
240 | 400: "#4ade80",
241 | 500: "#22c55e",
242 | 600: "#17ad37",
243 | 700: "#15803d",
244 | 800: "#166534",
245 | 900: "#14532d",
246 | },
247 | teal: {
248 | 50: "#f0fdfa",
249 | 100: "#ccfbf1",
250 | 200: "#99f6e4",
251 | 300: "#5eead4",
252 | 400: "#2dd4bf",
253 | 500: "#14b8a6",
254 | 600: "#0d9488",
255 | 700: "#0f766e",
256 | 800: "#115e59",
257 | 900: "#134e4a",
258 | },
259 | cyan: {
260 | 50: "#ecfeff",
261 | 100: "#cffafe",
262 | 200: "#a5f3fc",
263 | 300: "#67e8f9",
264 | 400: "#21d4fd",
265 | 500: "#17c1e8",
266 | 600: "#0891b2",
267 | 700: "#0e7490",
268 | 800: "#155e75",
269 | 900: "#164e63",
270 | },
271 | blue: {
272 | 50: "#eff6ff",
273 | 100: "#dbeafe",
274 | 200: "#bfdbfe",
275 | 300: "#93c5fd",
276 | 400: "#60a5fa",
277 | 500: "#3b82f6",
278 | 600: "#2152ff",
279 | 700: "#1d4ed8",
280 | 800: "#344e86",
281 | 900: "#00007d",
282 | },
283 | indigo: {
284 | 50: "#eef2ff",
285 | 100: "#e0e7ff",
286 | 200: "#c7d2fe",
287 | 300: "#a5b4fc",
288 | 400: "#818cf8",
289 | 500: "#6366f1",
290 | 600: "#4f46e5",
291 | 700: "#4338ca",
292 | 800: "#3730a3",
293 | 900: "#312e81",
294 | },
295 | purple: {
296 | 50: "#faf5ff",
297 | 100: "#f3e8ff",
298 | 200: "#e9d5ff",
299 | 300: "#d8b4fe",
300 | 400: "#c084fc",
301 | 500: "#a855f7",
302 | 600: "#9333ea",
303 | 700: "#7928ca",
304 | 800: "#6b21a8",
305 | 900: "#581c87",
306 | },
307 | pink: {
308 | 50: "#fdf2f8",
309 | 100: "#fce7f3",
310 | 200: "#fbcfe8",
311 | 300: "#f9a8d4",
312 | 400: "#f472b6",
313 | 500: "#ff0080",
314 | 600: "#db2777",
315 | 700: "#be185d",
316 | 800: "#9d174d",
317 | 900: "#831843",
318 | },
319 | brand: {
320 | 50: "#E9E3FF",
321 | 100: "#C0B8FE",
322 | 200: "#A195FD",
323 | 300: "#8171FC",
324 | 400: "#7551FF",
325 | 500: "#422AFB",
326 | 600: "#3311DB",
327 | 700: "#2111A5",
328 | 800: "#190793",
329 | 900: "#11047A",
330 | },
331 | shadow: {
332 | 500: "rgba(112, 144, 176, 0.08)",
333 | },
334 | }),
335 | },
336 | plugins: [
337 | require("tailwindcss-rtl")
338 | ],
339 | }
340 |
--------------------------------------------------------------------------------
10 | 
21 | 
46 | 
71 |