西鉄ナンバリング対応

src/components/NumberingIcon.tsx

@@ -25,6 +25,7 @@ import NumberingIconSMR from './NumberingIconSMR'
 import NumberingIconSanyo from './NumberingIconSanyo'
 import NumberingIconSquare from './NumberingIconSquare'
 import NumberingIconTWR from './NumberingIconTWR'
+import NumberingNishitetsu from './NumberingNishitetsu'
 
 type Props = {
   shape: string
@@ -243,6 +244,14 @@ const NumberingIconOriginal: React.FC<Props> = ({
           stationNumber={stationNumber}
         />
       )
+    case MARK_SHAPE.NISHITETSU:
+      return (
+        <NumberingNishitetsu
+          lineColor={lineColor}
+          stationNumber={stationNumber}
+          size={size}
+        />
+      )
     default:
       return null
   }

src/components/NumberingNishitetsu.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FONTS, NUMBERING_ICON_SIZE, NumberingIconSize } from '../constants'
+import isTablet from '../utils/isTablet'
+import NumberingIconReversedSquare from './NumberingIconReversedSquare'
+import Typography from './Typography'
+
+type Props = {
+  stationNumber: string
+  lineColor: string
+  size?: NumberingIconSize
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: isTablet ? 84 * 1.5 : 84,
+    height: isTablet ? 55 * 1.5 : 55,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: 'white',
+    padding: 4,
+    borderRadius: 4,
+    gap: 4,
+  },
+  rootMediumContainer: {
+    width: 38 * 1.5,
+    height: 38,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: 'white',
+  },
+  lineSymbol: {
+    width: '35%',
+    fontSize: isTablet ? 18 * 1.5 : 18,
+    textAlign: 'center',
+    fontFamily: FONTS.RobotoBold,
+  },
+  stationNumberContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
+  },
+  stationNumber: {
+    color: '#231f20',
+    fontSize: isTablet ? 28 * 1.5 : 28,
+    textAlign: 'center',
+    fontFamily: FONTS.RobotoBold,
+  },
+})
+
+const NumberingIconNishitetsu: React.FC<Props> = ({
+  stationNumber: stationNumberRaw,
+  lineColor,
+  size,
+}: Props) => {
+  const darkText = false
+  const [lineSymbol, ...stationNumberRest] = stationNumberRaw.split('-')
+  const stationNumber = stationNumberRest.join('')
+
+  if (size === NUMBERING_ICON_SIZE.SMALL) {
+    return (
+      <NumberingIconReversedSquare
+        stationNumber={stationNumberRaw}
+        lineColor={lineColor}
+        size={NUMBERING_ICON_SIZE.SMALL}
+      />
+    )
+  }
+
+  if (size === NUMBERING_ICON_SIZE.MEDIUM) {
+    return (
+      <NumberingIconReversedSquare
+        stationNumber={stationNumberRaw}
+        lineColor={lineColor}
+        size={NUMBERING_ICON_SIZE.MEDIUM}
+      />
+    )
+  }
+
+  return (
+    <View style={[styles.root, { backgroundColor: lineColor }]}>
+      <Typography
+        style={[styles.lineSymbol, { color: darkText ? '#231f20' : 'white' }]}
+      >
+        {lineSymbol}
+      </Typography>
+      <View style={styles.stationNumberContainer}>
+        <Typography style={styles.stationNumber}>{stationNumber}</Typography>
+      </View>
+    </View>
+  )
+}
+
+export default React.memo(NumberingIconNishitetsu)

src/constants/numbering.ts

@@ -32,6 +32,7 @@ export const MARK_SHAPE = {
   KEISEI: 'KEISEI',
   NTL: 'NTL',
   SMR: 'SMR',
+  NISHITETSU: 'NISHITETSU',
 } as const
 
 export const NUMBERING_ICON_SIZE = {