Add CharacterResult

src/components/CharacterResult/index.css

@@ -0,0 +1,48 @@
+.CharacterResult {
+    -webkit-font-smoothing: antialiased;
+
+    border-radius: 6px;
+    display: flex;
+    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
+    gap: 8px;
+    padding: 12px;
+}
+
+.CharacterResult img {
+    background: #e9e9e9;
+    border-radius: 6px;
+    display: inline-block;
+    height: 72px;
+    width: 120px;
+}
+
+.CharacterResult h5 {
+    color: #555;
+    display: inline-block;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 2px 4px 4px 0;
+}
+
+.CharacterResult .WeaponLabelIcon {
+    margin-right: 4px;
+}
+
+.CharacterResult .stars {
+    display: inline-block;
+    color: #FFA15E;
+    font-size: 21px;
+}
+
+.CharacterResult .stars > span {
+    color: #65DAFF;
+}
+
+.CharacterResult:hover {
+    background: #e9e9e9;
+    cursor: pointer;
+}
+
+.CharacterResult:hover .image_placeholder {
+    background: #dadada;
+}

src/components/CharacterResult/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import WeaponLabelIcon from '~components/WeaponLabelIcon'
+
+import images from '../../images/chara-grid/*.jpg'
+
+import './index.css'
+
+interface Props {
+    data: Character
+    onClick: () => void
+}
+
+const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
+
+class CharacterResult extends React.Component<Props> {
+    render() {
+        let imgSrc
+
+        const character = this.props.data
+        if (process.env.NODE_ENV === 'development') {
+            imgSrc = images[character.granblue_id]
+        } else if (process.env.NODE_ENV === 'production') {
+            imgSrc = `${process.env.SIERO_IMG_URL}/chara-grid/${character.granblue_id}.jpg`
+        }
+
+        return (
+            <li className="CharacterResult" onClick={this.props.onClick}>
+                <img alt={character.name.en} src={imgSrc} />
+                <div>
+                    <div>
+                        <h5>{character.name.en}</h5>
+                        <div className="stars">{(character.rarity == 2) ? '⭑⭑⭑' : '⭑⭑⭑⭑'}{(character.uncap.flb) ? <span>⭑</span> : ''}</div>
+                    </div>
+                    <WeaponLabelIcon labelType={Element[character.element]} />
+                </div>
+            </li>
+        )
+    }
+}
+
+export default CharacterResult