Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impact table #2

Merged
merged 2 commits into from
Feb 3, 2024
Merged

Impact table #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4bd2c5
added impact table
KcPele Feb 2, 2024
666bb47
Merge branch 'BuidlGuidl:main' into main
KcPele Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import type { NextPage } from "next";
import ImpactVectorCard from "~~/components/impact-vector/ImpactVectorCard";
import ImpactVectorGraph from "~~/components/impact-vector/ImpactVectorGraph";
import ImpactVectorTable from "~~/components/impact-vector/ImpactVectorTable";
import { SearchBar } from "~~/components/impact-vector/SearchBar";

const Home: NextPage = () => {
return (
<main className="max-w-[1500px] mx-auto w-full flex flex-col b-md:flex-row p-2">
<main className="max-w-[1700px] mx-auto w-full flex flex-col gap-2 b-md:flex-row p-2">
<div className="w-full min-w-[55%]">
<h2 className="text-center">Impact Calculator 🌱</h2>
<div className="">
<ImpactVectorGraph />
</div>
{/* still a work in progress */}
{/* <div className="mt-4">
<div className="mt-4">
<ImpactVectorTable />
</div> */}
</div>
</div>

<div className="max-h-[100dvh] overflow-hidden b-md:max-w-[34rem] w-full rounded-3xl p-6 border grid gap-6 ">
Expand Down
68 changes: 38 additions & 30 deletions packages/nextjs/components/impact-vector/ImpactVectorTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,70 @@ import { BsCheck } from "react-icons/bs";
import { FiArrowDown, FiArrowUp, FiEdit2, FiTrash2 } from "react-icons/fi";

const ImpactVectorTable = () => {
// this will be changed to the actual data from the API and tanstack table will be used
const change = -4;
const isChecked = true;

return (
<>
<table className="min-w-full divide-y divide-gray-300 ">
<thead className="">
<tr>
<th scope="col" className=" w-8 py-3 px-4 ">
<th scope="col" className=" w-8 py-3 px-2 md:px-4 ">
<div className="flex items-center h-5"></div>
</th>
<th scope="col" className=" py-3 w-[20%] text-start text-xs font-medium ">
Impact Vector
</th>

<th scope="col" className="px-6 py-3 w-[58%] text-start text-xs font-medium ">
<th scope="col" className="px-3 lg:px-6 py-3 w-[58%] text-start text-xs font-medium ">
Percentage
</th>
<th scope="col" className=" py-3 w-[20%] text-start text-xs font-medium ">
6 mon
<th scope="col" className="pl-6 py-3 w-[20%] text-start text-xs font-medium ">
6 month
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-300 ">
<tr>
<td className="py-3 ">
<td className="px-2 md:px-4 py-2 sm:py-3 ">
<div className="flex items-center cursor-pointer w-5 h-5 border border-[#7F56D9] rounded-lg">
<BsCheck size={24} className="text-[#7F56D9]" />
{isChecked && <BsCheck size={24} className="text-[#7F56D9]" />}
</div>
</td>

<td className=" py-4 whitespace-nowrap text-sm flex flex-col ">
<span className="font-bold">Ecosystem Users</span>
<span>vectorname</span>
</td>
<td className="bg-red-400 px-6 py-4 whitespace-nowrap text-sm ">
<progress className="progress custom__progress w-full" value={40} max={100}></progress>
<span>40%</span>
<td className=" py-2 sm:py-4 whitespace-nowrap text-xs sm:text-sm ">
<div className="flex flex-col ">
<span className="font-semibold">Ecosystem Users</span>
<span>vectorname</span>
</div>
</td>
<td className=" px-6 py-4 bg-slate-500 whitespace-nowrap text-end flex ">
<div className=" ">
<span
className={`text-sm p-1 rounded-xl gap-1 flex items-center font-semibold ${
change >= 0 ? "text-green-700 bg-green-100" : "text-red-700 bg-red-100"
}`}
>
{change >= 0 ? <FiArrowUp /> : <FiArrowDown />}
{Math.abs(change)}%
</span>
<td className=" px-3 lg:px-6 py-2 sm:py-4 whitespace-nowrap text-sm ">
<div className="flex items-center justify-between gap-2">
<progress className="progress custom__progress max-w-[90%] w-full" value={40} max={100}></progress>
<span className="">40%</span>
</div>
<div className="flex gap-2 ">
<button className=" ml-2">
<FiTrash2 />
</button>
<button className="">
<FiEdit2 />
</button>
</td>
<td className=" pr-2 lg:pr-6 py-2 sm:py-4 whitespace-nowrap ">
<div className=" grid gap-2 items-center justify-between grid-flow-col">
<div className=" ">
<p
className={`px-1 py-[2px] lg:px-2 lg:py-1 rounded-2xl gap-1 text-xs flex items-center font-medium ${
change >= 0 ? "text-green-700 bg-green-100" : "text-red-700 bg-red-100"
}`}
>
{change >= 0 ? <FiArrowUp /> : <FiArrowDown />}
{Math.abs(change)}%
</p>
</div>
<div className="flex gap-1 sm:gap-3 ">
<button className=" w-[20px]">
<FiTrash2 size={20} />
</button>
<button className="">
<FiEdit2 size={20} />
</button>
</div>
</div>
</td>
</tr>
Expand Down
1 change: 1 addition & 0 deletions packages/nextjs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@ethersproject/providers": "^5.7.2",
"@heroicons/react": "^2.0.11",
"@rainbow-me/rainbowkit": "1.3.0",
"@tanstack/react-table": "^8.11.8",
"@uniswap/sdk-core": "^4.0.1",
"@uniswap/v2-sdk": "^3.0.1",
"blo": "^1.0.1",
Expand Down
48 changes: 47 additions & 1 deletion packages/nextjs/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap");
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Expand All @@ -8,7 +9,8 @@
}

body {
min-height: 100vh;
min-height: 100dvh;
font-family: "Inter", "Open Sans", sans-serif;
}

h1,
Expand All @@ -30,3 +32,47 @@ p {
.btn.btn-ghost {
@apply shadow-none;
}

.custom__progress::-moz-progress-bar {
background: red !important;
}

.custom__progress::-webkit-progress-value {
background: red !important;
}

.custom__progress {
color: red !important;
}

.active-nav {
background: hsl(var(--p));
width: 100%;
height: 4px;
display: block;
position: absolute;
top: 40px;
left: 0px;
border-radius: 30px 30px 0 0;
}

/* Remove increment buttons on number inputs*/

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */

input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}

.shadow-none {
--tw-shadow: 0 0 #0000;
}
20 changes: 20 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1862,6 +1862,7 @@ __metadata:
"@ethersproject/providers": ^5.7.2
"@heroicons/react": ^2.0.11
"@rainbow-me/rainbowkit": 1.3.0
"@tanstack/react-table": ^8.11.8
"@trivago/prettier-plugin-sort-imports": ^4.1.1
"@types/node": ^17.0.35
"@types/nprogress": ^0
Expand Down Expand Up @@ -2273,6 +2274,25 @@ __metadata:
languageName: node
linkType: hard

"@tanstack/react-table@npm:^8.11.8":
version: 8.11.8
resolution: "@tanstack/react-table@npm:8.11.8"
dependencies:
"@tanstack/table-core": 8.11.8
peerDependencies:
react: ">=16"
react-dom: ">=16"
checksum: ac774c7ab86fe31898419d37b8f0897bac9eff1be092c53240e0b1f7547a462a16ba49445256204a8a027fd227d94dbdd911a9a19dfb69d2d2b180c304a6eb4a
languageName: node
linkType: hard

"@tanstack/table-core@npm:8.11.8":
version: 8.11.8
resolution: "@tanstack/table-core@npm:8.11.8"
checksum: 1dc2778e0573db47e5556c59886a60ed7ee7cf38129b71c7602656bd30c603a65c868219f0cdec2c3884c3399d901dca465587064bb7f29320d4185fe334c3eb
languageName: node
linkType: hard

"@tootallnate/once@npm:2, @tootallnate/once@npm:2.0.0":
version: 2.0.0
resolution: "@tootallnate/once@npm:2.0.0"
Expand Down
Loading