Extract filter button

src/components/atoms/FilterButton.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@theme-ui/components'
+import React, { useCallback } from 'react'
+import SquareImageBox from './SquareImageBox'
+
+interface FilterButtonProps {
+  active?: boolean
+  icon?: string
+  label: string
+  setFilter: (filter: string) => void
+  value: string
+  m?: string | number
+}
+
+const FilterButton = ({
+  active = false,
+  setFilter,
+  icon,
+  label,
+  value,
+  m,
+}: FilterButtonProps) => {
+  const selectFilter = useCallback(() => {
+    setFilter(value)
+  }, [setFilter, value])
+  return (
+    <Button
+      m={m}
+      py={1}
+      px={2}
+      onClick={selectFilter}
+      className={active ? 'active' : ''}
+    >
+      {icon != null && (
+        <SquareImageBox
+          src={`/assets/honkai3rd/icons/${icon}.png`}
+          alt={label}
+          size={30}
+        />
+      )}
+      {label}
+    </Button>
+  )
+}
+
+export default FilterButton

src/pages/honkai3rd/battlesuits/index.tsx

@@ -1,7 +1,8 @@
-import { Box, Heading, Flex, Text, Link, Button } from '@theme-ui/components'
+import { Box, Heading, Flex, Text, Link } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { pick } from 'ramda'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
+import FilterButton from '../../../components/atoms/FilterButton'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import Honkai3rdNavigator from '../../../components/organisms/Honkai3rdNavigator'
@@ -147,6 +148,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                   setFilter={setFilter}
                   value={value}
                   label={label}
+                  m={1}
                 />
               )
             })}
@@ -161,6 +163,7 @@ const BattlesuitListPage = ({ battlesuits }: BattlesuitListPageProps) => {
                   setFilter={setFilter}
                   value={value}
                   label={label}
+                  m={1}
                 />
               )
             })}
@@ -192,44 +195,6 @@ export async function getStaticProps() {
   }
 }
 
-interface FilterButtonProps {
-  active?: boolean
-  icon?: string
-  label: string
-  setFilter: (filter: string) => void
-  value: string
-}
-
-const FilterButton = ({
-  active = false,
-  setFilter,
-  icon,
-  label,
-  value,
-}: FilterButtonProps) => {
-  const selectFilter = useCallback(() => {
-    setFilter(value)
-  }, [setFilter, value])
-  return (
-    <Button
-      m={1}
-      py={1}
-      px={2}
-      onClick={selectFilter}
-      className={active ? 'active' : ''}
-    >
-      {icon != null && (
-        <SquareImageBox
-          src={`/assets/honkai3rd/icons/${icon}.png`}
-          alt={label}
-          size={30}
-        />
-      )}
-      {label}
-    </Button>
-  )
-}
-
 function isBattlesuitHidden(
   battlesuit: BattlesuitListItemData,
   filter: string