Feat/campange

package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-visually-hidden": "^1.1.2",
     "@tanstack/react-table": "^8.20.6",

src/app/_assets/globals.css

@@ -56,16 +56,25 @@
     --color-green-3: hsla(251, 58%, 27%, 1);
     --color-green-4: hsla(145, 91%, 41%, 1);
     --color-green-5: hsla(120, 83%, 69%, 1);
+    --color-green-6: hsla(159, 84%, 45%, 1);
+    --color-green-7: hsla(159, 67%, 67%, 1);
     --color-white-1: hsl(0, 0%, 70%);
     --color-white-2: hsl(68, 57%, 97%);
     --color-white-3: hsl(0, 0%, 100%);
     --color-black-1: hsl(225, 13%, 12%);
     --color-black-2: hsl(0, 0%, 12%);
     --color-black-3: hsla(252, 16%, 9%, 1);
     --color-yellow-1: hsla(72, 71%, 57%, 1);
+    --color-yellow-2: hsla(35, 100%, 49%, 1);
+    --color-yellow-3: hsla(35, 100%, 61%, 1);
     --color-navy-1: hsla(251, 78%, 10%, 1);
     --color-purple-1: hsla(266, 69%, 63%, 1);
     --color-purple-2: hsla(251, 34%, 26%, 1);
+    --color-purple-3: hsla(251, 23%, 14%, 1);
+    --color-purple-4: hsla(252, 40%, 17%, 1);
+    --color-purple-5: hsla(266, 100%, 64%, 1);
+    --color-pink-1: hsla(358, 100%, 68%, 1);
+    --color-pink-2: hsla(351, 100%, 77%, 1);
     --gr-border-1: #052b2f;
     --gr-border-2: #073438;
     --gr-border-3: #22174F;
@@ -87,16 +96,25 @@
     --color-green-3: hsla(251, 58%, 27%, 1);
     --color-green-4: hsla(145, 91%, 41%, 1);
     --color-green-5: hsla(120, 83%, 69%, 1);
+    --color-green-6: hsla(159, 84%, 45%, 1);
+    --color-green-7: hsla(159, 67%, 67%, 1);
     --color-white-1: hsl(0, 0%, 70%);
     --color-white-2: hsl(68, 57%, 97%);
     --color-white-3: hsl(0, 0%, 100%);
     --color-black-1: hsl(225, 13%, 12%);
     --color-black-2: hsl(0, 0%, 12%);
     --color-black-3: hsla(252, 16%, 9%, 1);
     --color-yellow-1: hsla(72, 71%, 57%, 1);
+    --color-yellow-2: hsla(35, 100%, 49%, 1);
+    --color-yellow-3: hsla(35, 100%, 61%, 1);
     --color-navy-1: hsla(251, 78%, 10%, 1);
     --color-purple-1: hsla(266, 69%, 63%, 1);
     --color-purple-2: hsla(251, 34%, 26%, 1);
+    --color-purple-3: hsla(251, 23%, 14%, 1);
+    --color-purple-4: hsla(252, 40%, 17%, 1);
+    --color-purple-5: hsla(266, 100%, 64%, 1);
+    --color-pink-1: hsla(358, 100%, 68%, 1);
+    --color-pink-2: hsla(351, 100%, 77%, 1);
     --gr-border-1: #052b2f;
     --gr-border-2: #073438;
     --gr-border-3: #22174F;

src/app/events/columns.tsx

@@ -0,0 +1,50 @@
+import { truncateHash } from "@/helper/format";
+import { ColumnDef } from "@tanstack/react-table";
+
+export type Account = {
+  index: number;
+  address: string;
+  points: number;
+}
+
+export const columns: ColumnDef<Account>[] = [
+  {
+    accessorKey: "index",
+    header: "Rank",
+    cell: ({ row }) => {
+      const original = row.original;
+
+      return (
+        <div className="text-base">
+          {original.index}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "address",
+    header: "Address",
+    cell: ({ row }) => {
+      const original = row.original;
+
+      return (
+        <div className="flex flex-col">
+          <p className="text-base">{truncateHash(original.address)}</p>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "points",
+    header: "Points",
+    cell: ({ row }) => {
+      const original = row.original;
+
+      return (
+        <div className="flex flex-col text-center">
+          <p className="text-base">{original.points} XP</p>
+        </div>
+      );
+    },
+  },
+];

src/app/events/data-table.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow
+} from "@/components/ui/table";
+import React from "react";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+    },
+  });
+
+  return (
+    <div>
+      <div className="rounded-md">
+        <Table className="flex w-full flex-col">
+          <TableBody className="flex w-full flex-col gap-2 bg-purple3">
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row, index) => {
+                return (
+                  <TableRow
+                    className="flex w-full gap-4 py-4 px-4 border-b border-grey7"
+                    key={row.id}
+                  >
+                    {row.getVisibleCells().map((cell, cellIndex) => (
+                      <TableCell
+                        className={`${cellIndex === 1 ? "flex-1" : "w-auto"}`}
+                        key={cell.id}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}