Turn card into link; allow image to be squished on mobile

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

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -7,9 +7,15 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  max-width: 400px;
   overflow: hidden;
   padding-bottom: 1rem;
-  width: 400px;
+
+  .imageWrapper {
+    // Enforce a square image while allowing the card to be squished on mobile
+    padding-bottom: 100%;
+    position: relative;
+  }
 
   .details {
     display: flex;

diff --git a/src/components/store/ItemCard/style.module.scss.d.ts b/src/components/store/ItemCard/style.module.scss.d.ts
@@ -2,6 +2,7 @@ export type Styles = {
   cost: string;
   details: string;
   diamond: string;
+  imageWrapper: string;
   itemCard: string;
   outOfStock: string;
   title: string;

diff --git a/src/pages/store/index.tsx b/src/pages/store/index.tsx
@@ -1,9 +1,18 @@
+import { ItemCard } from '@/components/store';
 import withAccessType from '@/lib/hoc/withAccessType';
 import { PermissionService } from '@/lib/services';
 import { GetServerSideProps } from 'next';
 
 const StoreHomePage = () => {
-  return <h1>Store Home Page</h1>;
+  return (
+    <ItemCard
+      image="https://acmucsd.s3.us-west-1.amazonaws.com/portal/profiles/07789a16-8326-4edc-ad2d-fc6193cd1ee3.jpg"
+      cost={42069}
+      title="Nishant (not for sale)"
+      href="/leaderboard"
+      inStock={false}
+    />
+  );
 };
 
 export default StoreHomePage;