wip

2024-12-11 16:02:29 +07:00
parent f69c6707c7
commit 09fd8f6d9d
5 changed files with 105 additions and 2 deletions
@@ -16,7 +16,8 @@
    "@mui/material-nextjs": "^6.1.9",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106"
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-world-flags": "^1.6.0"
  },
  "devDependencies": {
    "@biomejs/biome": "1.9.4",
@@ -10,8 +10,8 @@ import type React from "react";
 import type { FC, ReactElement } from "react";
 import Flag from "react-world-flags";
 import profileImagePlaceholder from "../../../public/profileImagePlaceholder.png";
-// import { Remark42Comments } from "../comments";
 import { NymTokenSVG } from "../icons/NymTokenSVG";
+// import { Remark42Comments } from "../comments";
 import { type ILineChartData, LineChart } from "../lineChart";
 import {
  DynamicProgressBar,
@@ -0,0 +1,38 @@
+import { useTheme } from "@mui/material/styles";
+import * as React from "react";
+
+export const NymTokenSVG = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title id="nymTokenTitle">Nym Token Icon</title>
+      <g clipPath="url(#clip0_7134_15888)">
+        <path
+          d="M17.07 3.43C13.17 -0.480002 6.83 -0.480002 2.93 3.43C-0.980002 7.34 -0.980002 13.67 2.93 17.57C6.84 21.48 13.17 21.48 17.07 17.57C20.98 13.67 20.98 7.33 17.07 3.43ZM16.21 16.71C12.78 20.14 7.21 20.14 3.78 16.71C0.349997 13.28 0.349997 7.71 3.78 4.28C7.21 0.849997 12.78 0.849997 16.21 4.28C19.65 7.72 19.65 13.28 16.21 16.71Z"
+          fill={color}
+        />
+        <path
+          d="M15.4 16.33V4.66999C14.89 4.18999 14.32 3.76999 13.71 3.43999V14.59L6.35001 3.39999C5.71001 3.73999 5.12001 4.15999 4.60001 4.65999V16.33C5.11001 16.81 5.68001 17.23 6.29001 17.56V6.40999L13.65 17.6C14.29 17.26 14.88 16.83 15.4 16.33Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7134_15888">
+          <rect
+            width="20"
+            height="20"
+            fill={color}
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
@@ -0,0 +1,35 @@
+import { Box } from "@mui/material";
+import type React from "react";
+
+export interface MultiSegmentProgressBarProps {
+  values: { percentage: number; color: string }[]; // Array of percentage and color pairs
+  // Optional border radius, default is 4
+  backgroundColor?: string; // Optional background color for the bar, default is light gray
+}
+
+export const MultiSegmentProgressBar: React.FC<
+  MultiSegmentProgressBarProps
+> = ({ values, backgroundColor = "#CAD6D7" }) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        width: "100%",
+        height: 8,
+        borderRadius: 4,
+        overflow: "hidden",
+        backgroundColor,
+      }}
+    >
+      {values.map((value) => (
+        <Box
+          key={value.color}
+          sx={{
+            width: `${value.percentage}%`,
+            backgroundColor: value.color,
+          }}
+        />
+      ))}
+    </Box>
+  );
+};
@@ -0,0 +1,29 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import * as React from "react";
+
+export interface IStaticProgressBarProps {
+  color: string;
+  value: number;
+}
+
+export const StaticProgressBar = (props: IStaticProgressBarProps) => {
+  const { color, value } = props;
+
+  return (
+    <Box>
+      <LinearProgress
+        variant="determinate"
+        value={value}
+        sx={{
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "#CAD6D7",
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: color,
+          },
+        }}
+      />
+    </Box>
+  );
+};