From 9580207eae52457d1179aeca5f3a4b46fcddc3de Mon Sep 17 00:00:00 2001
From: Tsubasa SEKIGUCHI <oss@tinykitten.me>
Date: Sat, 20 Jul 2024 20:18:04 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A5=BF=E9=89=84=E3=83=8A=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NumberingIcon.tsx       |   9 +++
 src/components/NumberingNishitetsu.tsx | 100 +++++++++++++++++++++++++
 src/constants/numbering.ts             |   1 +
 3 files changed, 110 insertions(+)
 create mode 100644 src/components/NumberingNishitetsu.tsx

diff --git a/src/components/NumberingIcon.tsx b/src/components/NumberingIcon.tsx
index 4367493b3..a863d55c0 100644
--- a/src/components/NumberingIcon.tsx
+++ b/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
   }
diff --git a/src/components/NumberingNishitetsu.tsx b/src/components/NumberingNishitetsu.tsx
new file mode 100644
index 000000000..025bbba55
--- /dev/null
+++ b/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)
diff --git a/src/constants/numbering.ts b/src/constants/numbering.ts
index 874411e5b..10167d1ca 100644
--- a/src/constants/numbering.ts
+++ b/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 = {