more components

explorer-nextjs/package.json

@@ -14,8 +14,10 @@
     "@emotion/styled": "^11.13.5",
     "@mui/material": "^6.1.10",
     "@mui/material-nextjs": "^6.1.9",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "19.0.0-rc-66855b96-20241106"
     "@nymproject/react": "^1.0.0",
     "@nymproject/nym-validator-client": "0.18.0",

explorer-nextjs/src/app/page.tsx

@@ -1,12 +1,13 @@
-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 CopyFile from "@/components/icons/CopyFile";
+import ExplorerCard from "@/components/cards/ExplorerCard";
+import ExplorerHeroCard from "@/components/cards/ExplorerHeroCard";
+import CopyToClipboard from "@/components/copyToClipboard/CopyToClipboard";
 import Gateway from "@/components/icons/Gateway";
+import ExplorerListItem from "@/components/list/ListItem";
+import ProgressBar from "@/components/progressBar/ProgressBar";
+import StarRarating from "@/components/starRating/StarRating";
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Wrapper } from "@/components/wrapper";
-import { Container, Grid2, IconButton, Stack, Typography } from "@mui/material";
+import { Container, Grid2, Stack, Typography } from "@mui/material";
 
 export default function Home() {
   return (
@@ -27,9 +28,7 @@ export default function Home() {
                       <Typography variant="body4">
                         n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su
                       </Typography>
-                      <IconButton size="small">
-                        <CopyFile />
-                      </IconButton>
+                      <CopyToClipboard text="n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su" />
                     </Stack>
                   }
                 />
@@ -41,6 +40,25 @@ export default function Home() {
                   label="Progress bar"
                   value={<ProgressBar value={50} color="secondary" />}
                 />
+                <ExplorerListItem
+                  label="Button group"
+                  value={
+                    <ExplorerButtonGroup
+                      options={[
+                        {
+                          label: "Node",
+                          link: "/node",
+                          isSelected: true,
+                        },
+                        {
+                          label: "Account",
+                          link: "/account",
+                          isSelected: false,
+                        },
+                      ]}
+                    />
+                  }
+                />
               </ExplorerCard>
               <Grid2 container spacing={4}>
                 <Grid2 size={6}>

explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { IconButton } from "@mui/material";
+import { CopyToClipboard as ReactCopyToClipboard } from "react-copy-to-clipboard";
+import CopyFile from "../icons/CopyFile";
+
+const CopyToClipboard = ({
+  text,
+  Icon,
+  size = "medium",
+}: {
+  text: string;
+  Icon?: React.ReactNode;
+  size?: "small" | "medium" | "large";
+}) => {
+  return (
+    <ReactCopyToClipboard text={text}>
+      <IconButton size={size}>{Icon || <CopyFile />}</IconButton>
+    </ReactCopyToClipboard>
+  );
+};
+
+export default CopyToClipboard;

explorer-nextjs/src/components/toggleButton/ToggleButton.tsx

@@ -0,0 +1,46 @@
+import { Box, Button, ButtonGroup } from "@mui/material";
+import { Link } from "../muiLink";
+
+type Options = {
+  label: string;
+  isSelected: boolean;
+  link: string;
+}[];
+
+const ExplorerButtonGroup = ({
+  size = "small",
+  options,
+}: {
+  size?: "small" | "medium" | "large";
+  options: Options;
+}) => {
+  return (
+    <ButtonGroup size={size}>
+      {options.map((option) => (
+        <Link
+          href={option.link}
+          key={option.label}
+          sx={{ textDecoration: "none" }}
+        >
+          <Button
+            sx={{
+              color: option.isSelected
+                ? "primary.contrastText"
+                : "text.primary",
+              "&:hover": {
+                bgcolor: option.isSelected
+                  ? "primary.main"
+                  : "background.paper",
+              },
+              bgcolor: option.isSelected ? "primary.main" : "background.paper",
+            }}
+            variant="outlined"
+          >
+            {option.label}
+          </Button>
+        </Link>
+      ))}
+    </ButtonGroup>
+  );
+};
+export default ExplorerButtonGroup;

yarn.lock

@@ -7952,6 +7952,13 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-copy-to-clipboard@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz#0cb724d4228f1c2f8f5675671b3971c8801d5f45"
+  integrity sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@<18.0.0":
   version "17.0.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5"
@@ -11000,7 +11007,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
-copy-to-clipboard@^3.3.3:
+copy-to-clipboard@^3.3.1, copy-to-clipboard@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
@@ -20853,6 +20860,14 @@ react-aria@^3.34.3:
     "@react-aria/visually-hidden" "^3.8.18"
     "@react-types/shared" "^3.26.0"
 
+react-copy-to-clipboard@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
+  integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+    prop-types "^15.8.1"
+
 react-docgen-typescript@^2.1.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"