GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5245 from nymtech/feature/clipboard-and-buttongroup

Browse Source 
* more components

* update button group styling

* use another clipboard package
This commit is contained in:
Fouad
2024-12-11 15:48:13 +00:00
committed by GitHub
parent bc849c7c46 280283e41a
commit 2eb53ef55a
15 changed files with 3242 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer-nextjs/package.json
+2
View File
@@ -12,8 +12,10 @@
"@emotion/cache": "^11.13.5",
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@mui/icons-material": "^5.16.11",
"@mui/material": "^6.1.10",
"@mui/material-nextjs": "^6.1.9",
"@uidotdev/usehooks": "^2.4.1",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106"
explorer-nextjs/src/app/account/page.tsx
+31
View File
@@ -0,0 +1,31 @@
import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
import { Wrapper } from "@/components/wrapper";
import { Box, Typography } from "@mui/material";
export default function AccountPage() {
return (
<div>
<main>
<Box sx={{ p: 5 }}>
<Wrapper>
<Typography fontWeight="light">Account page</Typography>
<ExplorerButtonGroup
options={[
{
label: "Node",
link: "/node",
isSelected: false,
},
{
label: "Account",
link: "/account",
isSelected: true,
},
]}
/>
</Wrapper>
</Box>
</main>
</div>
);
}
explorer-nextjs/src/app/explorer/page.tsx
+15
View File
@@ -1,3 +1,4 @@
import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
import { Wrapper } from "@/components/wrapper";
import { Box, Typography } from "@mui/material";
@@ -8,6 +9,20 @@ export default function ExplorerPage() {
<Box sx={{ p: 5 }}>
<Wrapper>
<Typography fontWeight="light">Explorer page</Typography>
<ExplorerButtonGroup
options={[
{
label: "Node",
link: "/explorer",
isSelected: true,
},
{
label: "Account",
link: "/stake",
isSelected: false,
},
]}
/>
</Wrapper>
</Box>
</main>
explorer-nextjs/src/app/node/page.tsx
+31
View File
@@ -0,0 +1,31 @@
import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
import { Wrapper } from "@/components/wrapper";
import { Box, Typography } from "@mui/material";
export default function NodePage() {
return (
<div>
<main>
<Box sx={{ p: 5 }}>
<Wrapper>
<Typography fontWeight="light">Node page</Typography>
<ExplorerButtonGroup
options={[
{
label: "Node",
link: "/node",
isSelected: true,
},
{
label: "Account",
link: "/account",
isSelected: false,
},
]}
/>
</Wrapper>
</Box>
</main>
</div>
);
}
explorer-nextjs/src/app/page.tsx
+29 -11
View File
@@ -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 (
@@ -23,13 +24,11 @@ export default function Home() {
<ExplorerListItem
label="Nym Address"
value={
<Stack direction="row" gap={0.1} alignItems="center">
<Stack direction="row" gap={0.5} alignItems="center">
<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/Cards/ExplorerCard.tsx → explorer-nextjs/src/components/cards/ExplorerCard.tsx
View File
explorer-nextjs/src/components/Cards/ExplorerHeroCard.tsx → explorer-nextjs/src/components/cards/ExplorerHeroCard.tsx
View File
explorer-nextjs/src/components/copyToClipboard/CopyToClipboard.tsx
+47
View File
@@ -0,0 +1,47 @@
"use client";
import { IconButton, Typography } from "@mui/material";
import { useCopyToClipboard } from "@uidotdev/usehooks";
import { useEffect } from "react";
import CopyFile from "../icons/CopyFile";
const CLEAR_AFTER_MS = 10_000;
const CopyToClipboard = ({
text,
Icon,
size = "medium",
}: {
text: string;
Icon?: React.ReactNode;
size?: "small" | "medium" | "large";
}) => {
const [copiedText, setCopiedText] = useCopyToClipboard();
const hasCopied = Boolean(copiedText);
useEffect(() => {
if (hasCopied) {
const timeout = setTimeout(() => {
setCopiedText("");
}, CLEAR_AFTER_MS);
return () => clearTimeout(timeout);
}
}, [hasCopied, setCopiedText]);
if (hasCopied) {
return (
<Typography sx={{ color: "pine.950" }} variant="h6" color="textSecondary">
Copied
</Typography>
);
}
return (
<IconButton size={size} onClick={() => setCopiedText(text)}>
{Icon || <CopyFile />}
</IconButton>
);
};
export default CopyToClipboard;
explorer-nextjs/src/components/List/ListItem.tsx → explorer-nextjs/src/components/list/ListItem.tsx
View File
explorer-nextjs/src/components/RatingMeter/RatingMeter.tsx → explorer-nextjs/src/components/progressBar/ProgressBar.tsx
View File
explorer-nextjs/src/components/StarRating/StarRating.tsx → explorer-nextjs/src/components/starRating/StarRating.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { StarOutlineRounded, StarRounded } from "@mui/icons-material/";
import { StarOutlineRounded, StarRounded } from "@mui/icons-material";
import { Rating } from "@mui/material";
const StarRating = ({
explorer-nextjs/src/components/toggleButton/ToggleButton.tsx
+46
View File
@@ -0,0 +1,46 @@
import { Button, ButtonGroup } from "@mui/material";
import { Link } from "../muiLink";
type Option = {
label: string;
isSelected: boolean;
link: string;
};
type Options = [Option, Option];
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" : "",
},
bgcolor: option.isSelected ? "primary.main" : "transparent",
}}
variant="outlined"
>
{option.label}
</Button>
</Link>
))}
</ButtonGroup>
);
};
export default ExplorerButtonGroup;
explorer-nextjs/yarn.lock
+3023
View File
File diff suppressed because it is too large Load Diff
package.json
+1 -2
View File
@@ -13,7 +13,6 @@
"ts-packages/*",
"nym-wallet",
"explorer",
"explorer-nextjs",
"types",
"clients/validator",
"sdk/typescript/packages/**",
@@ -60,4 +59,4 @@
"dependencies": {
"lucide-react": "^0.453.0"
}
}
}
yarn.lock
+16 -1
View File
@@ -7794,6 +7794,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"
@@ -10842,7 +10849,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==
@@ -20678,6 +20685,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"