Skip to content

Commit 58c23dd

Browse files
Namanv0509Namanv0509
committed
Copy Colors option for hex codes and token
Signed-off-by: Namanv0509 <[email protected]>
1 parent c0ba21a commit 58c23dd

File tree

1 file changed

+60
-16
lines changed
  • src/sections/Projects/Sistent/identity/color

1 file changed

+60
-16
lines changed

‎src/sections/Projects/Sistent/identity/color/code.js

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { navigate } from "gatsby";
33
import { useLocation } from "@reach/router";
44

@@ -8,7 +8,8 @@ import { Col, Row } from "../../../../../reusecore/Layout";
88
import Button from "../../../../../reusecore/Button";
99
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1010

11-
import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, SistentThemeProvider } from "@sistent/sistent";
11+
import { styled, Table, TableContainer, TableCell, TableRow, TableHead, TableBody, SistentThemeProvider, CustomTooltip, Box, } from "@sistent/sistent";
12+
import { copyToClipboard } from "../../../../../components/CodeBlock/copy-to-clipboard.js";
1213

1314
const brandColors = [
1415
{ tokenName: "keppel-70", token: "theme.palette.brand.default", name: "Keppel", hex: "#DAf3EB" },
@@ -403,6 +404,47 @@ const componentColors = [
403404
];
404405

405406

407+
const CopyColor = ({ hex , token }) => {
408+
const [copyText, setCopyText] = useState("Copy");
409+
const [showCopy, setShowCopy] = useState(false);
410+
411+
const handleCopy = async () => {
412+
await copyToClipboard(hex || token);
413+
setCopyText("Copied");
414+
setTimeout(() => setCopyText("Copy"), 1000);
415+
};
416+
417+
return (
418+
<CustomTooltip
419+
title={copyText === "Copied" ? "Copied" : "Copy"}
420+
enterDelay={800}
421+
leaveDelay={10}
422+
placement="right"
423+
>
424+
<Box
425+
sx={{
426+
position: "relative",
427+
display: "inline-flex",
428+
alignItems: "center",
429+
cursor: "pointer",
430+
padding: "2px 4px",
431+
borderRadius: "3px",
432+
transition: "background-color 0.2s ease",
433+
"&:hover": {
434+
backgroundColor: (theme) =>
435+
theme.palette.action?.hover || "rgba(0, 0, 0, 0.04)",
436+
},
437+
}}
438+
onMouseEnter={() => setShowCopy(true)}
439+
onMouseLeave={() => setShowCopy(false)}
440+
onClick={handleCopy}
441+
>
442+
<span>{hex || token }</span>
443+
</Box>
444+
</CustomTooltip>
445+
);
446+
};
447+
406448
const PreviewBox = styled("div")(({ theme, bgcolor }) => ({
407449
backgroundColor: bgcolor,
408450
width: "1.6rem",
@@ -411,8 +453,10 @@ const PreviewBox = styled("div")(({ theme, bgcolor }) => ({
411453
border: `1px solid ${theme.palette.divider}`,
412454
boxShadow: "inset 0 0 3px rgba(0,0,0,0.15)",
413455
margin: "0 auto",
456+
414457
}));
415458

459+
416460
const PreviewTextBox = styled("p")(({ theme, tokenName }) => {
417461
const colorsMap = {
418462
"text-default": theme.palette.text.default,
@@ -582,9 +626,9 @@ const ColorCode = () => {
582626
>
583627
<StyledTableCell>{col.tokenName}</StyledTableCell>
584628
<StyledTableCell>{col.name}</StyledTableCell>
585-
<StyledTableCell>{col.hex}</StyledTableCell>
629+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
586630
<StyledTableCell sx={{ fontFamily: "monospace" }}>
587-
{col.token}
631+
<CopyColor hex={col.token} />
588632
</StyledTableCell>
589633
<StyledTableCell align="center">
590634
<PreviewBox bgcolor={col.hex} />
@@ -622,9 +666,9 @@ const ColorCode = () => {
622666
>
623667
<StyledTableCell>{col.tokenName}</StyledTableCell>
624668
<StyledTableCell>{col.name}</StyledTableCell>
625-
<StyledTableCell>{col.hex}</StyledTableCell>
669+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
626670
<StyledTableCell sx={{ fontFamily: "monospace" }}>
627-
{col.token}
671+
<CopyColor hex={col.token} />
628672
</StyledTableCell>
629673
<StyledTableCell align="center">
630674
<PreviewBox bgcolor={col.hex} />
@@ -663,9 +707,9 @@ const ColorCode = () => {
663707
>
664708
<StyledTableCell>{col.tokenName}</StyledTableCell>
665709
<StyledTableCell>{col.name}</StyledTableCell>
666-
<StyledTableCell>{col.hex}</StyledTableCell>
710+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
667711
<StyledTableCell sx={{ fontFamily: "monospace" }}>
668-
{col.token}
712+
<CopyColor hex={col.token} />
669713
</StyledTableCell>
670714
<StyledTableCell align="center">
671715
<PreviewBox bgcolor={col.hex} />
@@ -713,9 +757,9 @@ const ColorCode = () => {
713757
>
714758
<StyledTableCell>{col.tokenName}</StyledTableCell>
715759
<StyledTableCell>{col.Alias_of}</StyledTableCell>
716-
<StyledTableCell>{col.hex}</StyledTableCell>
760+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
717761
<StyledTableCell sx={{ fontFamily: "monospace" }}>
718-
{col.token}
762+
<CopyColor hex={col.token} />
719763
</StyledTableCell>
720764
<StyledTableCell align="center">
721765
<PreviewBox bgcolor={col.hex} />
@@ -756,9 +800,9 @@ const ColorCode = () => {
756800
>
757801
<StyledTableCell>{col.tokenName}</StyledTableCell>
758802
<StyledTableCell>{col.Alias_of}</StyledTableCell>
759-
<StyledTableCell>{col.hex}</StyledTableCell>
803+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
760804
<StyledTableCell sx={{ fontFamily: "monospace" }}>
761-
{col.token}
805+
<CopyColor hex={col.token} />
762806
</StyledTableCell>
763807
<StyledTableCell align="center">
764808
<PreviewTextBox tokenName={col.tokenName} >Aa</PreviewTextBox>
@@ -799,9 +843,9 @@ const ColorCode = () => {
799843
>
800844
<StyledTableCell>{col.tokenName}</StyledTableCell>
801845
<StyledTableCell>{col.Alias_of}</StyledTableCell>
802-
<StyledTableCell>{col.hex}</StyledTableCell>
846+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
803847
<StyledTableCell sx={{ fontFamily: "monospace" }}>
804-
{col.token}
848+
<CopyColor hex={col.token} />
805849
</StyledTableCell>
806850
<StyledTableCell align="center">
807851
<PreviewBorderBox tokenName={col.tokenName} />
@@ -847,9 +891,9 @@ const ColorCode = () => {
847891
>
848892
<StyledTableCell>{col.tokenName}</StyledTableCell>
849893
<StyledTableCell>{col.Alias_of}</StyledTableCell>
850-
<StyledTableCell>{col.hex}</StyledTableCell>
894+
<StyledTableCell><CopyColor hex={col.hex} /></StyledTableCell>
851895
<StyledTableCell sx={{ fontFamily: "monospace" }}>
852-
{col.token}
896+
<CopyColor hex={col.token} />
853897
</StyledTableCell>
854898
<StyledTableCell align="center">
855899
<PreviewBox bgcolor={col.hex} />

0 commit comments

Comments
 (0)