[edit] make EquipItemRowButton id and name copiable

spd789562 · Oct 16, 2024 · 527e8f2 · 527e8f2
1 parent 69e11b0
commit 527e8f2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/drawer/EqupimentDrawer/EquipList.tsx b/src/components/drawer/EqupimentDrawer/EquipList.tsx
@@ -39,7 +39,7 @@ const ColumnCountMap = {
 };
 
 const DefaultHeightMap = {
-  [EquipListType.Row]: 45,
+  [EquipListType.Row]: 36,
   [EquipListType.Icon]: 45,
   [EquipListType.Character]: 90,
 };

diff --git a/src/components/drawer/EqupimentDrawer/EquipitemRowButton.tsx b/src/components/drawer/EqupimentDrawer/EquipitemRowButton.tsx
@@ -5,6 +5,7 @@ import { selectNewItem } from '@/store/character/action';
 
 import { LoadableEquipIcon } from '@/components/elements/LoadableEquipIcon';
 import { Text } from '@/components/ui/text';
+import { PureTextClipboard } from '@/components/ui/clipboard';
 
 export interface EquipItemRowButtonProps {
   item: EquipItem;
@@ -19,6 +20,10 @@ export const EquipItemRowButton = (props: EquipItemRowButtonProps) => {
       isNameTag: props.item.isNameTag,
     });
   }
+  function preventDefault(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
 
   return (
     <EquipItemButtonContainer type="button" onClick={handleClick}>
@@ -27,8 +32,12 @@ export const EquipItemRowButton = (props: EquipItemRowButtonProps) => {
         name={props.item.name}
         isDyeable={props.item.isDyeable}
       />
-      <EquipItemId>{props.item.id}</EquipItemId>
-      <EquipItemName>{props.item.name}</EquipItemName>
+      <EquipItemId onClick={preventDefault}>
+        <PureTextClipboard value={props.item.id.toString()} />
+      </EquipItemId>
+      <EquipItemName onClick={preventDefault}>
+        <PureTextClipboard value={props.item.name} />
+      </EquipItemName>
     </EquipItemButtonContainer>
   );
 };
@@ -40,17 +49,29 @@ const EquipItemButtonContainer = styled('button', {
     display: 'grid',
     gridTemplateColumns: 'auto auto 1fr',
     alignItems: 'center',
+    cursor: 'pointer',
+    '&:hover': {
+      bg: 'gray.3',
+    },
   },
 });
 
 const EquipItemId = styled(Text, {
   base: {
-    width: '6rem',
+    width: '7rem',
+    cursor: 'pointer',
+    '&:hover': {
+      color: 'accent.10',
+    },
   },
 });
 
 const EquipItemName = styled(Text, {
   base: {
     textAlign: 'left',
+    cursor: 'pointer',
+    '&:hover': {
+      color: 'accent.10',
+    },
   },
 });