From 1856ac95c6bfcf676b4648954d097e4b8d81f2dd Mon Sep 17 00:00:00 2001 From: Yana Date: Fri, 29 Nov 2024 19:12:13 +0700 Subject: [PATCH] Add profile image and country --- .../app/components/ExplorerCard.tsx | 57 +++++++++++++++--- explorer-nextjs/app/page.tsx | 9 ++- .../app/typings/react-world-flags.d.ts | 1 + explorer-nextjs/package.json | 3 +- .../public/profileImagePlaceholder.png | Bin 0 -> 3832 bytes 5 files changed, 57 insertions(+), 13 deletions(-) create mode 100644 explorer-nextjs/app/typings/react-world-flags.d.ts create mode 100644 explorer-nextjs/public/profileImagePlaceholder.png diff --git a/explorer-nextjs/app/components/ExplorerCard.tsx b/explorer-nextjs/app/components/ExplorerCard.tsx index f8edfcfaee..4ca5d45378 100644 --- a/explorer-nextjs/app/components/ExplorerCard.tsx +++ b/explorer-nextjs/app/components/ExplorerCard.tsx @@ -1,11 +1,4 @@ -import { - Card, - CardHeader, - CardContent, - Typography, - Box, - useTheme, -} from "@mui/material"; +import { Card, CardContent, Typography, Box } from "@mui/material"; import React, { FC, ReactElement, ReactEventHandler } from "react"; import { ExplorerLineChart, IExplorerLineChartData } from "./ExplorerLineChart"; import { @@ -15,6 +8,9 @@ import { import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"; import { NymTokenSVG } from "../icons/NymTokenSVG"; +import Image from "next/image"; +import profileImagePlaceholder from "../../public/profileImagePlaceholder.png"; +import Flag from "react-world-flags"; interface ICardUpDownPriceLineProps { percentage: number; @@ -84,10 +80,47 @@ const CardDataRows = (props: ICardDataRowsProps): React.ReactNode => { ); }; +interface ICardProileImage { + url?: string; +} +const CardProfileImage = (props: ICardProileImage) => { + const { url } = props; + return ( + + {url ? ( + linkedIn + ) : ( + linkedIn + )} + + ); +}; -type ContentCardProps = { +interface ICardProfileCountry { + countryCode: string; + countryName: string; +} + +const CardProfileCountry = (props: ICardProfileCountry) => { + const { countryCode, countryName } = props; + return ( + + + {countryName} + + ); +}; + +export type ContentCardProps = { overTitle?: string; + profileImage?: ICardProileImage; title?: string | number; + profileCountry?: ICardProfileCountry; upDownLine?: ICardUpDownPriceLineProps; titlePrice?: ICardTitlePriceProps; dataRows?: ICardDataRowsProps; @@ -107,6 +140,8 @@ export const ExplorerCard: FC = ({ progressBar, paragraph, onClick, + profileImage, + profileCountry, }) => ( @@ -115,11 +150,13 @@ export const ExplorerCard: FC = ({ {overTitle} )} + {profileImage && } {title && ( - + {title} )} + {profileCountry && } {upDownLine && } {titlePrice && } {dataRows && } diff --git a/explorer-nextjs/app/page.tsx b/explorer-nextjs/app/page.tsx index 64b2781368..14535bc06f 100644 --- a/explorer-nextjs/app/page.tsx +++ b/explorer-nextjs/app/page.tsx @@ -17,7 +17,7 @@ import { BIG_DIPPER } from "@/app/api/constants"; import { formatNumber } from "@/app/utils"; import { useMainContext } from "./context/main"; import { useRouter } from "next/navigation"; -import { ExplorerCard } from "./components/ExplorerCard"; +import { ContentCardProps, ExplorerCard } from "./components/ExplorerCard"; import type { GetStaticProps, InferGetStaticPropsType } from "next"; import { ExplorerData, getCacheExplorerData } from "./api/explorer"; import { IExplorerLineChartData } from "./components/ExplorerLineChart"; @@ -34,9 +34,14 @@ import { IExplorerLineChartData } from "./components/ExplorerLineChart"; // onClick?: ReactEventHandler; // }; -const explorerCard = { +const explorerCard: ContentCardProps = { overTitle: "SINGLE", + profileImage: {}, title: "SINGLE", + profileCountry: { + countryCode: "NO", + countryName: "Norway", + }, upDownLine: { percentage: 10, numberWentUp: true, diff --git a/explorer-nextjs/app/typings/react-world-flags.d.ts b/explorer-nextjs/app/typings/react-world-flags.d.ts new file mode 100644 index 0000000000..6da3eea9e0 --- /dev/null +++ b/explorer-nextjs/app/typings/react-world-flags.d.ts @@ -0,0 +1 @@ +declare module "react-world-flags"; diff --git a/explorer-nextjs/package.json b/explorer-nextjs/package.json index 3126500047..50cfab048c 100644 --- a/explorer-nextjs/package.json +++ b/explorer-nextjs/package.json @@ -18,7 +18,8 @@ "next": "14.1.4", "react": "^18", "react-dom": "^18", - "react-error-boundary": "^4.0.13" + "react-error-boundary": "^4.0.13", + "react-world-flags": "^1.6.0" }, "devDependencies": { "@types/node": "^20", diff --git a/explorer-nextjs/public/profileImagePlaceholder.png b/explorer-nextjs/public/profileImagePlaceholder.png new file mode 100644 index 0000000000000000000000000000000000000000..bbeef84ed00905d134a9f76543c59d425a38a781 GIT binary patch literal 3832 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 uz|G*_l)$TjDsj_l;LYIQl)$TjD)B#|XTNK?7W