From 78202a49dfa83544f22e1a765fa0e22329d2668b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 22 Aug 2023 01:24:50 -0700
Subject: [PATCH] Create LoadingRep

This is a skeleton rep that can be used when loading
---
 components/reps/LoadingRep/index.module.scss | 150 +++++++++++++++++++
 components/reps/LoadingRep/index.tsx         |  81 ++++++++++
 2 files changed, 231 insertions(+)
 create mode 100644 components/reps/LoadingRep/index.module.scss
 create mode 100644 components/reps/LoadingRep/index.tsx

diff --git a/components/reps/LoadingRep/index.module.scss b/components/reps/LoadingRep/index.module.scss
new file mode 100644
index 00000000..f5221a0d
--- /dev/null
+++ b/components/reps/LoadingRep/index.module.scss
@@ -0,0 +1,150 @@
+.gridRep {
+  aspect-ratio: 3/2;
+  border: 1px solid transparent;
+  border-radius: $card-corner;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: $unit;
+  padding: $unit-2x;
+  min-width: 320px;
+  width: 100%;
+
+  .placeholder {
+    // background: var(--placeholder-bg);
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background-color: #f6f7f8;
+    background: linear-gradient(
+      to right,
+      var(--placeholder-bg) 8%,
+      var(--placeholder-bg-accent) 18%,
+      var(--placeholder-bg) 33%
+    );
+    background-size: 1200px 104px;
+
+    &.small {
+      border-radius: calc($font-small / 2);
+      height: $font-small;
+    }
+
+    &.regular {
+      border-radius: calc($font-regular / 2);
+      height: $font-regular;
+    }
+  }
+
+  & > .weaponGrid {
+    aspect-ratio: 2/0.95;
+    display: grid;
+    grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
+    grid-gap: $unit; /* add a gap of 8px between grid items */
+
+    .weapon {
+      border-radius: $item-corner-small;
+    }
+
+    .mainhand.weapon {
+      aspect-ratio: 73/153;
+      display: grid;
+      grid-column: 1 / 2; /* spans one column */
+      height: calc(100% - $unit-fourth);
+    }
+
+    .weapons {
+      display: grid; /* make the right-images container a grid */
+      grid-template-columns: repeat(
+        3,
+        1fr
+      ); /* create 3 columns, each taking up 1 fraction */
+      grid-template-rows: repeat(
+        3,
+        1fr
+      ); /* create 3 rows, each taking up 1 fraction */
+      gap: $unit;
+      // column-gap: $unit;
+      // row-gap: $unit-2x;
+    }
+
+    .grid.weapon {
+      aspect-ratio: 280 / 160;
+      display: grid;
+    }
+
+    .mainhand.weapon img[src*='jpg'],
+    .grid.weapon img[src*='jpg'] {
+      border-radius: 4px;
+      width: 100%;
+    }
+  }
+
+  .details {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-half;
+
+    .top {
+      display: flex;
+      flex-direction: row;
+      gap: calc($unit / 2);
+      align-items: center;
+
+      .info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: calc($unit / 2);
+
+        .title {
+          width: 100%;
+        }
+      }
+    }
+
+    .attributed {
+      display: flex;
+      gap: $unit-half;
+      align-items: center;
+      justify-content: space-between;
+
+      .user {
+        display: flex;
+        flex-grow: 1;
+        gap: calc($unit / 2);
+        align-items: center;
+
+        .image {
+          $diameter: 18px;
+
+          border-radius: calc($diameter / 2);
+          height: $diameter;
+          width: $diameter;
+        }
+
+        .text {
+          border-radius: calc($font-small / 2);
+          height: $font-small;
+          width: 40%;
+        }
+      }
+
+      .timestamp {
+        width: 20%;
+      }
+    }
+  }
+}
+
+@keyframes placeHolderShimmer {
+  $width: 400px;
+
+  0% {
+    background-position: ($width * -1) 0;
+  }
+  100% {
+    background-position: $width 0;
+  }
+}
diff --git a/components/reps/LoadingRep/index.tsx b/components/reps/LoadingRep/index.tsx
new file mode 100644
index 00000000..171afe3c
--- /dev/null
+++ b/components/reps/LoadingRep/index.tsx
@@ -0,0 +1,81 @@
+import classNames from 'classnames'
+import styles from './index.module.scss'
+
+interface Props {}
+
+const LoadingRep = (props: Props) => {
+  const numWeapons: number = 9
+
+  const mainhandClasses = classNames({
+    [styles.weapon]: true,
+    [styles.mainhand]: true,
+    [styles.placeholder]: true,
+  })
+
+  const weaponClasses = classNames({
+    [styles.weapon]: true,
+    [styles.grid]: true,
+    [styles.placeholder]: true,
+  })
+
+  return (
+    <div className={styles.gridRep}>
+      <div className={styles.details}>
+        <div className={styles.top}>
+          <div className={styles.info}>
+            <div
+              className={classNames({
+                [styles.title]: true,
+                [styles.placeholder]: true,
+                [styles.regular]: true,
+              })}
+            />
+            <div className={styles.properties}>
+              <span className={styles.raid} />
+            </div>
+          </div>
+        </div>
+        <div className={styles.attributed}>
+          <span className={styles.user}>
+            <figure
+              className={classNames({
+                [styles.image]: true,
+                [styles.placeholder]: true,
+              })}
+            />
+            <span
+              className={classNames({
+                [styles.text]: true,
+                [styles.placeholder]: true,
+                [styles.small]: true,
+              })}
+            />
+          </span>
+          <div
+            className={classNames({
+              [styles.timestamp]: true,
+              [styles.placeholder]: true,
+              [styles.small]: true,
+            })}
+          />
+        </div>
+      </div>
+      <div className={styles.weaponGrid}>
+        <div className={mainhandClasses} />
+
+        <ul className={styles.weapons}>
+          {Array.from(Array(numWeapons)).map((x, i) => {
+            return (
+              <li
+                key={`placeholder-${Math.random()}`}
+                className={weaponClasses}
+              />
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default LoadingRep