diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index 6291737e..bf9b81e9 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -73,13 +73,44 @@
flex-direction: row;
}
- .raid, time {
+ .raid, .user, time {
color: $grey-50;
font-size: $font-small;
}
- .raid {
+ .raid, .user {
flex-grow: 1;
}
+
+ .raid {
+ margin-bottom: $unit / 2;
+ }
+
+ .user {
+ display: flex;
+ gap: $unit / 2;
+ align-items: center;
+
+
+ img, .no-user {
+ $diameter: 18px;
+
+ border-radius: $diameter / 2;
+ height: $diameter;
+ width: $diameter;
+ }
+
+ img.gran {
+ background-color: #CEE7FE;
+ }
+
+ img.djeeta {
+ background-color: #FFE1FE;
+ }
+
+ .no-user {
+ background: $grey-80;
+ }
+ }
}
}
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index 4c226d6e..0f2f517c 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -11,7 +11,9 @@ interface Props {
name: string
raid: Raid
grid: GridWeapon[]
- updatedAt: Date
+ user?: User
+ createdAt: Date
+ displayUser: boolean
onClick: (shortcode: string) => void
}
@@ -30,6 +32,11 @@ const GridRep = (props: Props) => {
'empty': !props.raid
})
+ const userClass = classNames({
+ 'user': true,
+ 'empty': !props.user
+ })
+
useEffect(() => {
const newWeapons = Array(numWeapons)
@@ -57,16 +64,47 @@ const GridRep = (props: Props) => {
: ''
}
+ const userImage = () => {
+ if (props.user)
+ return (
+
+ )
+ else
+ return (