Added JobSkillResult component

components/JobSkillResult/index.scss

@@ -0,0 +1,71 @@
+.JobSkillResult {
+  border-radius: 6px;
+  display: flex;
+  gap: $unit;
+  padding: $unit * 1.5;
+  align-items: center;
+
+  &:hover {
+    background: $grey-90;
+    cursor: pointer;
+
+    .Info .skill.pill {
+      background: $grey-80;
+    }
+  }
+
+  .Info {
+    display: flex;
+    flex-direction: row;
+    gap: calc($unit / 2);
+    width: 100%;
+
+    .skill.pill {
+      background: $grey-90;
+      border-radius: $unit * 2;
+      color: $grey-00;
+      display: inline;
+      font-size: $font-tiny;
+      font-weight: $medium;
+      padding: calc($unit / 2) $unit;
+
+      &.buffing {
+        background-color: $light-bg-dark;
+        color: $light-text-dark;
+      }
+
+      &.debuffing {
+        background-color: $water-bg-dark;
+        color: $water-text-dark;
+      }
+
+      &.healing {
+        background-color: $wind-bg-dark;
+        color: $wind-text-dark;
+      }
+
+      &.damaging {
+        background-color: $fire-bg-dark;
+        color: $fire-text-dark;
+      }
+
+      &.field {
+        background-color: $dark-bg-dark;
+        color: $dark-text-dark;
+      }
+    }
+
+    h5 {
+      color: #555;
+      display: inline-block;
+      font-size: $font-medium;
+      font-weight: $medium;
+      flex-grow: 1;
+    }
+  }
+
+  img {
+    width: $unit * 6;
+    height: $unit * 6;
+  }
+}

components/JobSkillResult/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from "react"
+import { useRouter } from "next/router"
+import { SkillGroup, skillClassification } from "~utils/skillGroups"
+
+import "./index.scss"
+
+interface Props {
+  data: JobSkill
+  onClick: () => void
+}
+
+const JobSkillResult = (props: Props) => {
+  const router = useRouter()
+  const locale =
+    router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+
+  const skill = props.data
+
+  const [group, setGroup] = useState<SkillGroup | undefined>()
+
+  useEffect(() => {
+    setGroup(skillClassification.find((group) => group.id === skill.color))
+  }, [skill, setGroup, skillClassification])
+
+  const jobSkillUrl = () =>
+    `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-skills/${skill.slug}.png`
+
+  return (
+    <li className="JobSkillResult" onClick={props.onClick}>
+      <img alt={skill.name[locale]} src={jobSkillUrl()} />
+      <div className="Info">
+        <h5>{skill.name[locale]}</h5>
+        <div className={`skill pill ${group?.name["en"].toLowerCase()}`}>
+          {group?.name[locale]}
+        </div>
+      </div>
+    </li>
+  )
+}
+
+export default JobSkillResult