Add weapon filter icons

src/lib/honkai3rd/weapons.ts

@@ -33,3 +33,66 @@ export interface WeaponData {
   originalWeapons?: string[]
   sources?: SourceData[]
 }
+
+export const weaponCategories = [
+  {
+    value: 'pistol',
+    label: 'Pistols',
+    krLabel: '쌍권총',
+    icon: 'weapon-icons/weapon-pistol',
+  },
+  {
+    value: 'katana',
+    label: 'Katanas',
+    krLabel: '태도',
+    icon: 'weapon-icons/weapon-katana',
+  },
+  {
+    value: 'cannon',
+    label: 'Cannons',
+    krLabel: '대포',
+    icon: 'weapon-icons/weapon-cannon',
+  },
+  {
+    value: 'greatsword',
+    label: 'Greatswords',
+    krLabel: '대검',
+    icon: 'weapon-icons/weapon-claymore',
+  },
+  {
+    value: 'cross',
+    label: 'Crosses',
+    krLabel: '십자가',
+    icon: 'weapon-icons/weapon-cross',
+  },
+  {
+    value: 'gauntlet',
+    label: 'Gauntlets',
+    krLabel: '건틀릿',
+    icon: 'weapon-icons/weapon-gauntlet',
+  },
+  {
+    value: 'scythe',
+    label: 'Scythes',
+    krLabel: '낫',
+    icon: 'weapon-icons/weapon-scythe',
+  },
+  {
+    value: 'lance',
+    label: 'Lances',
+    krLabel: '랜스',
+    icon: 'weapon-icons/weapon-lance',
+  },
+  {
+    value: 'bow',
+    label: 'Bows',
+    krLabel: '활',
+    icon: 'weapon-icons/weapon-bow',
+  },
+  {
+    value: 'chakram',
+    label: 'Chakram',
+    krLabel: '차크람',
+    icon: 'weapon-icons/weapon-chakram',
+  },
+]

