first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,175 @@
|
||||
import React, { useState } from "react";
|
||||
import SellAnalysChart from "../Charts/SellAnalysChart";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
|
||||
export default function SellAnaliseStatics() {
|
||||
const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
|
||||
const [currencyDataLvl, setCurrencyDataLvl] = useState([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
]);
|
||||
const [filterDataSet, setFilterDataSet] = useState([
|
||||
0,
|
||||
51,
|
||||
9,
|
||||
"",
|
||||
31,
|
||||
6,
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
71,
|
||||
51,
|
||||
60,
|
||||
5,
|
||||
51,
|
||||
21,
|
||||
]);
|
||||
const dataSetHandler = (value) => {
|
||||
if (value === "Last Month") {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
"Jan 16",
|
||||
"Jan 17",
|
||||
"Jan 18",
|
||||
"Jan 19",
|
||||
"Jan 20",
|
||||
"Jan 21",
|
||||
"Jan 22",
|
||||
"Jan 23",
|
||||
"Jan 24",
|
||||
"Jan 25",
|
||||
"Jan 26",
|
||||
"Jan 27",
|
||||
"Jan 28",
|
||||
"Jan 29",
|
||||
"Jan 30",
|
||||
]);
|
||||
setFilterDataSet([
|
||||
10,
|
||||
30,
|
||||
20,
|
||||
40,
|
||||
13,
|
||||
51,
|
||||
9,
|
||||
"",
|
||||
31,
|
||||
6,
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
71,
|
||||
51,
|
||||
60,
|
||||
5,
|
||||
51,
|
||||
21,
|
||||
0,
|
||||
51,
|
||||
9,
|
||||
"",
|
||||
31,
|
||||
6,
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
71,
|
||||
51,
|
||||
]);
|
||||
} else if (value === "Last 7 days") {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
]);
|
||||
setFilterDataSet([15, 35, 10, 20, 71, 51, 60]);
|
||||
} else {
|
||||
setCurrencyDataLvl([
|
||||
"Jan 1",
|
||||
"Jan 2",
|
||||
"Jan 3",
|
||||
"Jan 4",
|
||||
"Jan 5",
|
||||
"Jan 6",
|
||||
"Jan 7",
|
||||
"Jan 8",
|
||||
"Jan 9",
|
||||
"Jan 10",
|
||||
"Jan 11",
|
||||
"Jan 12",
|
||||
"Jan 13",
|
||||
"Jan 14",
|
||||
"Jan 15",
|
||||
]);
|
||||
setFilterDataSet([
|
||||
0,
|
||||
51,
|
||||
9,
|
||||
"",
|
||||
31,
|
||||
6,
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
71,
|
||||
51,
|
||||
60,
|
||||
5,
|
||||
51,
|
||||
21,
|
||||
]);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="sell-analise w-full md:p-8 p-4 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow mb-11">
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div className="content flex justify-between items-center mb-5">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Sell Analize
|
||||
</h1>
|
||||
</div>
|
||||
<SelectBox datas={filterDatas} action={dataSetHandler} />
|
||||
</div>
|
||||
<div>
|
||||
<SellAnalysChart
|
||||
dataLvls={currencyDataLvl}
|
||||
datasets={filterDataSet}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,718 @@
|
||||
import React, { useState } from "react";
|
||||
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
||||
import SelectBox from "../Helpers/SelectBox";
|
||||
|
||||
export default function SellProductHistoryTable({ className }) {
|
||||
const filterCategories = ["All Categories", "Explore", "Featured"];
|
||||
const [selectedCategory, setCategory] = useState(filterCategories[0]);
|
||||
return (
|
||||
<div
|
||||
className={`sell-product-history-table update-table w-full md:p-8 p-4 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="header w-full sm:flex justify-between items-center mb-5">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Products History
|
||||
</h1>
|
||||
</div>
|
||||
<SelectBox
|
||||
action={setCategory}
|
||||
datas={filterCategories}
|
||||
className="Update-table-dropdown"
|
||||
contentBodyClasses="w-auto min-w-max"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
<tbody>
|
||||
<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">
|
||||
<td className="py-4">List</td>
|
||||
<td className="py-4">Publish date</td>
|
||||
<td className="py-4">Product Name</td>
|
||||
<td className="py-4 text-center">type</td>
|
||||
<td className="py-4 text-center">Sell</td>
|
||||
<td className="py-4 text-center">Tendered</td>
|
||||
<td className="py-4 text-center">Earnings</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
01
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
02
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
03
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
04
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{selectedCategory === "All Categories" ? (
|
||||
<>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
01
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
02
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
03
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
04
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
) : selectedCategory === "Explore" ? (
|
||||
<>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
01
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
02
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
03
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
03
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="hover:bg-gray-50 ">
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-xl tracking-wide font-bold text-dark-gray dark:text-white">
|
||||
04
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start py-4 px-2">
|
||||
<span className="text-base text-thin-light-gray whitespace-nowrap">
|
||||
2 Hours 1 min 30s
|
||||
</span>
|
||||
</td>
|
||||
<td className=" py-4 px-2">
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
|
||||
<img
|
||||
src={dataImage1}
|
||||
alt="data"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
Mullican Computer Joy
|
||||
</h1>
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Owned by <span className="text-purple">Xoeyam</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-sm text-white bg-light-green rounded-full px-2.5 py-1.5">
|
||||
Art
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
343
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center py-4 px-2">
|
||||
<span className="text-base text-dark-gray dark:text-white font-medium">
|
||||
1.323ETH
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
import React from "react";
|
||||
import country1 from "../../assets/images/country-1.png";
|
||||
import country2 from "../../assets/images/country-2.png";
|
||||
import country3 from "../../assets/images/country-3.png";
|
||||
import SellMonthStatics from "../Charts/SellMonthStatics";
|
||||
import SellHistoryWidget from "../Home/SellHistoryWidget";
|
||||
import CurrentBalanceWidget from "../MyWallet/CurrentBalanceWidget";
|
||||
import Layout from "../Partials/Layout";
|
||||
import SellAnaliseStatics from "./SellAnaliseStatics";
|
||||
import SellProductHistoryTable from "./SellProductHistoryTable";
|
||||
|
||||
export default function Sell() {
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<div className="sell-page-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="current_balance-bit-sell-widget w-full lg:h-[436px] mb-11">
|
||||
<div className="w-full h-full lg:flex lg:space-x-7">
|
||||
{/* style={{ width: "calc(50% - 15px)" }} */}
|
||||
<div className="lg:w-2/3 h-full mb-10 lg:mb-0">
|
||||
<CurrentBalanceWidget />
|
||||
</div>
|
||||
<div className="lg:w-1/3 h-full mb-10 lg:mb-0">
|
||||
<div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
|
||||
{/* heading */}
|
||||
<div className="w-full h-16 bg-gold flex pl-7 items-center">
|
||||
<h1 className="text-xl font-medium tracking-wide text-white">
|
||||
Bits this Month
|
||||
</h1>
|
||||
</div>
|
||||
<div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white ">
|
||||
<div className="w-full px-5 pt-5">
|
||||
<p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
769.44 ETH
|
||||
</p>
|
||||
<p className="text-thin-light-gray text-18 flex items-center">
|
||||
<span>($949374.94)</span>
|
||||
<span className="ml-2 text-sm text-light-red">
|
||||
-224.75 (11.5%)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
|
||||
<SellMonthStatics setRGBColor="rgba(242, 153, 74)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/3 h-full mb-10 lg:mb-0">
|
||||
<div className="sell-month-analytic-card w-full h-full rounded-xl overflow-hidden relative">
|
||||
{/* heading */}
|
||||
<div className="w-full h-16 bg-pink flex pl-7 items-center">
|
||||
<h1 className="text-xl font-medium tracking-wide text-white">
|
||||
Sell Earing this Month
|
||||
</h1>
|
||||
</div>
|
||||
<div className="w-full h-full flex flex-col justify-between bg-white dark:bg-dark-white ">
|
||||
<div className="w-full px-5 pt-5">
|
||||
<p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
769.44 ETH
|
||||
</p>
|
||||
<p className="text-thin-light-gray text-18 flex items-center">
|
||||
<span>($949374.94)</span>
|
||||
<span className="ml-2 text-sm text-light-green">
|
||||
224.75 (11.5%)
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="month-statics w-full lg:h-[205px] h-full lg:absolute bottom-0 left-0 transform scale-[1.08]">
|
||||
<SellMonthStatics setRGBColor="rgba(245, 57, 248, 1)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SellAnaliseStatics />
|
||||
<div className="sell-history-top-sale-country-widget w-full mb-11">
|
||||
<div className="lg:flex lg:space-x-9">
|
||||
<div className="lg:w-1/2 mb-10 lg:mb-0">
|
||||
<SellHistoryWidget />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="top-saller-country-widget w-full h-full bg-white dark:bg-dark-white p-8 rounded-2xl section-shadow flex flex-col justify-between">
|
||||
<div>
|
||||
{/* heading */}
|
||||
<div className="content flex justify-between items-center mb-5">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Top Sell Country
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex space-x-1 items-center">
|
||||
<span className="text-sm text-thin-light-gray">
|
||||
Last 7 days
|
||||
</span>
|
||||
<span>
|
||||
<svg
|
||||
width="13"
|
||||
height="6"
|
||||
viewBox="0 0 13 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
opacity="0.7"
|
||||
d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"
|
||||
fill="#374557"
|
||||
fillOpacity="0.6"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-content h-full">
|
||||
<ul className="flex flex-col space-y-[22px] h-full">
|
||||
<li className="country-list-item flex justify-between">
|
||||
<div className="flex space-x-4 items-center">
|
||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
||||
<img
|
||||
src={country1}
|
||||
alt=""
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-18 text-dark-gray dark:text-white">
|
||||
Netherlands
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
3.435ETH
|
||||
</h1>
|
||||
</div>
|
||||
</li>
|
||||
<li className="country-list-item flex justify-between">
|
||||
<div className="flex space-x-4 items-center">
|
||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
||||
<img
|
||||
src={country2}
|
||||
alt=""
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-18 text-dark-gray dark:text-white">
|
||||
Netherlands
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
3.435ETH
|
||||
</h1>
|
||||
</div>
|
||||
</li>
|
||||
<li className="country-list-item flex justify-between">
|
||||
<div className="flex space-x-4 items-center">
|
||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
||||
<img
|
||||
src={country3}
|
||||
alt=""
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-18 text-dark-gray dark:text-white">
|
||||
Netherlands
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
3.435ETH
|
||||
</h1>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<p className="text-18 tracking-wide text-purple">
|
||||
See All
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SellProductHistoryTable />
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user