diff --git a/package.json b/package.json index 4b379a5..337014d 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b1df75d..409db3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.1.2 version: 1.1.2(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-tabs': + specifier: ^1.1.3 + version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-toast': specifier: ^1.2.6 version: 1.2.6(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1404,6 +1407,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-roving-focus@1.1.2': + resolution: {integrity: sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-select@2.1.6': resolution: {integrity: sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==} peerDependencies: @@ -1452,6 +1468,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-tabs@1.1.3': + resolution: {integrity: sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-toast@1.2.6': resolution: {integrity: sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA==} peerDependencies: @@ -5999,6 +6028,23 @@ snapshots: '@types/react': 18.3.20 '@types/react-dom': 18.3.5(@types/react@18.3.20) + '@radix-ui/react-roving-focus@1.1.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-collection': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.20)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.20 + '@types/react-dom': 18.3.5(@types/react@18.3.20) + '@radix-ui/react-select@2.1.6(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/number': 1.1.0 @@ -6063,6 +6109,22 @@ snapshots: optionalDependencies: '@types/react': 18.3.20 + '@radix-ui/react-tabs@1.1.3(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-context': 1.1.1(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-direction': 1.1.0(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.20)(react@18.3.1) + '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-roving-focus': 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.20)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.20 + '@types/react-dom': 18.3.5(@types/react@18.3.20) + '@radix-ui/react-toast@1.2.6(@types/react-dom@18.3.5(@types/react@18.3.20))(@types/react@18.3.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/primitive': 1.1.1 diff --git a/src/app/_assets/bronze-cup.png b/src/app/_assets/bronze-cup.png new file mode 100644 index 0000000..b8ca4f6 Binary files /dev/null and b/src/app/_assets/bronze-cup.png differ diff --git a/src/app/_assets/globals.css b/src/app/_assets/globals.css index e4412b9..3914648 100644 --- a/src/app/_assets/globals.css +++ b/src/app/_assets/globals.css @@ -56,6 +56,8 @@ --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%); @@ -63,9 +65,16 @@ --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,6 +96,8 @@ --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%); @@ -94,9 +105,16 @@ --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; diff --git a/src/app/_assets/golden-cup.png b/src/app/_assets/golden-cup.png new file mode 100644 index 0000000..b5f574f Binary files /dev/null and b/src/app/_assets/golden-cup.png differ diff --git a/src/app/_assets/silver-cup.png b/src/app/_assets/silver-cup.png new file mode 100644 index 0000000..f42a69a Binary files /dev/null and b/src/app/_assets/silver-cup.png differ diff --git a/src/app/_assets/tier-one.png b/src/app/_assets/tier-one.png new file mode 100644 index 0000000..c8dce60 Binary files /dev/null and b/src/app/_assets/tier-one.png differ diff --git a/src/app/_assets/tier-three.png b/src/app/_assets/tier-three.png new file mode 100644 index 0000000..bd34bcb Binary files /dev/null and b/src/app/_assets/tier-three.png differ diff --git a/src/app/_assets/tier-two.png b/src/app/_assets/tier-two.png new file mode 100644 index 0000000..82eb638 Binary files /dev/null and b/src/app/_assets/tier-two.png differ diff --git a/src/app/_assets/water-cool.png b/src/app/_assets/water-cool.png new file mode 100644 index 0000000..93c4308 Binary files /dev/null and b/src/app/_assets/water-cool.png differ diff --git a/src/app/_assets/water-dance.png b/src/app/_assets/water-dance.png new file mode 100644 index 0000000..defee6b Binary files /dev/null and b/src/app/_assets/water-dance.png differ diff --git a/src/app/_assets/water-patient.png b/src/app/_assets/water-patient.png new file mode 100644 index 0000000..5a1127a Binary files /dev/null and b/src/app/_assets/water-patient.png differ diff --git a/src/app/events/columns.tsx b/src/app/events/columns.tsx new file mode 100644 index 0000000..57f4c1c --- /dev/null +++ b/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[] = [ + { + accessorKey: "index", + header: "Rank", + cell: ({ row }) => { + const original = row.original; + + return ( +
+ {original.index} +
+ ); + }, + }, + { + accessorKey: "address", + header: "Address", + cell: ({ row }) => { + const original = row.original; + + return ( +
+

{truncateHash(original.address)}

+
+ ); + }, + }, + { + accessorKey: "points", + header: "Points", + cell: ({ row }) => { + const original = row.original; + + return ( +
+

{original.points} XP

+
+ ); + }, + }, +]; diff --git a/src/app/events/data-table.tsx b/src/app/events/data-table.tsx new file mode 100644 index 0000000..cc96cc2 --- /dev/null +++ b/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 { + columns: ColumnDef[]; + data: TData[]; +} + +export function DataTable({ + columns, + data, +}: DataTableProps) { + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + onSortingChange: setSorting, + getSortedRowModel: getSortedRowModel(), + onColumnFiltersChange: setColumnFilters, + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + }, + }); + + return ( +
+
+ + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row, index) => { + return ( + + {row.getVisibleCells().map((cell, cellIndex) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + ); + }) + ) : ( + + + No results. + + + )} + +
+
+
+ ); +} diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx new file mode 100644 index 0000000..951dbde --- /dev/null +++ b/src/app/events/page.tsx @@ -0,0 +1,161 @@ +"use client"; + +import { ChallengesList } from "@/components/events/ChallengesList"; +import { MissionsList } from "@/components/events/MissionsList"; +import { TopRankings } from "@/components/events/TopRankings"; +import { Page } from "@/components/Page"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { IconLightning } from "@/icons/fixed/lightning"; +import { IconPolygon } from "@/icons/fixed/polygon"; +import { IconTarget } from "@/icons/fixed/target"; +import { useRef } from "react"; +import bronzeCup from "../../app/_assets/bronze-cup.png"; +import goldenCup from "../../app/_assets/golden-cup.png"; +import silverCup from "../../app/_assets/silver-cup.png"; +import tierOne from "../../app/_assets/tier-one.png"; +import tierThree from "../../app/_assets/tier-three.png"; +import tierTwo from "../../app/_assets/tier-two.png"; +import waterCool from "../../app/_assets/water-cool.png"; +import waterDance from "../../app/_assets/water-dance.png"; +import waterPatient from "../../app/_assets/water-patient.png"; +import { columns as newColumns } from "./columns"; +import { DataTable } from "./data-table"; + +const data = [ + { + index: 1, + address: "0x1234567890123456789012345678901234567890", + points: 1000, + }, + { + index: 2, + address: "0x1234567890123456789012345678901234567890", + points: 1000, + }, + { + index: 3, + address: "0x1234567890123456789012345678901234567890", + points: 1000, + }, + { + index: 4, + address: "0x1234567890123456789012345678901234567890", + points: 1000, + }, +]; + +export default function EventsPage() { + const tabList = useRef(null); + + const missions = [ + { + icon: , + text: "Join Telegram Chat" + }, + { + icon: , + text: "Follow Twitter" + }, + { + icon: , + text: "Repost Campaign Post" + } + ]; + + const challenges = [ + { + backgroundColor: "bg-gradient-to-r from-yellow2 via-yellow2 to-yellow3", + buttonText: "Swap", + title: "Let's become a trader!", + description: "Each swap will gain 1 points.", + image: waterDance, + progress: 50, + currentValue: 100, + totalValue: 200 + }, + { + backgroundColor: "bg-gradient-to-r from-pink1 via-pink1 to-pink2", + buttonText: "Add Liquidity", + title: "Be a liquidity provider!", + description: "Each add lp will gain 2 point.", + image: waterCool, + progress: 50, + currentValue: 100, + totalValue: 200 + }, + { + backgroundColor: "bg-gradient-to-r from-green6 via-green6 to-green7", + buttonText: "Remove Liquidity", + title: "Be a clear-minded guy!", + description: "Each remove lp will gain 3 point.", + image: waterPatient, + progress: 50, + currentValue: 100, + totalValue: 200 + } + ]; + + return ( + +
+ + + + Task + + + Ranking + + + + +
+ +
+ + +
+

Your Point: 241 XP

+ + +
+ + +
+ + ); +} diff --git a/src/app/pools/page.tsx b/src/app/pools/page.tsx index a07ca64..ddb4843 100644 --- a/src/app/pools/page.tsx +++ b/src/app/pools/page.tsx @@ -4,12 +4,11 @@ import { DataTable } from "@/app/pools/data-table"; import { ActionButton } from "@/components/ActionButton/ActionButton"; import { Page } from "@/components/Page"; import { PageTitle } from "@/components/PageTitle/PageTitle"; -import { CardSkeleton, ListSkeleton } from "@/components/ui/card-skeleton"; import { usePoolList } from "@/hooks/pools/usePoolList"; +import { IconLoading } from "@/icons/fixed/loading"; import Link from "next/link"; import { useEffect } from "react"; import { columns as newColumns } from "./columns"; -import { IconLoading } from "@/icons/fixed/loading"; export default function PoolsPage() { const { poolList, loading, refetch } = usePoolList(); @@ -26,13 +25,13 @@ export default function PoolsPage() { - {/* {loading ? ( + {loading ? (
- ) : ( */} + ) : ( - {/* )} */} + )} diff --git a/src/components/BottomNav.tsx b/src/components/BottomNav.tsx index a807286..098c19a 100644 --- a/src/components/BottomNav.tsx +++ b/src/components/BottomNav.tsx @@ -1,7 +1,4 @@ -import { IconExplore } from "@/icons/fixed/explore"; -import { IconPool } from "@/icons/fixed/pool"; -import { IconPortfolio } from "@/icons/fixed/portfolio"; -import { IconSwap } from "@/icons/fixed/swap"; +import { ArrowDownUpIcon, DropletsIcon, GiftIcon, TelescopeIcon } from "lucide-react"; import { usePathname } from "next/navigation"; import { AnimatedLink } from "./ui/animated-link"; @@ -9,22 +6,22 @@ export const TABS = [ { id: "swap", text: "Swap", - Icon: IconSwap, + Icon: ({ isActive }: { isActive: boolean }) => , }, { id: "pools", text: "Pools", - Icon: IconPool, + Icon: ({ isActive }: { isActive: boolean }) => , }, { id: "explore", text: "Explore", - Icon: IconExplore, + Icon: ({ isActive }: { isActive: boolean }) => , }, { - id: "portfolio", - text: "Portfolio", - Icon: IconPortfolio, + id: "events", + text: "Events", + Icon: ({ isActive }: { isActive: boolean }) => , }, ]; @@ -34,7 +31,7 @@ export function BottomNav() { return (
-
+
{TABS.map(({ id, text, Icon }) => { const selected = id === currentTab; return ( diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index da908bc..411fbb0 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -34,7 +34,7 @@ export const Input: FC = ({ onFocus={onFocus} placeholder="0.0" className={`w-[100%] text-right text-base bg-transparent overflow-visible ${value ? "text-white2" : "text-white1" - } py-[8px] border-none focus:ring-transparent ${disabled ? "opacity-50" : ""}`} + } py-[8px] border-none focus:ring-transparent ${disabled && !value ? "opacity-50" : ""}`} type="number" value={displayValue} onChange={(e) => handleSetValue(e.target.value)} diff --git a/src/components/events/ChallengeEvent.tsx b/src/components/events/ChallengeEvent.tsx new file mode 100644 index 0000000..f2d6b0b --- /dev/null +++ b/src/components/events/ChallengeEvent.tsx @@ -0,0 +1,50 @@ +import { Avatar, AvatarImage } from "@radix-ui/react-avatar"; +import { StaticImageData } from "next/image"; +import { EventProgressBar } from "./EventProgressBar"; + +interface ChallengeEventProps { + backgroundColor: string; + buttonText: string; + title: string; + description: string; + image: StaticImageData; + progress: number; + currentValue: number; + totalValue: number; +} + +export function ChallengeEvent({ + backgroundColor, + buttonText, + title, + description, + image, + progress, + currentValue, + totalValue +}: ChallengeEventProps) { + return ( +
+
+
+ +

{title}

+

{description}

+
+ + + + +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/components/events/ChallengesList.tsx b/src/components/events/ChallengesList.tsx new file mode 100644 index 0000000..af77e66 --- /dev/null +++ b/src/components/events/ChallengesList.tsx @@ -0,0 +1,40 @@ +import { StaticImageData } from "next/image"; +import { ChallengeEvent } from "./ChallengeEvent"; + +interface ChallengeInfo { + backgroundColor: string; + buttonText: string; + title: string; + description: string; + image: StaticImageData; + progress: number; + currentValue: number; + totalValue: number; +} + +interface ChallengesListProps { + challenges: ChallengeInfo[]; +} + +export function ChallengesList({ challenges }: ChallengesListProps) { + return ( +
+

Challenge Events 🗓

+
+ {challenges.map((challenge, index) => ( + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/events/EventProgressBar.tsx b/src/components/events/EventProgressBar.tsx new file mode 100644 index 0000000..b1f19bb --- /dev/null +++ b/src/components/events/EventProgressBar.tsx @@ -0,0 +1,31 @@ +import * as Progress from "@radix-ui/react-progress"; + +interface EventProgressBarProps { + value: number; + currentValue: number; + totalValue: number; +} + +export function EventProgressBar({ value, currentValue, totalValue }: EventProgressBarProps) { + return ( +
+ + + + +
+

Your Progress

+

{currentValue}/{totalValue}

+
+
+ ); +} \ No newline at end of file diff --git a/src/components/events/MissionItem.tsx b/src/components/events/MissionItem.tsx new file mode 100644 index 0000000..6a12b9f --- /dev/null +++ b/src/components/events/MissionItem.tsx @@ -0,0 +1,15 @@ +import { ReactNode } from "react"; + +interface MissionItemProps { + icon: ReactNode; + text: string; +} + +export function MissionItem({ icon, text }: MissionItemProps) { + return ( +
+ {icon} + {text} +
+ ); +} \ No newline at end of file diff --git a/src/components/events/MissionsList.tsx b/src/components/events/MissionsList.tsx new file mode 100644 index 0000000..c8a5bc7 --- /dev/null +++ b/src/components/events/MissionsList.tsx @@ -0,0 +1,26 @@ +import { ReactNode } from "react"; +import { MissionItem } from "./MissionItem"; + +interface MissionsListProps { + missions: Array<{ + icon: ReactNode; + text: string; + }>; +} + +export function MissionsList({ missions }: MissionsListProps) { + return ( +
+

Begin Missions 🎯

+
+ {missions.map((mission, index) => ( + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/src/components/events/TopRankings.tsx b/src/components/events/TopRankings.tsx new file mode 100644 index 0000000..3c84417 --- /dev/null +++ b/src/components/events/TopRankings.tsx @@ -0,0 +1,70 @@ +import { truncateHash } from "@/helper/format"; +import { Avatar, AvatarImage } from "@radix-ui/react-avatar"; +import { StaticImageData } from "next/image"; + +interface TopRankingProps { + address: string; + points: number; + cupImage: StaticImageData; + tierImage: StaticImageData; + highlight?: boolean; +} + +interface TopRankingsProps { + firstPlace: TopRankingProps; + secondPlace: TopRankingProps; + thirdPlace: TopRankingProps; +} + +export function TopRankings({ firstPlace, secondPlace, thirdPlace }: TopRankingsProps) { + return ( +
+
+ + + +
+ {truncateHash(secondPlace.address, 3, 3)} +
+ {secondPlace.points} XP +
+
+ + + +
+ +
+
+ + + +
+
+ {truncateHash(firstPlace.address, 3, 3)} +
+ {firstPlace.points} XP +
+
+ + + +
+ +
+ + + +
+ {truncateHash(thirdPlace.address, 3, 3)} +
+ {thirdPlace.points} XP +
+
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/src/components/ui/page-transition.tsx b/src/components/ui/page-transition.tsx index ea82069..79a4ed9 100644 --- a/src/components/ui/page-transition.tsx +++ b/src/components/ui/page-transition.tsx @@ -22,7 +22,7 @@ export function PageTransition({ animate="enter" exit="exit" transition={{ duration: 0.3, type: "spring", stiffness: 200, damping: 25 }} - className={className} + className={`${className} w-full flex-grow`} > {children} diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..1553abb --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,55 @@ +"use client" + +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/icons/fixed/Vector 94.tsx b/src/icons/fixed/Vector 94.tsx deleted file mode 100644 index 788075f..0000000 --- a/src/icons/fixed/Vector 94.tsx +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - -; diff --git a/src/icons/fixed/lightning.tsx b/src/icons/fixed/lightning.tsx new file mode 100644 index 0000000..37dd0f7 --- /dev/null +++ b/src/icons/fixed/lightning.tsx @@ -0,0 +1,21 @@ + +import { Icon } from "../../types/Icon"; + +export const IconLightning = ({ ...restProps }: Icon) => ( + + + + + + + + + + + + + + + + +); diff --git a/src/icons/fixed/polygon.tsx b/src/icons/fixed/polygon.tsx new file mode 100644 index 0000000..158f7fa --- /dev/null +++ b/src/icons/fixed/polygon.tsx @@ -0,0 +1,10 @@ + +import { Icon } from "../../types/Icon"; + +export const IconPolygon = ({ ...restProps }: Icon) => ( + + + + + +); diff --git a/src/icons/fixed/target.tsx b/src/icons/fixed/target.tsx new file mode 100644 index 0000000..1652342 --- /dev/null +++ b/src/icons/fixed/target.tsx @@ -0,0 +1,21 @@ + +import { Icon } from "../../types/Icon"; + +export const IconTarget = ({ ...restProps }: Icon) => ( + + + + + + + + + + + + + + + + +); diff --git a/tailwind.config.js b/tailwind.config.js index 0e69b32..49238d8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,6 +25,8 @@ module.exports = { green3: "var(--color-green-3)", green4: "var(--color-green-4)", green5: "var(--color-green-5)", + green6: "var(--color-green-6)", + green7: "var(--color-green-7)", white1: "var(--color-white-1)", white2: "var(--color-white-2)", white3: "var(--color-white-3)", @@ -32,9 +34,16 @@ module.exports = { black2: "var(--color-black-2)", black3: "var(--color-black-3)", yellow1: "var(--color-yellow-1)", + yellow2: "var(--color-yellow-2)", + yellow3: "var(--color-yellow-3)", navy1: "var(--color-navy-1)", purple1: "var(--color-purple-1)", purple2: "var(--color-purple-2)", + purple3: "var(--color-purple-3)", + purple4: "var(--color-purple-4)", + purple5: "var(--color-purple-5)", + pink1: "var(--color-pink-1)", + pink2: "var(--color-pink-2)", grBorder1: "var(--gr-border-1)", grBorder2: "var(--gr-border-2)", grBorder3: "var(--gr-border-3)",