Add the Link component

2021-03-22 15:35:13 -04:00 · 2021-03-22 15:35:13 -04:00 · ab544fc759
parent 08fc9eb3ab
commit ab544fc759
9 changed files with 377 additions and 101 deletions
--- a/frontend/components/Link/index.tsx
+++ b/frontend/components/Link/index.tsx
@ -1,7 +0,0 @@
-import React from "react";
-
-const Link: React.FC = () => {
-  return <div />;
-};
-
-export default Link;
--- a/frontend/components/Links/index.tsx
+++ b/frontend/components/Links/index.tsx
@ -0,0 +1,43 @@
+import React from "react";
+
+const styles = {
+  fontFamily: "Karla",
+};
+
+interface Link {
+  name: string;
+  url: string;
+}
+interface LinkProps {
+  links: Link[];
+}
+
+const Links: React.FC<LinkProps> = ({ links }) => {
+  return (
+    <div
+      className="text-s flex flex-col items-center w-full absolute top-6"
+      style={styles}
+    >
+      <img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
+      <h1 className="font-bold">@uwcsclub</h1>
+      <ul className="flex flex-col my-6 w-full">
+        {links.map(({ name, url }) => (
+          <li key={name + url} className="w-full contents">
+            <a
+              className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
+        hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
+        w-11/12 sm:w-4/12"
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Links;
--- a/frontend/components/index.ts
+++ b/frontend/components/index.ts
@ -1,3 +1,3 @@
-export { default as Link } from "./Link";
+export { default as Links } from "./Links";
 export { default as EditLink } from "./EditLink";
 export { default as Preview } from "./Preview";
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -677,6 +677,182 @@
        "unist-util-find-all-after": "^3.0.2"
      }
    },
+    "@tailwindcss/postcss7-compat": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.3.tgz",
+      "integrity": "sha512-R43aiSzwlybDMhDld8vkSIKPSLXxbbmotZ+I2GIrX+IzFNy9JAByC7Ncf9A81Dg0JLBWHY5m769lBbBnJCF8cw==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "autoprefixer": "^9",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "object-hash": "^2.1.1",
+        "postcss": "^7",
+        "postcss-functions": "^3",
+        "postcss-js": "^2",
+        "postcss-nested": "^4",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.19.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "autoprefixer": {
+          "version": "9.8.6",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "colorette": "^1.2.1",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "dev": true,
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "dev": true,
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+              "dev": true
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
    "@types/json-schema": {
      "version": "7.0.7",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
@ -1579,7 +1755,6 @@
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
      "requires": {
        "path-key": "^3.1.0",
        "shebang-command": "^2.0.0",
@ -3197,8 +3372,7 @@
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
    },
    "isobject": {
      "version": "2.1.0",
@ -4266,8 +4440,7 @@
    "path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
    },
    "path-parse": {
      "version": "1.0.6",
@ -4326,12 +4499,12 @@
      }
    },
    "postcss": {
-      "version": "8.2.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.6.tgz",
-      "integrity": "sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==",
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz",
+      "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==",
      "dev": true,
      "requires": {
-        "colorette": "^1.2.1",
+        "colorette": "^1.2.2",
        "nanoid": "^3.1.20",
        "source-map": "^0.6.1"
      },
@ -4391,13 +4564,41 @@
      }
    },
    "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
      "dev": true,
      "requires": {
        "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "postcss": "^7.0.18"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
      }
    },
    "postcss-less": {
@ -4444,12 +4645,41 @@
      "dev": true
    },
    "postcss-nested": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.4.tgz",
-      "integrity": "sha512-/dimXVqdUAVS2ZiIX0uvyk9UCI825y6LW4TnjG51JTKF89CcorHPAjTUGPF70k2wlQYts5OzfnhYMgfGfHCClQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
      "dev": true,
      "requires": {
-        "postcss-selector-parser": "^6.0.4"
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
      }
    },
    "postcss-resolve-nested-selector": {
@ -4728,6 +4958,25 @@
        "glob": "^7.0.0",
        "postcss": "^8.2.1",
        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.2.7",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz",
+          "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.20",
+            "source-map": "^0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
      }
    },
    "querystring": {
@ -5143,7 +5392,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
      "requires": {
        "shebang-regex": "^3.0.0"
      }
@ -5151,8 +5399,7 @@
    "shebang-regex": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
    },
    "shell-quote": {
      "version": "1.7.2",
@ -5904,6 +6151,25 @@
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true
        },
+        "postcss-js": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+          "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+          "dev": true,
+          "requires": {
+            "camelcase-css": "^2.0.1",
+            "postcss": "^8.1.6"
+          }
+        },
+        "postcss-nested": {
+          "version": "5.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.4.tgz",
+          "integrity": "sha512-/dimXVqdUAVS2ZiIX0uvyk9UCI825y6LW4TnjG51JTKF89CcorHPAjTUGPF70k2wlQYts5OzfnhYMgfGfHCClQ==",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.4"
+          }
+        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -6254,6 +6520,14 @@
      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
    },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
    "whatwg-url": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@ -6268,7 +6542,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
      "requires": {
        "isexe": "^2.0.0"
      }
--- a/frontend/package.json
+++ b/frontend/package.json
@ -32,7 +32,7 @@
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.1.3",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.7",
    "prettier": "^2.2.1",
    "stylelint": "^13.11.0",
    "stylelint-config-standard": "^20.0.0",
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@ -1,9 +1,19 @@
 import type { AppProps } from "next/app";
 import React from "react";
 import "styles/globals.css";
+import Head from "next/head";

 const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => (
-  <Component {...pageProps} />
+  <>
+    <Head>
+      <title>@uwcsclub | LinkList</title>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;600;700&display=swap"
+      ></link>
+    </Head>
+    <Component {...pageProps} />
+  </>
 );

 export default MyApp;
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@ -1,84 +1,23 @@
 import React from "react";
-import Head from "next/head";
 import { GetStaticProps } from "next";
 import styles from "styles/Home.module.css";
+import { Links } from "components";
+
+// TODO: change
+const API = "https://api.thedogapi.com/v1/breeds?limit=10&page=0";

 export const getStaticProps: GetStaticProps = async () => {
-  // TODO: Fetch links here
+  // fetch data here
+  const data = await fetch(API).then((res) => res.json());

  return {
-    props: { links: [] }, // will be passed to the page component as props
-    // Next.js will attempt to re-generate the page:
-    // - When a request comes in
-    // - At most once every second
+    props: { links: data }, // will be passed to the page component as props
    revalidate: 1,
  };
 };

 const Home: React.FC = ({ links }: any) => {
-  console.log({ links });
-
-  // TODO: Remove starter code
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
-    </div>
-  );
+  return <Links links={links} />;
 };

 export default Home;
--- a/frontend/public/csc_logo.png
+++ b/frontend/public/csc_logo.png
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -12,7 +12,25 @@ module.exports = {
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
-    extend: {},
+    extend: {
+      colors: {
+        gray: {
+          450: "#3d3b3c",
+        },
+      },
+      fontSize: {
+        s: ".82rem",
+      },
+    },
+    minWidth: {
+      "9/10": "90%",
+    },
+    maxWidth: {
+      "6/10": "60%",
+    },
+    container: {
+      center: true,
+    },
  },
  variants: {
    extend: {},