From 5ba31180b7c5e8f32481b152ff0456724a20ab78 Mon Sep 17 00:00:00 2001
From: Tsubasa SEKIGUCHI <oss@tinykitten.me>
Date: Thu, 1 Aug 2024 20:58:53 +0900
Subject: [PATCH] =?UTF-8?q?=E4=BC=8A=E8=B1=86=E7=AE=B1=E6=A0=B9=E7=B7=9A?=
 =?UTF-8?q?=E3=83=8A=E3=83=B3=E3=83=90=E3=83=AA=E3=83=B3=E3=82=B0=E5=AF=BE?=
 =?UTF-8?q?=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/NumberingIconIzuhakone.tsx | 131 ++++++++++++++++++++++
 src/constants/numbering.ts                |   1 +
 3 files changed, 141 insertions(+)
 create mode 100644 src/components/NumberingIconIzuhakone.tsx

diff --git a/src/components/NumberingIcon.tsx b/src/components/NumberingIcon.tsx
index a863d55c0..1c2908f5b 100644
--- a/src/components/NumberingIcon.tsx
+++ b/src/components/NumberingIcon.tsx
@@ -4,6 +4,7 @@ import { MARK_SHAPE, NumberingIconSize } from '../constants'
 import NumberingIconHalfSquare from './NumberingIconHalfSquare'
 import NumberingIconHankyu from './NumberingIconHankyu'
 import NumberingIconHanshin from './NumberingIconHanshin'
+import NumberingIconIzuhakone from './NumberingIconIzuhakone'
 import NumberingIconKeihan from './NumberingIconKeihan'
 import NumberingIconKeikyu from './NumberingIconKeikyu'
 import NumberingIconKeio from './NumberingIconKeio'
@@ -252,6 +253,14 @@ const NumberingIconOriginal: React.FC<Props> = ({
           size={size}
         />
       )
+    case MARK_SHAPE.IZUHAKONE:
+      return (
+        <NumberingIconIzuhakone
+          lineColor={lineColor}
+          size={size}
+          stationNumber={stationNumber}
+        />
+      )
     default:
       return null
   }
diff --git a/src/components/NumberingIconIzuhakone.tsx b/src/components/NumberingIconIzuhakone.tsx
new file mode 100644
index 000000000..d67099397
--- /dev/null
+++ b/src/components/NumberingIconIzuhakone.tsx
@@ -0,0 +1,131 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FONTS, NUMBERING_ICON_SIZE, NumberingIconSize } from '../constants'
+import isTablet from '../utils/isTablet'
+import Typography from './Typography'
+
+type Props = {
+  lineColor: string
+  stationNumber: string
+  size?: NumberingIconSize
+}
+
+const styles = StyleSheet.create({
+  root: {
+    borderWidth: isTablet ? 3 : 2,
+    width: isTablet ? 72 * 1.5 : 72,
+    height: isTablet ? 72 * 1.5 : 72,
+    borderRadius: isTablet ? 72 * 1.5 : 72,
+    overflow: 'hidden',
+    backgroundColor: 'white',
+  },
+  rootTiny: {
+    width: 20,
+    height: 20,
+    borderRadius: 16.8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rootTinySymbol: {
+    color: 'white',
+    fontSize: isTablet ? 8 * 1.5 : 8,
+    fontFamily: FONTS.RobotoBold,
+  },
+  rootMedium: {
+    width: isTablet ? 35 * 1.5 : 35,
+    height: isTablet ? 35 * 1.5 : 35,
+    borderRadius: isTablet ? 35 * 1.5 : 35,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mediumLineSymbol: {
+    fontSize: isTablet ? 16 * 1.5 : 16,
+    fontFamily: FONTS.RobotoBold,
+    color: 'white',
+  },
+  stationNumberBg: {
+    position: 'absolute',
+    width: '100%',
+    height: isTablet ? 36 * 1.5 : 36,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  stationNumber: {
+    fontSize: isTablet ? 30 * 1.5 : 30,
+    fontFamily: FONTS.RobotoBold,
+    textAlign: 'center',
+    color: 'white',
+  },
+  lineSymbolContainer: {
+    width: '100%',
+    height: isTablet ? 36 * 1.5 : 36,
+    top: 0,
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lineSymbol: {
+    fontSize: isTablet ? 30 * 1.5 : 30,
+    textAlign: 'center',
+    fontFamily: FONTS.RobotoBold,
+  },
+  divider: {
+    top: isTablet ? (72 * 1.5) / 2 - 6 : 72 / 2 - 2,
+    position: 'absolute',
+    height: isTablet ? 2 : 1,
+    left: isTablet ? -2 : -1,
+    width: isTablet ? 72 * 1.5 : 72,
+    backgroundColor: 'black',
+  },
+})
+
+const NumberingIconIzuhakone: React.FC<Props> = ({
+  stationNumber: stationNumberRaw,
+  size,
+  lineColor,
+}: Props) => {
+  const lineSymbol = stationNumberRaw.split('-')[0]
+  const stationNumber = stationNumberRaw.split('-')[1]
+
+  if (size === NUMBERING_ICON_SIZE.SMALL) {
+    return (
+      <View style={[styles.rootTiny, { backgroundColor: lineColor }]}>
+        <Typography style={styles.rootTinySymbol}>{lineSymbol}</Typography>
+      </View>
+    )
+  }
+
+  if (size === NUMBERING_ICON_SIZE.MEDIUM) {
+    return (
+      <View style={[styles.rootMedium, { backgroundColor: lineColor }]}>
+        <Typography style={styles.mediumLineSymbol}>{lineSymbol}</Typography>
+      </View>
+    )
+  }
+
+  return (
+    <View
+      style={[
+        styles.root,
+        {
+          borderColor: lineColor,
+        },
+      ]}
+    >
+      <View style={styles.lineSymbolContainer}>
+        <Typography style={[styles.lineSymbol, { color: lineColor }]}>
+          {lineSymbol}
+        </Typography>
+      </View>
+      <View style={[styles.divider, { backgroundColor: lineColor }]} />
+      <View style={[styles.stationNumberBg, { backgroundColor: lineColor }]}>
+        <Typography style={styles.stationNumber}>{stationNumber}</Typography>
+      </View>
+    </View>
+  )
+}
+
+export default NumberingIconIzuhakone
diff --git a/src/constants/numbering.ts b/src/constants/numbering.ts
index 10167d1ca..8bb3a5bd0 100644
--- a/src/constants/numbering.ts
+++ b/src/constants/numbering.ts
@@ -33,6 +33,7 @@ export const MARK_SHAPE = {
   NTL: 'NTL',
   SMR: 'SMR',
   NISHITETSU: 'NISHITETSU',
+  IZUHAKONE: 'IZUHAKONE',
 } as const
 
 export const NUMBERING_ICON_SIZE = {