Add card background and "out of stock" support

acmucsd · Aug 2, 2023 · 0e0106c · 0e0106c
1 parent f33f1c0
commit 0e0106c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/components/store/ItemCard/index.tsx b/src/components/store/ItemCard/index.tsx
@@ -7,16 +7,19 @@ interface ItemCardProps {
   image: string;
   title: string;
   cost: number;
+  inStock?: boolean;
 }
 
-const ItemCard = ({ image, title, cost }: ItemCardProps) => {
+const ItemCard = ({ image, title, cost, inStock = true }: ItemCardProps) => {
   return (
     <div className={styles.itemCard}>
       <Image src={image} alt={title} width={400} height={400} />
       <div className={styles.details}>
         <p className={styles.title}>{title}</p>
-        <p>
-          {numberFormat.format(cost)} <span className={styles.diamond} />
+        <p className={styles.cost}>
+          {numberFormat.format(cost)}
+          <span className={styles.diamond} />
+          {!inStock && <span className={styles.outOfStock}>Out of stock</span>}
         </p>
       </div>
     </div>

diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -1,11 +1,15 @@
 @use 'src/styles/vars.scss' as vars;
 
 .itemCard {
+  background-color: var(--theme-surface-1);
   border-radius: 0.625rem;
+  box-shadow: 0 4px 4px var(--theme-accent-line-1-transparent);
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  overflow: hidden;
   padding-bottom: 1rem;
+  width: 400px;
 
   .details {
     display: flex;
@@ -22,12 +26,19 @@
       font-size: 1rem;
 
       .diamond {
-        background-color: $light-primary-2;
+        background-color: var(--theme-primary-2);
         border-radius: 2px;
+        display: inline-block;
         height: 0.75em;
+        margin-left: 0.55rem;
+        margin-right: 0.7rem;
         transform: rotate(45deg);
         width: 0.75em;
       }
+
+      .outOfStock {
+        color: #{vars.$danger-1};
+      }
     }
   }
 }
diff --git a/src/components/store/ItemCard/style.module.scss.d.ts b/src/components/store/ItemCard/style.module.scss.d.ts
@@ -3,6 +3,7 @@ export type Styles = {
   details: string;
   diamond: string;
   itemCard: string;
+  outOfStock: string;
   title: string;
 };