mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

product table added

Browse Source
master
mahdi 3 years ago
parent 55d7ed0204
commit f038bbac80
4 changed files with 157 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/App.js
  2. 4
      src/components/Table/Design1/arrow-down.svg
  3. 4
      src/components/Table/Design1/arrow-up.svg
  4. 145
      src/components/Table/Design1/index.js

6
src/App.js
Unescape View File

@ -42,6 +42,7 @@ import Switch from "./components/Switch";
import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
import Design1 from "./components/ProductSalesAmount/Design1";
import Design2 from "./components/ProductSalesAmount/Design2";
import TableDesign1 from "./components/Table/Design1";
function App() {
return (
@ -80,10 +81,11 @@ function App() {
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SidebarDesign2 /> */}
<SimpleBarChart />
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart/> */}
{/* <Design1/> */}
<Design2/>
{/* <Design2/> */}
<TableDesign1 />
</div>
</Provider>
);

4
src/components/Table/Design1/arrow-down.svg
Unescape View File

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="16.494" height="16.494" viewBox="0 0 16.494 16.494">
<path id="Vector" d="M8.879,0H.741A.74.74,0,0,0,.219,1.265l3.56,3.56a1.464,1.464,0,0,0,2.069,0L7.2,3.471,9.408,1.265A.744.744,0,0,0,8.879,0Z" transform="translate(3.437 5.622)" fill="#d9d9d9"/>
<path id="Vector-2" data-name="Vector" d="M0,0H16.494V16.494H0Z" transform="translate(16.494 16.494) rotate(180)" fill="none" opacity="0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 461 B

4
src/components/Table/Design1/arrow-up.svg
Unescape View File

@ -0,0 +1,4 @@
<svg id="arrow-up" xmlns="http://www.w3.org/2000/svg" width="16.494" height="16.494" viewBox="0 0 16.494 16.494">
<path id="Vector" d="M9.4,3.988,7.193,1.782,5.846.428a1.464,1.464,0,0,0-2.069,0L.218,3.988A.742.742,0,0,0,.74,5.252H8.877A.74.74,0,0,0,9.4,3.988Z" transform="translate(3.439 5.62)" fill="#65a9ff"/>
<path id="Vector-2" data-name="Vector" d="M0,0H16.494V16.494H0Z" transform="translate(16.494 16.494) rotate(180)" fill="none" opacity="0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

145
src/components/Table/Design1/index.js
Unescape View File

@ -0,0 +1,145 @@
import React from "react";
import arrowDown from "./arrow-down.svg";
import arrowUp from "./arrow-up.svg";
const TableDesign1 = ({ tableItems, tableSubItems }) => {
return (
<section className="w-10/12 mx-auto my-10">
<div className="flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
{tableItems.map((tableItem, index) => (
<tr className="">
<th
scope="col"
className="text-blue-400 font-light text-right text-sm p-4"
>
{tableItem.title}
</th>
<th
scope=""
className="text-blue-400 font-light text-right text-sm p-4 "
>
<div className="flex flex-row items-center">
{tableItem.status}
<div className="mr-3 flex flex-col">
<img
src={arrowUp}
alt=""
className="w-4 cursor-pointer"
/>
<img
src={arrowDown}
alt=""
className="w-4 cursor-pointer"
/>
</div>
</div>
</th>
<th
scope="col"
className="text-blue-400 font-light text-right text-sm p-4"
>
<div className="flex flex-row items-center">
{tableItem.date}
<div className="mr-3 flex flex-col">
<img
src={arrowUp}
alt=""
className="w-4 cursor-pointer"
/>
<img
src={arrowDown}
alt=""
className="w-4 cursor-pointer"
/>
</div>
</div>
</th>
<th
scope="col"
className="text-blue-400 font-light text-right text-sm p-4"
>
<div className="flex flex-row items-center">
{tableItem.payedPrice}
<div className="mr-3 flex flex-col">
<img
src={arrowUp}
alt=""
className="w-4 cursor-pointer"
/>
<img
src={arrowDown}
alt=""
className="w-4 cursor-pointer"
/>
</div>
</div>
</th>
</tr>
))}
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{tableSubItems.map((tableSubItem, i) => (
<tr>
<td className="p-4 whitespace-nowrap text-base font-light">
{tableSubItem.title}
</td>
<td
className={`p-4 whitespace-nowrap text-base font-light
${
tableSubItem.status
? "text-green-400"
: "text-red-400"
}`}
>
{tableSubItem.status ? "فعال" : "غیر فعال"}
</td>
<td className="p-4 whitespace-nowrap text-base font-light">
{tableSubItem.date}
</td>
<td className="p-4 whitespace-nowrap text-base font-light">
{tableSubItem.payedPrice} ریال
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
);
};
export default TableDesign1;
TableDesign1.defaultProps = {
tableItems: [
{
title: "عنوان",
status: "وضعیت",
date: "تاریخ",
payedPrice: "مبلغ پرداختی",
},
],
tableSubItems: [
{
title: "مایکروویر سامسونگ مدل",
status: true,
date: "1400/09/21",
payedPrice: 2400000,
},
{
title: "آزمون آنلاین درس علوم تجربی",
status: false,
date: "1400/09/21",
payedPrice: 2400000,
},
],
};
Write Preview
Loading…
Cancel
Save