Introduce range component for firearms

src/components/FirearmRangeFragment.tsx

@@ -0,0 +1,43 @@
+import { t, Trans } from '@lingui/macro'
+import React from 'react'
+
+import type { Range } from '@/domain/weapon'
+
+const RangeFragment = ({
+  range,
+  compact = false,
+}: {
+  range: Range | null
+  compact?: boolean
+}) => {
+  if (!range) {
+    return '-'
+  }
+
+  if (compact) {
+    return (
+      <>
+        {range.short}/<span title={t`Middle, -4 AB`}>{range.medium}</span>/
+        <span title={t`Long, -8 AB`}>{range.long}</span>
+      </>
+    )
+  } else {
+    return (
+      <ul>
+        <li>
+          <Trans>Short</Trans>: {range.short} <Trans>ft</Trans>
+        </li>
+        <li>
+          <Trans>Medium</Trans>: {range.medium} <Trans>ft</Trans>{' '}
+          <span className='ph-color-muted text-sm'>(-4 AB)</span>
+        </li>
+        <li>
+          <Trans>Long</Trans>: {range.long} <Trans>ft</Trans>
+          <span className='ph-color-muted text-sm'> (-8 AB)</span>
+        </li>
+      </ul>
+    )
+  }
+}
+
+export default RangeFragment

src/components/Inventory/ItemDetails/Details.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import React from 'react'
 
 import DamageFragment from '@/components/DamageFragment'
+import FirearmRangeFragment from '@/components/FirearmRangeFragment'
 import {
   isArmorItem,
   isFirearmItem,
@@ -49,7 +50,7 @@ export const Details = <T extends EquipmentItem>({ item }: { item: T }) => {
           <strong>
             <Trans>Range</Trans>
           </strong>
-          <RangeFragment range={item.range} />
+          <FirearmRangeFragment range={item.range} />
         </div>
       ) : null}