Add new updates

components/about/ChangelogUnit/index.tsx

@@ -71,10 +71,16 @@ const ChangelogUnit = ({ id, type, image }: Props) => {
         src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-grid/${id}_${image}.jpg`
         break
       case 'weapon':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
+        src =
+          image === '03'
+            ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}_${image}.jpg`
+            : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
         break
       case 'summon':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
+        src =
+          image === '04'
+            ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}_${image}.jpg`
+            : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
         break
     }
 

components/about/ContentUpdate/index.tsx

@@ -17,6 +17,7 @@ interface Props {
   event: string
   newItems?: UpdateObject
   uncappedItems?: UpdateObject
+  transcendedItems?: UpdateObject
   numNotes: number
 }
 const ContentUpdate = ({
@@ -25,6 +26,7 @@ const ContentUpdate = ({
   event,
   newItems,
   uncappedItems,
+  transcendedItems,
   numNotes,
 }: Props) => {
   const { t: updates } = useTranslation('updates')
@@ -100,6 +102,42 @@ const ContentUpdate = ({
     return section
   }
 
+  function transcendItemElements(key: 'character' | 'weapon' | 'summon') {
+    let elements: React.ReactNode[] = []
+    if (transcendedItems && transcendedItems[key]) {
+      const items = transcendedItems[key]
+      elements = items
+        ? items.map((id) => {
+            return key === 'character' || key === 'summon' ? (
+              <ChangelogUnit id={id} type={key} key={id} image="04" />
+            ) : (
+              <ChangelogUnit id={id} type={key} key={id} image="03" />
+            )
+          })
+        : []
+    }
+    return elements
+  }
+
+  function transcendItemSection(key: 'character' | 'weapon' | 'summon') {
+    let section: React.ReactNode = ''
+
+    if (transcendedItems && transcendedItems[key]) {
+      const items = transcendedItems[key]
+      section =
+        items && items.length > 0 ? (
+          <section className={styles[`${key}s`]}>
+            <h4>{updates(`labels.transcends.${key}s`)}</h4>
+            <div className={styles.items}>{transcendItemElements(key)}</div>
+          </section>
+        ) : (
+          ''
+        )
+    }
+
+    return section
+  }
+
   return (
     <section
       className={classNames({
@@ -118,10 +156,13 @@ const ContentUpdate = ({
       <div className={styles.contents}>
         {newItemSection('character')}
         {uncapItemSection('character')}
+        {transcendItemSection('character')}
         {newItemSection('weapon')}
         {uncapItemSection('weapon')}
+        {transcendItemSection('weapon')}
         {newItemSection('summon')}
         {uncapItemSection('summon')}
+        {transcendItemSection('summon')}
       </div>
       {numNotes > 0 ? (
         <div className={styles.notes}>

components/about/UpdatesPage/index.tsx

@@ -78,6 +78,52 @@ const UpdatesPage = () => {
   return (
     <div className={classes}>
       <h1>{common('about.segmented_control.updates')}</h1>
+      <ContentUpdate
+        version="2024-01U3"
+        dateString="2024/01/18"
+        event="events.content"
+        newItems={{
+          character: ['3040506000'],
+        }}
+        uncappedItems={{
+          character: ['3040313000'],
+        }}
+      />
+      <ContentUpdate
+        version="2024-01F"
+        dateString="2024/01/15"
+        event="events.flash"
+        newItems={{
+          character: ['3040508000', '3040507000'],
+          weapon: ['1040422400', '1040219000'],
+        }}
+        transcendedItems={{
+          weapon: [
+            '1040212600',
+            '1040212500',
+            '1040310700',
+            '1040310600',
+            '1040415100',
+            '1040415000',
+            '1040809500',
+            '1040809400',
+            '1040911100',
+            '1040911000',
+            '1040017100',
+            '1040017000',
+          ],
+        }}
+      />
+      <ContentUpdate
+        version="2024-01U2"
+        dateString="2024/01/12"
+        event="events.content"
+        newItems={{
+          character: ['3040504000', '3040505000'],
+          weapon: ['1040618300'],
+          summon: ['2040426000'],
+        }}
+      />
       <ContentUpdate
         version="2024-01U"
         dateString="2024/01/05"