feature(Gems): adding icon and tooltip

xandjiji · Apr 4, 2024 · 400c452 · 400c452
1 parent 034cf9b
commit 400c452
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/apps/exevo-pan/src/assets/svgs/diamond.tsx b/apps/exevo-pan/src/assets/svgs/diamond.tsx
@@ -0,0 +1,5 @@
+export const DiamondIcon = (args: JSX.IntrinsicElements['svg']) => (
+  <svg viewBox="0 -960 960 960" {...args}>
+    <path d="M480-165q-17 0-33-7.5T419-194L113-560q-9-11-13.5-24T95-611q0-9 1.5-18.5T103-647l75-149q11-20 29.5-32t41.5-12h462q23 0 41.5 12t29.5 32l75 149q5 8 6.5 17.5T865-611q0 14-4.5 27T847-560L541-194q-12 14-28 21.5t-33 7.5Zm-95-475h190l-60-120h-70l-60 120Zm55 347v-267H218l222 267Zm80 0 222-267H520v267Zm144-347h106l-60-120H604l60 120Zm-474 0h106l60-120H250l-60 120Z" />
+  </svg>
+)
diff --git a/apps/exevo-pan/src/assets/svgs/index.ts b/apps/exevo-pan/src/assets/svgs/index.ts
@@ -22,6 +22,7 @@ export * from './chevronRight'
 export * from './copy'
 export * from './cross'
 export * from './dashboard'
+export * from './diamond'
 export * from './dice'
 export * from './discord'
 export * from './download'

diff --git a/apps/exevo-pan/src/components/CharacterCard/Parts/Tooltips/Gems.tsx b/apps/exevo-pan/src/components/CharacterCard/Parts/Tooltips/Gems.tsx
@@ -6,21 +6,28 @@ import * as S from './atoms'
 
 type GemsProps = {
   gems: CharacterObject['gems']
+  greaterGems: string[]
 } & React.ComponentPropsWithoutRef<'strong'>
 
-const Gems = ({ gems, ...props }: GemsProps) => {
+const Gems = ({ gems, greaterGems, ...props }: GemsProps) => {
   const { common } = useTranslations()
 
+  const contentJSX = (
+    <S.TitleWrapper {...props}>
+      <S.Icons.Gem />
+      Gems: {Math.max(gems.lesser - 4, 0)}-{Math.max(gems.regular - 4, 0)}-
+      {gems.greater}
+    </S.TitleWrapper>
+  )
+
+  if (greaterGems.length === 0) return contentJSX
+
   return (
     <Tooltip
       aria-label={common.CharacterCard.Tooltips.labels.supremeGems}
-      content={<div>dasd</div>}
+      content={<Lister fullList={greaterGems} partialList={greaterGems} />}
     >
-      <S.TitleWrapper {...props}>
-        <S.Icons.Imbuement />
-        Gems: {Math.max(gems.lesser - 4, 0)}/{Math.max(gems.regular - 4, 0)}/
-        {gems.greater}
-      </S.TitleWrapper>
+      {contentJSX}
     </Tooltip>
   )
 }

diff --git a/apps/exevo-pan/src/components/CharacterCard/Parts/Tooltips/atoms.tsx b/apps/exevo-pan/src/components/CharacterCard/Parts/Tooltips/atoms.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import {
   BookIcon,
   CharmsIcon,
+  DiamondIcon,
   GoblinIcon,
   MagicIcon,
   PeopleIcon,
@@ -40,4 +41,5 @@ export const Icons: Record<string, React.FC<JSX.IntrinsicElements['svg']>> = {
   Hireling: (args) => <Icon icon={<PeopleIcon />} {...args} />,
   Achievements: (args) => <Icon icon={<StarIcon />} {...args} />,
   Boss: (args) => <Icon icon={<GoblinIcon />} {...args} />,
+  Gem: (args) => <Icon icon={<DiamondIcon />} {...args} />,
 }
diff --git a/apps/exevo-pan/src/components/CharacterCard/index.tsx b/apps/exevo-pan/src/components/CharacterCard/index.tsx
@@ -50,6 +50,7 @@ const CharacterCard = ({
     preySlot,
     bossPoints,
     gems,
+    greaterGems,
   } = characterData
 
   const tcInvested = formatNumberWithCommas(characterData.tcInvested)
@@ -103,7 +104,9 @@ const CharacterCard = ({
 
             <S.Checkbox label="Prey Slot" checked={preySlot} />
 
-            <GemsTooltip gems={gems} />
+            <div className="block">
+              <GemsTooltip gems={gems} greaterGems={greaterGems} />
+            </div>
 
             {
               {