Merge pull request #526 from true-runes/development

v18.0.0

.env.production

@@ -1,3 +1,4 @@
 # .env.production
 NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-52G88WJ
 BUGSNAG_API_KEY=
+NEXT_PUBLIC_UNITE_ATTACKS_API_URL=https://headquarters.suikoden.info/unite_attacks

components/common/VoteDeadLineCard.tsx

@@ -1,5 +1,4 @@
 import type { NextPage } from 'next'
-import Link from 'next/link'
 
 export const VoteDeadLineCard: NextPage = () => {
   return (
@@ -14,9 +13,23 @@ export const VoteDeadLineCard: NextPage = () => {
                 <div className="my-1" />
 
                 <div className="text-left">
-                  <p>①オールキャラ部門</p>
+                  <p>
+                    <a
+                      href="#all-characters-division"
+                      className="underline underline-offset-4 text-blue-500 hover:text-blue-900"
+                    >
+                      ①オールキャラ部門
+                    </a>
+                  </p>
                   <div className="mb-1" />
-                  <p>②協力攻撃部門</p>
+                  <p>
+                    <a
+                      href="#unite-attacks-division"
+                      className="underline underline-offset-4 text-blue-500 hover:text-blue-900"
+                    >
+                      ②協力攻撃部門
+                    </a>
+                  </p>
                 </div>
 
                 <div className="my-1" />

components/unite-attacks-list/AttacksList.tsx

@@ -0,0 +1,63 @@
+import type { NextPage } from 'next'
+import useTranslation from 'next-translate/useTranslation'
+
+type Attack = {
+  id: number
+  name: string
+  name_en: string
+  character_names: string
+  page_annotation: string
+}
+
+type ApiResponse = {
+  [key: string]: Attack[]
+}
+
+type Props = {
+  apiResponse: ApiResponse
+}
+
+export const AttacksList: NextPage<Props> = ({ apiResponse }) => {
+  const { lang } = useTranslation('')
+
+  const titleNames = Object.keys(apiResponse)
+
+  return (
+    <>
+      {titleNames.map((title: string) => {
+        return (
+          <>
+            <h2 className="text-xl font-bold pb-8 text-center" key={title}>
+              {title}
+            </h2>
+            <div>
+              <div className="pb-8 max-w-md">
+                <ul className="list text-left pl-24 pr-24 max-w-md">
+                  {apiResponse[title].map((attack: Attack) => {
+                    return (
+                      <li key={attack.id} className="pb-4">
+                        <span>
+                          {lang === 'ja' ? attack.name : attack.name_en}
+                        </span>
+                        <br />
+                        <span className="text-xs">
+                          {attack.character_names}
+                        </span>
+                        <br />
+                        {attack.page_annotation && (
+                          <span className="text-xs">
+                            ※{attack.page_annotation}
+                          </span>
+                        )}
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            </div>
+          </>
+        )
+      })}
+    </>
+  )
+}