Fix styling for GridReps and add new information

components/GridRep/index.scss

@@ -1,54 +1,82 @@
 .GridRep {
-    border: 2px solid transparent;
     border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    padding: $unit * 2;
+
+    &:hover {
+        background: white;
+        cursor: pointer;
+
+        .Grid .grid_weapons .grid_weapon {
+            box-shadow: inset 0 0 1px $grey-70;
+        }
+    }
+
+    .Grid {
         display: flex;
         flex-direction: row;
         flex-shrink: 0;
-    margin: 0 8px 8px 0;
+
-    padding: 4px;
+        .grid_mainhand {
-    height: 148px;
+            margin-right: $unit;
-    width: 311px;
+            height: 139px;
+            width: auto;
         }
 
-.GridRep:hover {
+        .grid_weapons {
-    border: 2px solid #2360C5;
+            display: grid;
-    cursor: pointer;
+            grid-template-columns: 1fr 1fr 1fr;
-}
+            grid-template-rows: 1fr 1fr 1fr;
-
+            gap: $unit;
-.GridRep .weapon {
-    background: white;
-    border-radius: 4px;
-}
-
-.GridRep .grid_mainhand {
-    flex-shrink: 0;
-    height: 136px;
-    width: 65px;
-    margin-right: 8px;
-}
-
-.GridRep .grid_weapons {
-    list-style: none;
             margin: 0;
             padding: 0;
+            width: fit-content;
         }
 
-.GridRep .grid_weapon {
+        .grid_weapon {
             background: white;
             border-radius: 4px;
             float: left;
-    margin: 0 8px 8px 0;
             height: 40px;
             width: 70px;
         }
         
-.GridRep .grid_weapon:nth-child(3n+3) {
+        .grid_mainhand img[src*="jpg"],
-    margin-right: 0;
+        .grid_weapon img[src*="jpg"] {
-}
-
-.GridRep .grid_mainhand img[src*="jpg"],
-.GridRep .grid_weapon img[src*="jpg"] {
             border-radius: 4px;
             width: 100%;
             height: 100%;
         }
+    }
+
+    .Details {
+        display: flex;
+        flex-direction: column;
+        gap: $unit / 2;
+
+        h2 {
+            color: $grey-00;
+            font-size: $font-regular;
+
+            &.empty {
+                color: $grey-50;
+            }
+        }
+
+        .bottom {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .raid, time {
+            color: $grey-50;
+            font-size: $font-small;
+        }
+
+        .raid {
+            flex-grow: 1;
+        }
+    }
+}

components/GridRep/index.tsx

@@ -1,19 +1,37 @@
+
 import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { formatTimeAgo } from '~utils/timeAgo'
 
 import './index.scss'
 
 interface Props {
     shortcode: string
+    name: string
+    raid: Raid
     grid: GridWeapon[]
+    updatedAt: Date
     onClick: (shortcode: string) => void
 }
 
 const GridRep = (props: Props) => {
+
+    console.log(props)
     const numWeapons: number = 9
 
     const [mainhand, setMainhand] = useState<Weapon>()
     const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
 
+    const titleClass = classNames({
+        'empty': !props.name
+    })
+
+    const raidClass = classNames({
+        'raid': true,
+        'empty': !props.raid
+    })
+
     useEffect(() => {
         const newWeapons = Array(numWeapons)
 
@@ -43,6 +61,15 @@ const GridRep = (props: Props) => {
 
     return (
         <div className="GridRep" onClick={navigate}>
+            <div className="Details">
+                <h2 className={titleClass}>{ (props.name) ? props.name : 'Untitled' }</h2>
+                <div className="bottom">
+                    <div className={raidClass}>{ (props.raid) ? props.raid.name.en : 'No raid set' }</div>
+                    <time className="last-updated" dateTime={props.updatedAt.toISOString()}>{formatTimeAgo(props.updatedAt, 'en-us')}</time>
+                </div>
+            </div>
+
+            <div className="Grid">
                 <div className="weapon grid_mainhand">
                     {generateMainhandImage()}
                 </div>
@@ -59,6 +86,7 @@ const GridRep = (props: Props) => {
                     }
                 </ul>
             </div>
+        </div>
     )
 }
 

components/GridRepCollection/index.scss

@@ -1,6 +1,7 @@
 .GridRepCollection {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: auto auto auto;
-    justify-content: center;
+    margin: 0 auto;
     padding: 0;
+    width: fit-content;
 }