chore: copy and duration components

src/components/primitives/Copy.tsx

@@ -0,0 +1,25 @@
+import { Icon, OverrideTheme, type Styled, Text, mergeClass } from "../..";
+import useClipboard from "../../hooks/useClipboard";
+import type { TextProps } from "./Text";
+
+import type { textStyles } from "./Text";
+
+export type CopyProps = Omit<TextProps, "children" | "value"> & {
+  value: string;
+  size?: Styled<typeof textStyles>["size"];
+};
+
+export default function Copy({ size, value, className, ...props }: CopyProps) {
+  const { copy: copyCall, isCopied } = useClipboard();
+  return (
+    <Text size={size} {...props} className={mergeClass("dim select-none inline-flex", className)}>
+      <OverrideTheme coloring={isCopied ? "good" : undefined}>
+        <Icon
+          className="text-main-11"
+          remix={isCopied ? "RiCheckboxCircleFill" : "RiFileCopyFill"}
+          onClick={() => copyCall(value)}
+        />
+      </OverrideTheme>
+    </Text>
+  );
+}

src/components/primitives/Duration.tsx

@@ -0,0 +1,23 @@
+import moment from "moment";
+import { useMemo } from "react";
+
+export type DurationProps = {
+  timestamp: number | bigint;
+  relative?: "hours" | "day" | "auto";
+};
+
+export default function Duration({ timestamp }: DurationProps) {
+  const time = useMemo(() => {
+    const then = moment.duration(Number(timestamp)).humanize();
+
+    return then
+      .replace(/a\s/, "1 ")
+      .replace(/\bminute(s?)\b/g, "m")
+      .replace(/\bsecond(s?)\b/g, "s")
+      .replace(/\bhour(s?)\b/g, (_match, plural) => (plural ? "hours" : "hour"))
+      .replace(/\bday(s?)\b/g, (_match, plural) => (plural ? "days" : "day"))
+      .replace(/\bmonth(s?)\b/g, (_match, plural) => (plural ? "months" : "month"));
+  }, [timestamp]);
+
+  return time;
+}

src/components/primitives/Hash.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
-import { Icon, OverrideTheme, type Styled, mergeClass } from "../..";
-import useClipboard from "../../hooks/useClipboard";
+import { type Styled, mergeClass } from "../..";
 import Text, { type TextProps } from "./Text";
 
+import Copy from "./Copy";
 import type { textStyles } from "./Text";
 
 export type HashProps = Omit<TextProps, "children" | "value"> & {
@@ -27,30 +27,14 @@ export default function Hash({ value, format, copy, size, children: hash, classN
     }
   }, [hash, format]);
 
-  const { copy: copyCall, isCopied } = useClipboard();
-  const copyButton = useMemo(
-    () =>
-      copy && (
-        <OverrideTheme coloring={isCopied ? "good" : undefined}>
-          <Icon className="text-main-11" remix={isCopied ? "RiCheckboxCircleFill" : "RiFileCopyFill"} />
-        </OverrideTheme>
-      ),
-    [copy, isCopied],
-  );
-
   if (value) return formatted;
   return (
     <Text
       size={size}
-      onClick={() => copyCall(hash)}
       {...props}
-      className={mergeClass(
-        "items-center gap-sm cursor-pointer font-text",
-        copy && "dim select-none inline-flex",
-        className,
-      )}>
+      className={mergeClass("items-center gap-sm font-text", copy && "select-none inline-flex", className)}>
       {formatted}
-      {copyButton}
+      {copy && <Copy value={hash} />}
     </Text>
   );
 }

src/index.ts

@@ -98,6 +98,10 @@ export * from "./components/primitives/Bar";
 export { default as Bar } from "./components/primitives/Bar";
 export * from "./components/primitives/Time";
 export { default as Time } from "./components/primitives/Time";
+export * from "./components/primitives/Duration";
+export { default as Duration } from "./components/primitives/Duration";
+export * from "./components/primitives/Copy";
+export { default as Copy } from "./components/primitives/Copy";
 export * from "./components/primitives/List";
 export { default as List } from "./components/primitives/List";
 export * from "./components/primitives/Hash";