+ {children}
+
+ Failed to lead app
+ ) : ( + <> +
+
+ );
+};
+
+export default Breadcrumb;
diff --git a/src/components/CardFour.tsx b/src/components/CardFour.tsx
new file mode 100644
index 0000000..c9c0f10
--- /dev/null
+++ b/src/components/CardFour.tsx
@@ -0,0 +1,57 @@
+const CardFour = () => {
+ return (
+ + {pageName} +
+ + +
+
+ );
+};
+
+export default CardFour;
diff --git a/src/components/CardOne.tsx b/src/components/CardOne.tsx
new file mode 100644
index 0000000..4a09228
--- /dev/null
+++ b/src/components/CardOne.tsx
@@ -0,0 +1,53 @@
+const CardOne = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 0.95%
+
+
+ + 3.456 +
+ Total Users +
+
+ );
+};
+
+export default CardOne;
diff --git a/src/components/CardThree.tsx b/src/components/CardThree.tsx
new file mode 100644
index 0000000..ebd1afd
--- /dev/null
+++ b/src/components/CardThree.tsx
@@ -0,0 +1,53 @@
+const CardThree = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 0.43%
+
+
+ + $3.456K +
+ Total views +
+
+ );
+};
+
+export default CardThree;
diff --git a/src/components/CardTwo.tsx b/src/components/CardTwo.tsx
new file mode 100644
index 0000000..397e34e
--- /dev/null
+++ b/src/components/CardTwo.tsx
@@ -0,0 +1,57 @@
+const CardTwo = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ 2.59%
+
+
+ + 2.450 +
+ Total Product +
+
+ );
+};
+
+export default CardTwo;
diff --git a/src/components/ChartFour.tsx b/src/components/ChartFour.tsx
new file mode 100644
index 0000000..7128b3c
--- /dev/null
+++ b/src/components/ChartFour.tsx
@@ -0,0 +1,146 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+interface ChartFourState {
+ series: { data: number[] }[];
+}
+
+const ChartFour: React.FC = () => {
+ const [state, setState] = useState
+
+
+
+
+
+
+
+
+
+ 4.35%
+
+
+ + $45,2K +
+ Total Profit +
+
+ );
+};
+
+export default ChartFour;
diff --git a/src/components/ChartOne.tsx b/src/components/ChartOne.tsx
new file mode 100644
index 0000000..c779e39
--- /dev/null
+++ b/src/components/ChartOne.tsx
@@ -0,0 +1,192 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+ legend: {
+ show: false,
+ position: 'top',
+ horizontalAlign: 'left',
+ },
+ colors: ['#3C50E0', '#80CAEE'],
+ chart: {
+ fontFamily: 'Satoshi, sans-serif',
+ height: 335,
+ type: 'area',
+ dropShadow: {
+ enabled: true,
+ color: '#623CEA14',
+ top: 10,
+ blur: 4,
+ left: 0,
+ opacity: 0.1,
+ },
+
+ toolbar: {
+ show: false,
+ },
+ },
+ responsive: [
+ {
+ breakpoint: 1024,
+ options: {
+ chart: {
+ height: 300,
+ },
+ },
+ },
+ {
+ breakpoint: 1366,
+ options: {
+ chart: {
+ height: 350,
+ },
+ },
+ },
+ ],
+ stroke: {
+ width: [2, 2],
+ curve: 'straight',
+ },
+ // labels: {
+ // show: false,
+ // position: "top",
+ // },
+ grid: {
+ xaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ yaxis: {
+ lines: {
+ show: true,
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ markers: {
+ size: 4,
+ colors: '#fff',
+ strokeColors: ['#3056D3', '#80CAEE'],
+ strokeWidth: 3,
+ strokeOpacity: 0.9,
+ strokeDashArray: 0,
+ fillOpacity: 1,
+ discrete: [],
+ hover: {
+ size: undefined,
+ sizeOffset: 5,
+ },
+ },
+ xaxis: {
+ type: 'category',
+ categories: [
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ ],
+ axisBorder: {
+ show: false,
+ },
+ axisTicks: {
+ show: false,
+ },
+ },
+ yaxis: {
+ title: {
+ style: {
+ fontSize: '0px',
+ },
+ },
+ min: 0,
+ max: 100,
+ },
+};
+
+interface ChartOneState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const ChartOne: React.FC = () => {
+ const [state, setState] = useState
+
+
+ + Visitors Analytics +
+
+
+
+
+
+
+ );
+};
+
+export default ChartOne;
diff --git a/src/components/ChartThree.tsx b/src/components/ChartThree.tsx
new file mode 100644
index 0000000..5d9feea
--- /dev/null
+++ b/src/components/ChartThree.tsx
@@ -0,0 +1,150 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+interface ChartThreeState {
+ series: number[];
+}
+
+const options: ApexOptions = {
+ chart: {
+ type: 'donut',
+ },
+ colors: ['#10B981', '#375E83', '#259AE6', '#FFA70B'],
+ labels: ['40-days-of-Coding', 'HTML-CSS-practice', 'budget_app', 'javascript_practice'],
+ legend: {
+ show: true,
+ position: 'bottom',
+ },
+
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '65%',
+ background: 'transparent',
+ },
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ responsive: [
+ {
+ breakpoint: 2600,
+ options: {
+ chart: {
+ width: 380,
+ },
+ },
+ },
+ {
+ breakpoint: 640,
+ options: {
+ chart: {
+ width: 200,
+ },
+ },
+ },
+ ],
+};
+
+const ChartThree: React.FC = () => {
+ const [state, setState] = useState
+
+
+
+
+
+
+
+
+
+
+
+ Total Revenue
+12.04.2022 - 12.05.2022
+
+
+
+
+
+
+
+ Total Sales
+12.04.2022 - 12.05.2022
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ChartThree;
diff --git a/src/components/ChartTwo.tsx b/src/components/ChartTwo.tsx
new file mode 100644
index 0000000..4b604dd
--- /dev/null
+++ b/src/components/ChartTwo.tsx
@@ -0,0 +1,146 @@
+import { ApexOptions } from 'apexcharts';
+import React, { useState } from 'react';
+import ReactApexChart from 'react-apexcharts';
+
+const options: ApexOptions = {
+ colors: ['#3C50E0', '#80CAEE', '#E4CAE1'],
+ chart: {
+ fontFamily: 'Satoshi, sans-serif',
+ type: 'bar',
+ height: 335,
+ stacked: true,
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+ },
+
+ responsive: [
+ {
+ breakpoint: 1536,
+ options: {
+ plotOptions: {
+ bar: {
+ borderRadius: 0,
+ columnWidth: '25%',
+ },
+ },
+ },
+ },
+ ],
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ borderRadius: 0,
+ columnWidth: '25%',
+ borderRadiusApplication: 'end',
+ borderRadiusWhenStacked: 'last',
+ },
+ },
+ dataLabels: {
+ enabled: false,
+ },
+
+ xaxis: {
+ categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+ },
+ legend: {
+ position: 'top',
+ horizontalAlign: 'left',
+ fontFamily: 'Satoshi',
+ fontWeight: 500,
+ fontSize: '14px',
+
+ markers: {
+ radius: 99,
+ },
+ },
+ fill: {
+ opacity: 1,
+ },
+};
+
+interface ChartTwoState {
+ series: {
+ name: string;
+ data: number[];
+ }[];
+}
+
+const ChartTwo: React.FC = () => {
+ const [state, _setState] = useState
+
+
+
+
+ + Commits Analytics +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + budget_app + 65% +
+
+
+
+
+
+ + HTML-CSS-practice + 29% +
+
+
+
+
+
+ + javascript_practice + 47% +
+
+
+
+
+
+ + 40-days-of-Coding + 12% +
+
+
+ );
+};
+
+export default ChartTwo;
diff --git a/src/components/ChatCard.tsx b/src/components/ChatCard.tsx
new file mode 100644
index 0000000..48e25b4
--- /dev/null
+++ b/src/components/ChatCard.tsx
@@ -0,0 +1,149 @@
+import { Link } from 'react-router-dom';
+import UserOne from '../images/user/user-01.png';
+import UserTwo from '../images/user/user-02.png';
+import UserThree from '../images/user/user-03.png';
+import UserFour from '../images/user/user-04.png';
+import UserFive from '../images/user/user-05.png';
+
+const ChatCard = () => {
+ return (
+
+
+
+
+
+ + Pushes This Week +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ChatCard;
diff --git a/src/components/CheckboxFive.tsx b/src/components/CheckboxFive.tsx
new file mode 100644
index 0000000..a737006
--- /dev/null
+++ b/src/components/CheckboxFive.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+const CheckboxFive = () => {
+ const [isChecked, setIsChecked] = useState+ Chats +
+ +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ + Devid Heilo +
++ + Hello, how are you? + + . 12 min +
+
+ 3
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Henry Fisher
++ I am waiting for you + . 5:54 PM +
+
+ 
+
+
+
+
+
+
+
+
+
+ Wilium Smith
++ Where are you now? + . 10:12 PM +
+
+ 
+
+
+
+
+
+
+
+
+
+ + Henry Deco +
++ + Thank you so much! + + . Sun +
+
+ 2
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Jubin Jack
++ I really love that! + . Oct 23 +
+
+
+
+
+
+
+
+
+
+
+ Wilium Smith
++ Where are you now? + . Sep 20 +
+
+
+
+ );
+};
+
+export default CheckboxFive;
diff --git a/src/components/CheckboxFour.tsx b/src/components/CheckboxFour.tsx
new file mode 100644
index 0000000..c95b8ff
--- /dev/null
+++ b/src/components/CheckboxFour.tsx
@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+const CheckboxFour = () => {
+ const [isChecked, setIsChecked] = useState
+
+
+ );
+};
+
+export default CheckboxFour;
diff --git a/src/components/CheckboxOne.tsx b/src/components/CheckboxOne.tsx
new file mode 100644
index 0000000..76f1ead
--- /dev/null
+++ b/src/components/CheckboxOne.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+const CheckboxOne = () => {
+ const [isChecked, setIsChecked] = useState
+
+
+ );
+};
+
+export default CheckboxOne;
diff --git a/src/components/CheckboxThree.tsx b/src/components/CheckboxThree.tsx
new file mode 100644
index 0000000..be2dd19
--- /dev/null
+++ b/src/components/CheckboxThree.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+const CheckboxThree = () => {
+ const [isChecked, setIsChecked] = useState
+
+
+ );
+};
+
+export default CheckboxThree;
diff --git a/src/components/CheckboxTwo.tsx b/src/components/CheckboxTwo.tsx
new file mode 100644
index 0000000..c9988b3
--- /dev/null
+++ b/src/components/CheckboxTwo.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+const CheckboxTwo = () => {
+ const [isChecked, setIsChecked] = useState
+
+
+ );
+};
+
+export default CheckboxTwo;
diff --git a/src/components/DarkModeSwitcher.tsx b/src/components/DarkModeSwitcher.tsx
new file mode 100644
index 0000000..bdd10a9
--- /dev/null
+++ b/src/components/DarkModeSwitcher.tsx
@@ -0,0 +1,65 @@
+import useColorMode from '../hooks/useColorMode';
+
+const DarkModeSwitcher = () => {
+ const [colorMode, setColorMode] = useColorMode();
+
+ return (
+
+
+ );
+};
+
+export default DataStats;
diff --git a/src/components/DropdownDefault.tsx b/src/components/DropdownDefault.tsx
new file mode 100644
index 0000000..d31fe8a
--- /dev/null
+++ b/src/components/DropdownDefault.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from "react";
+
+const DropdownDefault = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef
+
+
+
+
+
+ + $4,350 +
+Unique Visitors
+
+
+ 18%
+
+
+
+
+
+ + 55.9K +
+Total Pageviews
+
+
+ 25%
+
+
+
+
+
+ + 54% +
+Bounce Rate
+
+
+ 7%
+
+
+
+
+
+ + 2m 56s +
+Visit Duration
+
+
+ 12%
+
+
+
+
+ );
+};
+
+export default DropdownDefault;
diff --git a/src/components/DropdownMessage.tsx b/src/components/DropdownMessage.tsx
new file mode 100644
index 0000000..66d81cf
--- /dev/null
+++ b/src/components/DropdownMessage.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import UserOne from '../images/user/user-01.png';
+import UserTwo from '../images/user/user-02.png';
+import UserThree from '../images/user/user-03.png';
+import UserFour from '../images/user/user-04.png';
+
+const DropdownMessage = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const trigger = useRef setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
+ dropdownOpen === true ? "block" : "hidden"
+ }`}
+ >
+
+
+
+ setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute -right-16 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80 ${
+ dropdownOpen === true ? 'block' : 'hidden'
+ }`}
+ >
+
+ {/* */}
+
+
+
+ Messages
+-
+
-
+
+ ++ +++ +
+ Mariya Desoja +
+I like your confidence 💪
+2min ago
+
+ -
+
+ ++ +++ +
+ Robert Jhon +
+Can you share your offer?
+10min ago
+
+ -
+
+ ++ +++ +
+ Henry Dholi +
+I cam across your profile and...
+1day ago
+
+ -
+
+ ++ +++ +
+ Cody Fisher +
+I’m waiting for you response!
+5days ago
+
+ -
+
+ ++ +++ +
+ Mariya Desoja +
+I like your confidence 💪
+2min ago
+
+
setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute -right-27 mt-2.5 flex h-90 w-75 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark sm:right-0 sm:w-80 ${
+ dropdownOpen === true ? 'block' : 'hidden'
+ }`}
+ >
+
+
+
+
+ Notification
+-
+
-
+
+
+ + Edit your information in a swipe + {' '} + Sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim. +
+ +12 May, 2025
+ +
+ -
+
+
+ + It is a long established fact + {' '} + that a reader will be distracted by the readable. +
+ +24 Feb, 2025
+ +
+ -
+
+
+ + There are many variations + {' '} + of passages of Lorem Ipsum available, but the majority have + suffered +
+ +04 Jan, 2025
+ +
+ -
+
+
+ + There are many variations + {' '} + of passages of Lorem Ipsum available, but the majority have + suffered +
+ +01 Dec, 2024
+ +
+
+ setDropdownOpen(!dropdownOpen)}
+ className="flex items-center gap-4"
+ to="#"
+ >
+
+
+ Test User
+
+ Developer
+
+
+
+ 
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DropdownUser;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..12e2e3f
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,124 @@
+import { Link } from 'react-router-dom';
+import Logo from '../images/logo/logo-icon.svg';
+import DarkModeSwitcher from './DarkModeSwitcher';
+import DropdownMessage from './DropdownMessage';
+import DropdownNotification from './DropdownNotification';
+import DropdownUser from './DropdownUser';
+
+const Header = (props: {
+ sidebarOpen: string | boolean | undefined;
+ setSidebarOpen: (arg0: boolean) => void;
+}) => {
+ return (
+
+
+
+
+
+
+ {/* */}
+ setDropdownOpen(true)}
+ onBlur={() => setDropdownOpen(false)}
+ className={`absolute right-0 mt-4 flex w-62.5 flex-col rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark ${
+ dropdownOpen === true ? 'block' : 'hidden'
+ }`}
+ >
+
+ {/* */}
+ -
+
- + + + My Profile + + +
- + + + My Contacts + + +
- + + + Account Settings + + +
+
+
+ {/* */}
+
+ {/* */}
+
+
+ 
+
+
+
+
+
+
+
+
+
+ -
+ {/* */}
+
+
+ );
+};
+
+export default MapOne;
diff --git a/src/components/MembersCard.tsx b/src/components/MembersCard.tsx
new file mode 100644
index 0000000..bd15b3e
--- /dev/null
+++ b/src/components/MembersCard.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import requests from '../utils/requests';
+import { useEffect, useState } from 'react';
+
+const MembersCard = () => {
+ const [members, setMembers] = useState([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const memberData = await requests.fetchMembers();
+ setMembers(memberData);
+ };
+
+ fetchData();
+ }, []);
+
+ return (
+ + Region labels +
+ +
+
+ );
+};
+
+export default MembersCard;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..353f593
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,683 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import Logo from '../images/logo/logo.svg';
+import SidebarLinkGroup from './SidebarLinkGroup';
+
+interface SidebarProps {
+ sidebarOpen: boolean;
+ setSidebarOpen: (arg: boolean) => void;
+}
+
+const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
+ const location = useLocation();
+ const { pathname } = location;
+
+ const trigger = useRef+ Members +
+ +
+ {members.map((member, key) => (
+
+
+
+ 
+ {/* */}
+
+
+
+
+
+ ))}
+
+
+ + {member.login} +
+
+
+
+ );
+};
+
+export default SwitcherFour;
diff --git a/src/components/SwitcherOne.tsx b/src/components/SwitcherOne.tsx
new file mode 100644
index 0000000..11125f6
--- /dev/null
+++ b/src/components/SwitcherOne.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const SwitcherOne = () => {
+ const [enabled, setEnabled] = useState
+
+
+ );
+};
+
+export default SwitcherOne;
diff --git a/src/components/SwitcherThree.tsx b/src/components/SwitcherThree.tsx
new file mode 100644
index 0000000..91736fd
--- /dev/null
+++ b/src/components/SwitcherThree.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+const SwitcherThree = () => {
+ const [enabled, setEnabled] = useState(false);
+
+ return (
+
+
+
+ );
+};
+
+export default SwitcherThree;
diff --git a/src/components/SwitcherTwo.tsx b/src/components/SwitcherTwo.tsx
new file mode 100644
index 0000000..df8fc40
--- /dev/null
+++ b/src/components/SwitcherTwo.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+const SwitcherTwo = () => {
+ const [enabled, setEnabled] = useState(false);
+
+ return (
+
+
+
+ );
+};
+
+export default SwitcherTwo;
diff --git a/src/components/TableOne.tsx b/src/components/TableOne.tsx
new file mode 100644
index 0000000..ca8238d
--- /dev/null
+++ b/src/components/TableOne.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import githubImg from '../images/brand/brand-03.svg';
+import requests from '../utils/requests';
+
+const TableOne = () => {
+ const [data, setData] = useState<
+ Array<{ repository: Repository; contributors: Contributor[] }>
+ >([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const combinedData = await requests.getRepositoriesAndContributors();
+ setData(combinedData);
+ };
+
+ fetchData();
+ }, []);
+
+ return (
+
+
+ );
+};
+
+export default TableOne;
diff --git a/src/components/TableThree.tsx b/src/components/TableThree.tsx
new file mode 100644
index 0000000..0a9c00c
--- /dev/null
+++ b/src/components/TableThree.tsx
@@ -0,0 +1,370 @@
+const TableThree = () => {
+ return (
+ + Repository +
+ +
+
+
+
+ {data.map((row, key, count) => (
+
+
+ + Repo Name +
+
+
+ + Owner +
+
+
+
+ ))}
+
+
+ + {row.repository.name} +
+
+
+ {row.contributors.map((contributor, i) => (
+
+ 
+
+ ))}
+
+
+
+
+ );
+};
+
+export default TableThree;
diff --git a/src/components/TableTwo.tsx b/src/components/TableTwo.tsx
new file mode 100644
index 0000000..7efb90c
--- /dev/null
+++ b/src/components/TableTwo.tsx
@@ -0,0 +1,129 @@
+import ProductOne from '../images/product/product-01.png';
+import ProductTwo from '../images/product/product-02.png';
+import ProductThree from '../images/product/product-03.png';
+import ProductFour from '../images/product/product-04.png';
+
+const TableTwo = () => {
+ return (
+
+
+
+
+
+ | + Package + | ++ Invoice date + | ++ Status + | ++ Actions + | +
|---|---|---|---|
+ + Free Package ++$0.00 + |
+
+ Jan 13,2023 + |
+
+ + Paid + + |
+
+
+
+
+
+
+ |
+
+ + Standard Package ++$59.00 + |
+
+ Jan 13,2023 + |
+
+ + Paid + + |
+
+
+
+
+
+
+ |
+
+ + Business Package ++$99.00 + |
+
+ Jan 13,2023 + |
+
+ + Unpaid + + |
+
+
+
+
+
+
+ |
+
+ + Standard Package ++$59.00 + |
+
+ Jan 13,2023 + |
+
+ + Pending + + |
+
+
+
+
+
+
+ |
+
+
+ );
+};
+
+export default TableTwo;
diff --git a/src/components/TaskHeader.tsx b/src/components/TaskHeader.tsx
new file mode 100644
index 0000000..c4df4bb
--- /dev/null
+++ b/src/components/TaskHeader.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+import userSeven from '../images/user/user-07.png';
+import userEight from '../images/user/user-08.png';
+import userNine from '../images/user/user-09.png';
+import userTen from '../images/user/user-10.png';
+
+const TaskHeader = () => {
+ const [popupOpen, setPopupOpen] = useState(false);
+
+ const trigger = useRef
+
+
+ + Top Products +
+
+
+
+
+
+ Product Name
+
+
+ Category
+
+
+ Price
+
+
+ Sold
+
+
+ Profit
+
+
+
+
+
+
+
+ 
+
+ + Apple Watch Series 7 +
+
+
+ Electronics
+
+
+ $269
+
+
+ 22
+
+
+ $45
+
+
+
+
+
+
+
+ 
+
+ Macbook Pro M1
+
+
+ Electronics
+
+
+ $546
+
+
+ 34
+
+
+ $125
+
+
+
+
+
+
+
+ 
+
+ + Dell Inspiron 15 +
+
+
+ Electronics
+
+
+ $443
+
+
+ 64
+
+
+ $247
+
+
+
+
+
+
+
+ 
+
+ HP Probook 450
+
+
+ Electronics
+
+
+ $499
+
+
+ 72
+
+
+ $103
+
+
+ );
+};
+
+export default TaskHeader;
diff --git a/src/fonts/Satoshi-Black.eot b/src/fonts/Satoshi-Black.eot
new file mode 100644
index 0000000..11747f3
Binary files /dev/null and b/src/fonts/Satoshi-Black.eot differ
diff --git a/src/fonts/Satoshi-Black.ttf b/src/fonts/Satoshi-Black.ttf
new file mode 100644
index 0000000..62015ac
Binary files /dev/null and b/src/fonts/Satoshi-Black.ttf differ
diff --git a/src/fonts/Satoshi-Black.woff b/src/fonts/Satoshi-Black.woff
new file mode 100644
index 0000000..a6bee36
Binary files /dev/null and b/src/fonts/Satoshi-Black.woff differ
diff --git a/src/fonts/Satoshi-Black.woff2 b/src/fonts/Satoshi-Black.woff2
new file mode 100644
index 0000000..64492d5
Binary files /dev/null and b/src/fonts/Satoshi-Black.woff2 differ
diff --git a/src/fonts/Satoshi-BlackItalic.eot b/src/fonts/Satoshi-BlackItalic.eot
new file mode 100644
index 0000000..de2edbb
Binary files /dev/null and b/src/fonts/Satoshi-BlackItalic.eot differ
diff --git a/src/fonts/Satoshi-BlackItalic.ttf b/src/fonts/Satoshi-BlackItalic.ttf
new file mode 100644
index 0000000..74410b9
Binary files /dev/null and b/src/fonts/Satoshi-BlackItalic.ttf differ
diff --git a/src/fonts/Satoshi-BlackItalic.woff b/src/fonts/Satoshi-BlackItalic.woff
new file mode 100644
index 0000000..0e07e1c
Binary files /dev/null and b/src/fonts/Satoshi-BlackItalic.woff differ
diff --git a/src/fonts/Satoshi-BlackItalic.woff2 b/src/fonts/Satoshi-BlackItalic.woff2
new file mode 100644
index 0000000..9d5c911
Binary files /dev/null and b/src/fonts/Satoshi-BlackItalic.woff2 differ
diff --git a/src/fonts/Satoshi-Bold.eot b/src/fonts/Satoshi-Bold.eot
new file mode 100644
index 0000000..390ae25
Binary files /dev/null and b/src/fonts/Satoshi-Bold.eot differ
diff --git a/src/fonts/Satoshi-Bold.ttf b/src/fonts/Satoshi-Bold.ttf
new file mode 100644
index 0000000..00bc985
Binary files /dev/null and b/src/fonts/Satoshi-Bold.ttf differ
diff --git a/src/fonts/Satoshi-Bold.woff b/src/fonts/Satoshi-Bold.woff
new file mode 100644
index 0000000..bba8257
Binary files /dev/null and b/src/fonts/Satoshi-Bold.woff differ
diff --git a/src/fonts/Satoshi-Bold.woff2 b/src/fonts/Satoshi-Bold.woff2
new file mode 100644
index 0000000..0a8db7a
Binary files /dev/null and b/src/fonts/Satoshi-Bold.woff2 differ
diff --git a/src/fonts/Satoshi-BoldItalic.eot b/src/fonts/Satoshi-BoldItalic.eot
new file mode 100644
index 0000000..426be2a
Binary files /dev/null and b/src/fonts/Satoshi-BoldItalic.eot differ
diff --git a/src/fonts/Satoshi-BoldItalic.ttf b/src/fonts/Satoshi-BoldItalic.ttf
new file mode 100644
index 0000000..24f012c
Binary files /dev/null and b/src/fonts/Satoshi-BoldItalic.ttf differ
diff --git a/src/fonts/Satoshi-BoldItalic.woff b/src/fonts/Satoshi-BoldItalic.woff
new file mode 100644
index 0000000..8bcb7a6
Binary files /dev/null and b/src/fonts/Satoshi-BoldItalic.woff differ
diff --git a/src/fonts/Satoshi-BoldItalic.woff2 b/src/fonts/Satoshi-BoldItalic.woff2
new file mode 100644
index 0000000..225527f
Binary files /dev/null and b/src/fonts/Satoshi-BoldItalic.woff2 differ
diff --git a/src/fonts/Satoshi-Italic.eot b/src/fonts/Satoshi-Italic.eot
new file mode 100644
index 0000000..64039a8
Binary files /dev/null and b/src/fonts/Satoshi-Italic.eot differ
diff --git a/src/fonts/Satoshi-Italic.ttf b/src/fonts/Satoshi-Italic.ttf
new file mode 100644
index 0000000..c214f4f
Binary files /dev/null and b/src/fonts/Satoshi-Italic.ttf differ
diff --git a/src/fonts/Satoshi-Italic.woff b/src/fonts/Satoshi-Italic.woff
new file mode 100644
index 0000000..edd4d93
Binary files /dev/null and b/src/fonts/Satoshi-Italic.woff differ
diff --git a/src/fonts/Satoshi-Italic.woff2 b/src/fonts/Satoshi-Italic.woff2
new file mode 100644
index 0000000..8b98599
Binary files /dev/null and b/src/fonts/Satoshi-Italic.woff2 differ
diff --git a/src/fonts/Satoshi-Light.eot b/src/fonts/Satoshi-Light.eot
new file mode 100644
index 0000000..d8fcacc
Binary files /dev/null and b/src/fonts/Satoshi-Light.eot differ
diff --git a/src/fonts/Satoshi-Light.ttf b/src/fonts/Satoshi-Light.ttf
new file mode 100644
index 0000000..b41a2d4
Binary files /dev/null and b/src/fonts/Satoshi-Light.ttf differ
diff --git a/src/fonts/Satoshi-Light.woff b/src/fonts/Satoshi-Light.woff
new file mode 100644
index 0000000..8f05e4e
Binary files /dev/null and b/src/fonts/Satoshi-Light.woff differ
diff --git a/src/fonts/Satoshi-Light.woff2 b/src/fonts/Satoshi-Light.woff2
new file mode 100644
index 0000000..cf18cd4
Binary files /dev/null and b/src/fonts/Satoshi-Light.woff2 differ
diff --git a/src/fonts/Satoshi-LightItalic.eot b/src/fonts/Satoshi-LightItalic.eot
new file mode 100644
index 0000000..e34a0df
Binary files /dev/null and b/src/fonts/Satoshi-LightItalic.eot differ
diff --git a/src/fonts/Satoshi-LightItalic.ttf b/src/fonts/Satoshi-LightItalic.ttf
new file mode 100644
index 0000000..08f5db5
Binary files /dev/null and b/src/fonts/Satoshi-LightItalic.ttf differ
diff --git a/src/fonts/Satoshi-LightItalic.woff b/src/fonts/Satoshi-LightItalic.woff
new file mode 100644
index 0000000..a03a50d
Binary files /dev/null and b/src/fonts/Satoshi-LightItalic.woff differ
diff --git a/src/fonts/Satoshi-LightItalic.woff2 b/src/fonts/Satoshi-LightItalic.woff2
new file mode 100644
index 0000000..6bd15ad
Binary files /dev/null and b/src/fonts/Satoshi-LightItalic.woff2 differ
diff --git a/src/fonts/Satoshi-Medium.eot b/src/fonts/Satoshi-Medium.eot
new file mode 100644
index 0000000..83cacec
Binary files /dev/null and b/src/fonts/Satoshi-Medium.eot differ
diff --git a/src/fonts/Satoshi-Medium.ttf b/src/fonts/Satoshi-Medium.ttf
new file mode 100644
index 0000000..ab149b7
Binary files /dev/null and b/src/fonts/Satoshi-Medium.ttf differ
diff --git a/src/fonts/Satoshi-Medium.woff b/src/fonts/Satoshi-Medium.woff
new file mode 100644
index 0000000..cef3226
Binary files /dev/null and b/src/fonts/Satoshi-Medium.woff differ
diff --git a/src/fonts/Satoshi-Medium.woff2 b/src/fonts/Satoshi-Medium.woff2
new file mode 100644
index 0000000..ffd0ac9
Binary files /dev/null and b/src/fonts/Satoshi-Medium.woff2 differ
diff --git a/src/fonts/Satoshi-MediumItalic.eot b/src/fonts/Satoshi-MediumItalic.eot
new file mode 100644
index 0000000..25d229a
Binary files /dev/null and b/src/fonts/Satoshi-MediumItalic.eot differ
diff --git a/src/fonts/Satoshi-MediumItalic.ttf b/src/fonts/Satoshi-MediumItalic.ttf
new file mode 100644
index 0000000..387f278
Binary files /dev/null and b/src/fonts/Satoshi-MediumItalic.ttf differ
diff --git a/src/fonts/Satoshi-MediumItalic.woff b/src/fonts/Satoshi-MediumItalic.woff
new file mode 100644
index 0000000..46d8995
Binary files /dev/null and b/src/fonts/Satoshi-MediumItalic.woff differ
diff --git a/src/fonts/Satoshi-MediumItalic.woff2 b/src/fonts/Satoshi-MediumItalic.woff2
new file mode 100644
index 0000000..212adc9
Binary files /dev/null and b/src/fonts/Satoshi-MediumItalic.woff2 differ
diff --git a/src/fonts/Satoshi-Regular.eot b/src/fonts/Satoshi-Regular.eot
new file mode 100644
index 0000000..452666f
Binary files /dev/null and b/src/fonts/Satoshi-Regular.eot differ
diff --git a/src/fonts/Satoshi-Regular.ttf b/src/fonts/Satoshi-Regular.ttf
new file mode 100644
index 0000000..fe85cd6
Binary files /dev/null and b/src/fonts/Satoshi-Regular.ttf differ
diff --git a/src/fonts/Satoshi-Regular.woff b/src/fonts/Satoshi-Regular.woff
new file mode 100644
index 0000000..03ac195
Binary files /dev/null and b/src/fonts/Satoshi-Regular.woff differ
diff --git a/src/fonts/Satoshi-Regular.woff2 b/src/fonts/Satoshi-Regular.woff2
new file mode 100644
index 0000000..81c40ab
Binary files /dev/null and b/src/fonts/Satoshi-Regular.woff2 differ
diff --git a/src/fonts/Satoshi-Variable.eot b/src/fonts/Satoshi-Variable.eot
new file mode 100644
index 0000000..f42624e
Binary files /dev/null and b/src/fonts/Satoshi-Variable.eot differ
diff --git a/src/fonts/Satoshi-Variable.ttf b/src/fonts/Satoshi-Variable.ttf
new file mode 100644
index 0000000..976e85c
Binary files /dev/null and b/src/fonts/Satoshi-Variable.ttf differ
diff --git a/src/fonts/Satoshi-Variable.woff b/src/fonts/Satoshi-Variable.woff
new file mode 100644
index 0000000..f8dcd1d
Binary files /dev/null and b/src/fonts/Satoshi-Variable.woff differ
diff --git a/src/fonts/Satoshi-Variable.woff2 b/src/fonts/Satoshi-Variable.woff2
new file mode 100644
index 0000000..b00e833
Binary files /dev/null and b/src/fonts/Satoshi-Variable.woff2 differ
diff --git a/src/fonts/Satoshi-VariableItalic.eot b/src/fonts/Satoshi-VariableItalic.eot
new file mode 100644
index 0000000..5f4554a
Binary files /dev/null and b/src/fonts/Satoshi-VariableItalic.eot differ
diff --git a/src/fonts/Satoshi-VariableItalic.ttf b/src/fonts/Satoshi-VariableItalic.ttf
new file mode 100644
index 0000000..4c2677c
Binary files /dev/null and b/src/fonts/Satoshi-VariableItalic.ttf differ
diff --git a/src/fonts/Satoshi-VariableItalic.woff b/src/fonts/Satoshi-VariableItalic.woff
new file mode 100644
index 0000000..3fe029e
Binary files /dev/null and b/src/fonts/Satoshi-VariableItalic.woff differ
diff --git a/src/fonts/Satoshi-VariableItalic.woff2 b/src/fonts/Satoshi-VariableItalic.woff2
new file mode 100644
index 0000000..e7ab3a0
Binary files /dev/null and b/src/fonts/Satoshi-VariableItalic.woff2 differ
diff --git a/src/globalTypes.d.ts b/src/globalTypes.d.ts
new file mode 100644
index 0000000..03d8f93
--- /dev/null
+++ b/src/globalTypes.d.ts
@@ -0,0 +1,9 @@
+declare interface Repository {
+ name: string;
+ contributors_url: string;
+}
+
+interface Contributor {
+ login: string;
+ contributions: number;
+ }
\ No newline at end of file
diff --git a/src/hooks/useColorMode.tsx b/src/hooks/useColorMode.tsx
new file mode 100644
index 0000000..02eaf8e
--- /dev/null
+++ b/src/hooks/useColorMode.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import useLocalStorage from './useLocalStorage';
+
+const useColorMode = () => {
+ const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light');
+
+ useEffect(() => {
+ const className = 'dark';
+ const bodyClass = window.document.body.classList;
+
+ colorMode === 'dark'
+ ? bodyClass.add(className)
+ : bodyClass.remove(className);
+ }, [colorMode]);
+
+ return [colorMode, setColorMode];
+};
+
+export default useColorMode;
diff --git a/src/hooks/useLocalStorage.tsx b/src/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..68492a8
--- /dev/null
+++ b/src/hooks/useLocalStorage.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+type SetValue
+
+ + Tasks +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+ );
+};
+
+export default DefaultLayout;
diff --git a/src/lib.d.ts b/src/lib.d.ts
new file mode 100644
index 0000000..091d25e
--- /dev/null
+++ b/src/lib.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any;
+ export default content;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..d745305
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter as Router } from 'react-router-dom';
+import App from './App';
+import './index.css';
+import './satoshi.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+
+ {/* */}
+
+ {/* */}
+
+ {/* */}
+
+
+ {/* */}
+
+ {/* */}
+
+
+
+ );
+};
+
+export default SignIn;
diff --git a/src/pages/Authentication/SignUp.tsx b/src/pages/Authentication/SignUp.tsx
new file mode 100644
index 0000000..05e43db
--- /dev/null
+++ b/src/pages/Authentication/SignUp.tsx
@@ -0,0 +1,356 @@
+import { Link } from 'react-router-dom';
+import Breadcrumb from '../../components/Breadcrumb';
+import LogoDark from '../../images/logo/logo-dark.svg';
+import Logo from '../../images/logo/logo.svg';
+import DefaultLayout from '../../layout/DefaultLayout';
+
+const SignUp = () => {
+ return (
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit + suspendisse. +
+ + + + +
+
+
+ Start for free
+
+ + Sign In to TailAdmin +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit + suspendisse. +
+ + + + +
+
+
+ Start for free
+
+ + Sign Up to TailAdmin +
+ + +
+
+
+
+
+ {/* */}
+ | + Sunday + Sun + | ++ Monday + Mon + | ++ Tuesday + Tue + | ++ Wednesday + Wed + | ++ Thursday + Thur + | ++ Friday + Fri + | ++ Saturday + Sat + | +
|---|---|---|---|---|---|---|
|
+
+ 1
+
+
+
+ More
+
+
+
+
+ Redesign Website
+
+
+ 1 Dec - 2 Dec
+
+
+ |
+ + + 2 + + | ++ + 3 + + | ++ + 4 + + | ++ + 5 + + | ++ + 6 + + | ++ + 7 + + | +
| + + 8 + + | ++ + 9 + + | ++ + 10 + + | ++ + 11 + + | ++ + 12 + + | ++ + 13 + + | ++ + 14 + + | +
| + + 15 + + | ++ + 16 + + | ++ + 17 + + | ++ + 18 + + | ++ + 19 + + | ++ + 20 + + | ++ + 21 + + | +
| + + 22 + + | ++ + 23 + + | ++ + 24 + + | +
+
+ 25
+
+
+
+ More
+
+
+
+
+ App Design
+
+
+ 25 Dec - 27 Dec
+
+
+ |
+ + + 26 + + | ++ + 27 + + | ++ + 28 + + | +
| + + 29 + + | ++ + 30 + + | ++ + 31 + + | ++ + 1 + + | ++ + 2 + + | ++ + 3 + + | ++ + 4 + + | +
+
+
+
+
+
*/}
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+
+
+ + Input Fields +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ + Toggle switch input +
+
+
+
+
+
+ {/* */}
+
+
+ + Time and date +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + File upload +
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+ {/* */}
+
+
+ + Textarea Fields +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+ + Checkbox and radio +
+
+
+
+
+
+
+ + Select input +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Design
+
+
+
+
+
+ Development
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+
+ + Contact Form +
+
+ {/* */}
+
+
+
+
+ {/* */}
+
+
+
+ + Sign In Form +
+
+
+
+
+
+ + Sign Up Form +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ + Danish Heilium +
+Ui/Ux Designer
+
+
+
+
+
+ 259
+
+ Posts
+
+
+
+ 129K
+
+ Followers
+
+
+
+ 2K
+
+ Following
+
+
+
+
+
+ + About Me +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque posuere fermentum urna, eu condimentum mauris + tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus + ultricies. Sed vel aliquet libero. Nunc a augue fermentum, + pharetra ligula sed, aliquam lacus. +
+
+
+
+
+
+
+
+
+
+
+ + Personal Information +
+
+
+
+
+
+
+
+
+
+ + Your Photo +
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+
+
+
+
+ + Attention needed +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when +
+
+
+ {/* */}
+
+
+
+
+
+ + Message Sent Successfully +
++ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. +
+
+
+
+
+
+
+
+ + There were 1 errors with your submission +
+-
+
- + Lorem Ipsum is simply dummy text of the printing + +
+
+
+ {/* */}
+
+
+
+ + Normal Button +
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+ Button
+
+
+
+
+
+
+
+ + Button With Icon +
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+
+
+
+
+ Button With Icon
+
+
+