diff --git a/explorer-nextjs/public/profileImagePlaceholder.png b/explorer-nextjs/public/profileImagePlaceholder.png new file mode 100644 index 0000000000..bbeef84ed0 Binary files /dev/null and b/explorer-nextjs/public/profileImagePlaceholder.png differ diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx index 35e1709eef..a6da680189 100644 --- a/explorer-nextjs/src/app/page.tsx +++ b/explorer-nextjs/src/app/page.tsx @@ -1,16 +1,17 @@ +"use client"; + +import { + AccountStatsCard, + type IAccountStatsCardProps, +} from "@/components/Cards/AccountStatsCard"; import ExplorerCard from "@/components/Cards/ExplorerCard"; import ExplorerHeroCard from "@/components/Cards/ExplorerHeroCard"; import ExplorerListItem from "@/components/List/ListItem"; import ProgressBar from "@/components/RatingMeter/RatingMeter"; import StarRarating from "@/components/StarRating/StarRating"; +import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch"; import CopyFile from "@/components/icons/CopyFile"; import Gateway from "@/components/icons/Gateway"; -("use client"); -import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch"; -import { - AccountStatsCard, - type IAccountStatsCardProps, -} from "@/components/cards/AccountStatsCard"; import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard"; import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard"; import { NoiseCard } from "@/components/landingPageComponents/NoiseCard"; @@ -23,6 +24,84 @@ import React, { useEffect, useState } from "react"; import { type ContentCardProps, MonoCard } from "../components/cards/MonoCard"; import { type ExplorerData, getCacheExplorerData } from "./api"; +const explorerCard: ContentCardProps = { + overTitle: "SINGLE", + profileImage: {}, + title: "SINGLE", + profileCountry: { + countryCode: "NO", + countryName: "Norway", + }, + upDownLine: { + percentage: 10, + numberWentUp: true, + }, + titlePrice: { + price: 1.15, + upDownLine: { + percentage: 10, + numberWentUp: true, + }, + }, + dataRows: { + rows: [ + { key: "Market cap", value: "$ 1000000" }, + { key: "24H VOL", value: "$ 1000000" }, + ], + }, + graph: { + data: [ + { + date_utc: "2024-11-20", + numericData: 10, + }, + { + date_utc: "2024-11-21", + numericData: 12, + }, + { + date_utc: "2024-11-22", + numericData: 9, + }, + { + date_utc: "2024-11-23", + numericData: 11, + }, + ], + color: "#00CA33", + label: "Label", + }, + nymAddress: { + address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su", + title: "Nym address", + }, + identityKey: { + address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su", + title: "Nym address", + }, + qrCode: { + url: "https://nymtech.net", + }, + ratings: { + ratings: [ + { title: "Rating-1", numberOfStars: 4 }, + { title: "Rating-2", numberOfStars: 2 }, + { title: "Rating-3", numberOfStars: 3 }, + ], + }, + progressBar: { + overTitle: "Current NGM epoch", + start: "2024-12-08T12:26:19Z", + showEpoch: true, + }, + comments: true, + paragraph: "Additional line", + stakeButton: { + label: "Stake on node", + identityKey: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su", + }, +}; + const accountStatsCard: IAccountStatsCardProps = { overTitle: "Total value", priceTitle: 1990.0174, @@ -146,6 +225,9 @@ export default function Home() { // onSwitch={() => console.log("object :>> ")} /> + + +