Add weapon grid layout

assets/plus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3478 7.04348C11.1317 7.04348 10.9565 6.86829 10.9565 6.65217V1.95652C10.9565 0.875969 10.0805 0 8.99998 0C7.91942 0 7.04345 0.875969 7.04345 1.95652V6.65217C7.04345 6.86829 6.86826 7.04348 6.65214 7.04348H1.95653C0.875971 7.04348 0 7.91945 0 9C0 10.0806 0.875971 10.9565 1.95653 10.9565H6.65214C6.86826 10.9565 7.04345 11.1317 7.04345 11.3478V16.0435C7.04345 17.124 7.91942 18 8.99998 18C10.0805 18 10.9565 17.124 10.9565 16.0435V11.3478C10.9565 11.1317 11.1317 10.9565 11.3478 10.9565H16.0435C17.124 10.9565 18 10.0806 18 9C18 7.91945 17.124 7.04348 16.0435 7.04348H11.3478Z" />
+</svg>

src/WeaponGrid/WeaponGrid.css

@@ -0,0 +1,22 @@
+.WeaponGrid {
+    display: flex;
+    margin-top: 48px;
+    justify-content: center;
+}
+
+.grid-weapons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 528px;
+}
+
+.grid-weapons > * {
+    margin-bottom: 72px;
+    margin-right: 24px;
+
+}
+
+.grid-weapons > *:nth-child(3n+3) {
+    margin-right: 0;
+}

src/WeaponGrid/WeaponGrid.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import './WeaponGrid.css'
+
+import WeaponGridMainhand from '../WeaponGridMainhand/WeaponGridMainhand'
+import WeaponGridUnit from '../WeaponGridUnit/WeaponGridUnit'
+
+const WeaponGrid = () => (
+    <div className="WeaponGrid">
+        <WeaponGridMainhand />
+
+        <div className="grid-weapons">
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+            <WeaponGridUnit />
+        </div>
+    </div>
+)
+
+export default WeaponGrid

src/WeaponGridMainhand/WeaponGridMainhand.css

@@ -0,0 +1,25 @@
+.WeaponGridMainhand {
+    align-items: center;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    display: flex;
+    height: 432px;
+    justify-content: center;
+    margin-right: 24px;
+    transition: all 0.18s ease-in-out;
+    width: 205px;
+}
+
+.WeaponGridMainhand:hover {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+    cursor: pointer;
+    transform: scale(1.05, 1.05);
+}
+
+.WeaponGridMainhand .icon {
+    color: #c9c9c9;
+    height: 20px;
+    width: 20px;
+}

src/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import './WeaponGridMainhand.css'
+
+import Plus from '../../assets/plus.svg'
+
+const WeaponGridUnit = () => (
+    <div className="WeaponGridMainhand">
+        <span className='icon'><Plus /></span>
+    </div>
+)
+
+export default WeaponGridUnit

src/WeaponGridUnit/WeaponGridUnit.css

@@ -0,0 +1,24 @@
+.WeaponGridUnit {
+    align-items: center;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 8px;
+    display: flex;
+    height: 92px;
+    justify-content: center;
+    transition: all 0.18s ease-in-out;
+    width: 160px;
+}
+
+.WeaponGridUnit:hover {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+    cursor: pointer;
+    transform: scale(1.1, 1.1);
+}
+
+.WeaponGridUnit .icon {
+    color: #c9c9c9;
+    height: 20px;
+    width: 20px;
+}

src/WeaponGridUnit/WeaponGridUnit.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import './WeaponGridUnit.css'
+
+import Plus from '../../assets/plus.svg'
+
+const WeaponGridUnit = () => (
+    <div className="WeaponGridUnit">
+        <span className='icon'><Plus /></span>
+    </div>
+)
+
+export default WeaponGridUnit

src/routes/New/New.tsx

@@ -4,6 +4,7 @@ import WeaponGrid from '../../WeaponGrid/WeaponGrid'
 const New = () => (
     <div>
         <h1>New party</h1>
+        <WeaponGrid />
     </div>
 )