Use Navigation Card Component on Homepage

cornell-dti · Oct 6, 2024 · 141e129 · 141e129
1 parent f64bb99
commit 141e129
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 95 deletions.
diff --git a/frontend/src/components/Common/NavigationCard/NavigationCard.module.css b/frontend/src/components/Common/NavigationCard/NavigationCard.module.css
@@ -1,9 +1,3 @@
-.content {
-  margin-left: 2rem;
-  margin-right: 2rem;
-  padding-top: 2rem;
-}
-
 @media (max-width: 900px) {
   .cardsContainer {
     display: flex;

diff --git a/frontend/src/components/Common/NavigationCard/NavigationCard.tsx b/frontend/src/components/Common/NavigationCard/NavigationCard.tsx
@@ -19,30 +19,28 @@ export default function NavigationCard({ testID, items }: Props): JSX.Element {
 
   return (
     <div data-testid={testID}>
-      <div className={styles.content}>
-        <Card.Group className={styles.cardsContainer}>
-          {items.map(
-            ({ header, description, link, adminOnly }) =>
-              (!isProduction || !adminOnly || hasAdminPermission) && (
-                <Card key={link}>
-                  <Card.Content>
-                    <Card.Header>{header}</Card.Header>
-                    <Card.Description>{description}</Card.Description>
-                  </Card.Content>
-                  <Card.Content extra>
-                    <div className="ui one buttons">
-                      <Link href={link}>
-                        <Button basic color="blue">
-                          Go To
-                        </Button>
-                      </Link>
-                    </div>
-                  </Card.Content>
-                </Card>
-              )
-          )}
-        </Card.Group>
-      </div>
+      <Card.Group className={styles.cardsContainer}>
+        {items.map(
+          ({ header, description, link, adminOnly }) =>
+            (!isProduction || !adminOnly || hasAdminPermission) && (
+              <Card key={link}>
+                <Card.Content>
+                  <Card.Header>{header}</Card.Header>
+                  <Card.Description>{description}</Card.Description>
+                </Card.Content>
+                <Card.Content extra>
+                  <div className="ui one buttons">
+                    <Link href={link}>
+                      <Button basic color="blue">
+                        Go To
+                      </Button>
+                    </Link>
+                  </div>
+                </Card.Content>
+              </Card>
+            )
+        )}
+      </Card.Group>
     </div>
   );
 }
diff --git a/frontend/src/components/Homepage/Homepage/Homepage.module.css b/frontend/src/components/Homepage/Homepage/Homepage.module.css
@@ -21,43 +21,18 @@
 }
 
 .sectionDescription {
-  min-height: 6rem;
+  min-height: 4rem;
   margin-bottom: 1rem;
 }
 
-.card {
-  display: flex;
-  width: 40%;
-  margin-left: 2rem;
-  margin-bottom: 2rem;
-}
-
-.devCard {
-  margin-left: 2rem;
-  margin-bottom: 2rem;
-}
-
 @media (max-width: 900px) {
   .quickActions {
     display: flex;
     flex-direction: column;
   }
 
-  .card {
-    display: flex;
-    width: 100%;
-    margin-top: 2rem;
-    margin-bottom: 0;
-  }
-
   .sectionDescription {
     min-height: 0;
     margin-bottom: 1rem;
   }
-
-  .quick {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
 }
diff --git a/frontend/src/components/Homepage/Homepage/Homepage.tsx b/frontend/src/components/Homepage/Homepage/Homepage.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import React from 'react';
-import { Button, Card, Divider } from 'semantic-ui-react';
+import { Divider } from 'semantic-ui-react';
 import styles from './Homepage.module.css';
 
-import { NavigationCardItem } from '../../Common/NavigationCard/NavigationCard';
+import NavigationCard, { NavigationCardItem } from '../../Common/NavigationCard/NavigationCard';
 
 const everyoneItems: readonly NavigationCardItem[] = [
   {
@@ -37,31 +37,6 @@ const devItems: readonly NavigationCardItem[] = [
   }
 ];
 
-const NavCard = ({
-  className,
-  header,
-  description,
-  link
-}: NavigationCardItem & { className?: string }): JSX.Element => (
-  <div className={className ? `styles[${className}]` : styles.card}>
-    <Card key={link}>
-      <Card.Content>
-        <Card.Header>{header}</Card.Header>
-        <Card.Description>{description}</Card.Description>
-      </Card.Content>
-      <Card.Content extra>
-        <div className="ui one buttons">
-          <Link href={link}>
-            <Button basic color="blue">
-              Go To
-            </Button>
-          </Link>
-        </div>
-      </Card.Content>
-    </Card>
-  </div>
-);
-
 const Homepage: React.FC = () => (
   <div className={styles.Homepage} data-testid="Homepage">
     <div className={styles.content}>
@@ -88,11 +63,7 @@ const Homepage: React.FC = () => (
           <p className={styles.sectionDescription}>
             Check out your profile or log your attendance at a DTI event!
           </p>
-          <Card.Group className={styles.quick}>
-            {everyoneItems.map((item) => (
-              <NavCard key={item.link} {...item} />
-            ))}
-          </Card.Group>
+          <NavigationCard items={everyoneItems} />
         </div>
 
         <div>
@@ -105,11 +76,7 @@ const Homepage: React.FC = () => (
               profile you use for your subteam.
             </b>
           </p>
-          <Card.Group className={styles.quick}>
-            {devItems.map((item) => (
-              <NavCard className={styles.devCard} key={item.link} {...item} />
-            ))}
-          </Card.Group>
+          <NavigationCard items={devItems} />
         </div>
       </div>
     </div>

diff --git a/frontend/src/pages/admin/index.module.css b/frontend/src/pages/admin/index.module.css
@@ -0,0 +1,5 @@
+.content {
+  margin-left: 2rem;
+  margin-right: 2rem;
+  padding-top: 2rem;
+}
diff --git a/frontend/src/pages/admin/index.tsx b/frontend/src/pages/admin/index.tsx
@@ -2,6 +2,8 @@ import NavigationCard, {
   NavigationCardItem
 } from '../../components/Common/NavigationCard/NavigationCard';
 
+import styles from './index.module.css';
+
 const navCardItems: readonly NavigationCardItem[] = [
   {
     header: 'Member Information Review',
@@ -65,5 +67,9 @@ const navCardItems: readonly NavigationCardItem[] = [
   }
 ];
 
-const AdminIndex = (): JSX.Element => <NavigationCard items={navCardItems} />;
+const AdminIndex = (): JSX.Element => (
+  <div className={styles.content}>
+    <NavigationCard items={navCardItems} />
+  </div>
+);
 export default AdminIndex;
diff --git a/frontend/src/pages/forms/index.module.css b/frontend/src/pages/forms/index.module.css
@@ -0,0 +1,5 @@
+.content {
+  margin-left: 2rem;
+  margin-right: 2rem;
+  padding-top: 2rem;
+}
diff --git a/frontend/src/pages/forms/index.tsx b/frontend/src/pages/forms/index.tsx
@@ -2,6 +2,8 @@ import NavigationCard, {
   NavigationCardItem
 } from '../../components/Common/NavigationCard/NavigationCard';
 
+import styles from './index.module.css';
+
 const navCardItems: readonly NavigationCardItem[] = [
   { header: 'Sign-In Form', description: 'Sign in to an event!', link: '/forms/signin' },
   {
@@ -32,5 +34,9 @@ const navCardItems: readonly NavigationCardItem[] = [
   }
 ];
 
-const FormsIndex = (): JSX.Element => <NavigationCard items={navCardItems} />;
+const FormsIndex = (): JSX.Element => (
+  <div className={styles.content}>
+    <NavigationCard items={navCardItems} />
+  </div>
+);
 export default FormsIndex;