feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Overview/Buttons/CopyButton.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import CopyIcon from "@/components/Icons/Copy"
+import Button from "@/components/TempDesignSystem/Button"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import styles from "./copybutton.module.css"
+
+import type { CopyButtonProps } from "@/types/components/myPages/membership"
+
+export default function CopyButton({ membershipNumber }: CopyButtonProps) {
+  const intl = useIntl()
+
+  function handleCopy() {
+    navigator.clipboard.writeText(membershipNumber)
+    toast.success(
+      intl.formatMessage({ id: "Membership ID copied to clipboard" })
+    )
+  }
+
+  return (
+    <Button
+      onClick={handleCopy}
+      className={styles.button}
+      type="button"
+      variant="icon"
+      size="small"
+      intent="tertiary"
+    >
+      <CopyIcon color="pale" />
+    </Button>
+  )
+}

components/Blocks/DynamicContent/Overview/Buttons/copybutton.module.css

@@ -0,0 +1,5 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}