src/pages/honkai3rd/prints/weapons/[weaponId].tsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
+import { Flex, Box, Card, Heading, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import SquareImageBox from '../../../../components/atoms/SquareImageBox'
-import { WeaponData } from '../../../../lib/honkai3rd/weapons'
+import { weaponCategories, WeaponData } from '../../../../lib/honkai3rd/weapons'
 import { generateI18NPaths, getI18NProps } from '../../../../server/i18n'
 import {
   getWeaponById,
@@ -30,7 +30,10 @@ const WeaponShowPage = ({
 }: WeaponShowPageProps) => {
   const { t } = useTranslation()
 
-  const weaponCategory = t(`weapons-show.${weapon.category}`)
+  const weaponCategoryName = t(`weapons-show.${weapon.category}`)
+  const weaponCategory = weaponCategories.find(
+    (category) => category.value === weapon.category
+  )
 
   return (
     <Box p={3}>
@@ -52,7 +55,17 @@ const WeaponShowPage = ({
               query: { filter: weapon.category },
             }}
           >
-            {weaponCategory}
+            <Flex>
+              {weaponCategory != null && (
+                <SquareImageBox
+                  size={30}
+                  src={`${assetsBucketBaseUrl}/honkai3rd/${weaponCategory.icon}.png`}
+                  alt={weaponCategoryName}
+                  mr={1}
+                />
+              )}
+              {weaponCategoryName}
+            </Flex>
           </PageLink>
         </Box>
         <Box p={2} sx={{ borderBottom: 'default' }}>

src/pages/honkai3rd/weapons/[weaponId].tsx

@@ -1,9 +1,9 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card, Heading, Paragraph } from '@theme-ui/components'
+import { Flex, Box, Card, Heading, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
-import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import { weaponCategories, WeaponData } from '../../../lib/honkai3rd/weapons'
 import { generateI18NPaths, getI18NProps } from '../../../server/i18n'
 import {
   getWeaponById,
@@ -33,7 +33,10 @@ const WeaponShowPage = ({
 }: WeaponShowPageProps) => {
   const { t } = useTranslation()
 
-  const weaponCategory = t(`weapons-show.${weapon.category}`)
+  const weaponCategoryName = t(`weapons-show.${weapon.category}`)
+  const weaponCategory = weaponCategories.find(
+    (category) => category.value === weapon.category
+  )
 
   return (
     <Honkai3rdLayout>
@@ -43,7 +46,7 @@ const WeaponShowPage = ({
         )}`}
         description={`${t('common.honkai-3rd')} ${t(
           'weapons-show.weapon'
-        )} / ${'⭐'.repeat(weapon.rarity)} / ${weaponCategory} / ATK : ${
+        )} / ${'⭐'.repeat(weapon.rarity)} / ${weaponCategoryName} / ATK : ${
           weapon.atk
         } / CRT : ${weapon.crt}`}
       />
@@ -75,10 +78,20 @@ const WeaponShowPage = ({
             <PageLink
               href={{
                 pathname: '/honkai3rd/weapons',
-                query: { filter: weapon.category },
+                query: { category: weapon.category },
               }}
             >
-              {weaponCategory}
+              <Flex>
+                {weaponCategory != null && (
+                  <SquareImageBox
+                    size={30}
+                    src={`${assetsBucketBaseUrl}/honkai3rd/${weaponCategory.icon}.png`}
+                    alt={weaponCategoryName}
+                    mr={1}
+                  />
+                )}
+                {weaponCategoryName}
+              </Flex>
             </PageLink>
           </Box>
           <Box p={2} sx={{ borderBottom: 'default' }}>

src/pages/honkai3rd/weapons/index.tsx

@@ -6,7 +6,7 @@ import { pick } from 'ramda'
 import { useMemo } from 'react'
 import FilterButton from '../../../components/atoms/FilterButton'
 import { useRouter } from 'next/router'
-import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import { weaponCategories, WeaponData } from '../../../lib/honkai3rd/weapons'
 import WeaponCard from '../../../components/molecules/WeaponCard'
 import { getI18NProps } from '../../../server/i18n'
 import { NextPageContext } from 'next'
@@ -24,17 +24,8 @@ interface WeaponListPageProps {
 }
 
 const weaponFilterOptions = [
-  { value: 'all', label: 'All', krLabel: '전체' },
+  { value: 'all', label: 'All', krLabel: '전체', icon: undefined },
-  { value: 'pistol', label: 'Pistols', krLabel: '쌍권총' },
+  ...weaponCategories,
-  { value: 'katana', label: 'Katanas', krLabel: '태도' },
-  { value: 'cannon', label: 'Cannons', krLabel: '대포' },
-  { value: 'greatsword', label: 'Greatswords', krLabel: '대검' },
-  { value: 'cross', label: 'Crosses', krLabel: '십자가' },
-  { value: 'gauntlet', label: 'Gauntlets', krLabel: '건틀릿' },
-  { value: 'scythe', label: 'Scythes', krLabel: '낫' },
-  { value: 'lance', label: 'Lances', krLabel: '랜스' },
-  { value: 'bow', label: 'Bows', krLabel: '활' },
-  { value: 'chakram', label: 'Chakram', krLabel: '차크람' },
 ]
 
 const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
@@ -80,12 +71,13 @@ const WeaponListPage = ({ weaponDataList }: WeaponListPageProps) => {
           <Box>
             <Heading as='h3'>{t('weapons-list.filter-by-category')}</Heading>
             <Flex mb={2} sx={{ flexWrap: 'wrap' }}>
-              {weaponFilterOptions.map(({ value, label, krLabel }) => {
+              {weaponFilterOptions.map(({ value, label, krLabel, icon }) => {
                 return (
                   <FilterButton
                     key={value}
                     href={`?category=${value}`}
                     active={value === categoryFilter}
+                    icon={icon}
                     label={translate(locale, { 'ko-KR': krLabel }, label)}
                     m={1}
                   />