add copy to clipboard for craft names

app/routes/ffxiv.craftsim._index.tsx

@@ -7,6 +7,7 @@ import { PageWrapper } from '~/components/Common'
 import NoResults from '~/components/Common/NoResults'
 import SmallTable from '~/components/WoWResults/FullScan/SmallTable'
 import CheckBox from '~/components/form/CheckBox'
+import { ClipboardIcon } from '@heroicons/react/outline'
 import { InputWithLabel } from '~/components/form/InputWithLabel'
 import SmallFormContainer from '~/components/form/SmallFormContainer'
 import ItemsFilter from '~/components/form/ffxiv/ItemsFilter'
@@ -46,6 +47,25 @@ import {
 import { SubmitButton } from '~/components/form/SubmitButton'
 import { dOHOptions } from '~/consts'
 
+const CopyButton = ({ text }: { text: string }) => {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text)
+      alert('Copied to clipboard!')
+    } catch (err) {
+      alert('Failed to copy text')
+    }
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="text-blue-500 hover:text-blue-700 focus:outline-none">
+      <ClipboardIcon className="h-5 w-5 inline" />
+    </button>
+  )
+}
+
 // Overwrite default meta in the root.tsx
 export const meta: MetaFunction = () => {
   return {
@@ -208,6 +228,7 @@ type ActionResponse =
     })
   | { exception: string }
   | {}
+
 export default function Index() {
   const loaderData = useLoaderData<typeof defaultFormValues>()
   const actionData = useActionData<ActionResponse>()
@@ -450,7 +471,16 @@ const mobileColumnList = [
 ]
 
 const columnList: Array<ColumnList<FlatCraftingList>> = [
-  { columnId: 'itemName', header: 'Item Name' },
+  {
+    columnId: 'itemName',
+    header: 'Item Name',
+    accessor: ({ row: { itemName } }) => (
+      <div className="flex items-center justify-between">
+        <span>{itemName}</span>
+        <CopyButton text={itemName} />
+      </div>
+    )
+  },
   {
     columnId: 'profitEst',
     header: 'Profit Est per Craft.',

app/tailwind.css

@@ -2503,6 +2503,11 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }