Create grid-syste,

Author: alphatrl

.prettierrc

@@ -1,6 +1,6 @@
 {
-  semi: true,
-  trailingComma: 'es5',
-  singleQuote: true,
-  tabWidth: 2,
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2
 }

src/App.scss

@@ -49,7 +49,7 @@ html {
 
 @media (max-width: 350px) {
   .App {
-    width: 90%
+    width: 95%
   }
 }
 

src/components/Card/index.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState, useRef, ReactChild } from 'react';
+
 import './styles.scss';
-import '../../constants/colors.scss';
 
 interface CardProps {
-  title?: string;
-  logo?: string;
-  link?: string;
-  color?: string;
-  newTab?: boolean;
+  children?: ReactChild;
+  style?: object;
 }
 
-const Card: React.FC<CardProps> = ({ title, logo, link, color, newTab }: CardProps) => {
-  const isNewTab = newTab ? '_blank' : '_self';
-  const className = 'card ' + color;
+const Card: React.FC<CardProps> = ({children, style}: CardProps) => {
+  const [height, setHeight] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+
+  useEffect(() => {
+    const updateSquare = () => {
+      const current = containerRef.current;
+      setHeight(height => current ? current.offsetWidth : height);
+    }
+    updateSquare();
+    window.addEventListener("resize", () => updateSquare());
+
+    return (() => window.removeEventListener("resize", () => updateSquare()));
+  }, [])
 
   return (
-    <a href={link} className="cardLink" target={isNewTab}>
-      <div className={className}>
-        <div className="imageView">
-          <span className="material-icons-round md-48">{logo}</span>
-        </div>
-        <div className="label">{title}</div>
-      </div>
-    </a>
+    <div
+      className="box"
+      ref={containerRef}
+      style={{...style, ...{height: height}}}
+    >
+        {children}
+    </div>
   );
-};
-
-Card.defaultProps = {
-  title: '',
-  logo: 'help_outline',
-  link: 'smu.edu.sg',
-  color: 'red',
-  newTab: false,
-};
+}
 
 export default Card;

src/components/Card/styles.scss

@@ -1,90 +1,5 @@
-.card {
-  border-radius: 16px;
-  width: 230px;
-  text-decoration: none;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  transition: filter 200ms ease-in;
-}
-
-.card:hover {
-  filter: brightness(125%);
-}
-
-.cardLink {
-  border-radius: 16px;
-  text-decoration: none;
-}
-
-.imageView {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 90px;
-  height: 90px;
-}
-
-.material-icons-round {
-  font-size: 52px;
-  color: white;
-}
-
-.label {
-  font-size: 24px;
-  font-weight: 600;
-  color: white;
-}
-
-/* Mobile Friendly */
-
-@media (max-width: 750px) {
-  .card {
-    border-radius: 12px;
-    width: 90%;
-    padding-bottom: 8px;
-    padding-top: 8px;
-  }
-
-  .imageView {
-    display: flex;
-    width: 60px;
-    height: 60px;
-  }
-
-  .label {
-    font-size: 16px;
-    padding-right: 8px;;
-  }
-
-  .material-icons-round {
-    font-size: 36px;
-  }
-}
-
-@media (max-width: 480px) {
-  .card {
-    border-radius: 12px;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    width: 90%;
-    padding-left: 8px;
-    padding-bottom: 8px;
-    padding-top: 8px;
-  }
-
-  .imageView {
-    display: flex;
-    justify-content: flex-start;
-    width: 50px;
-    height: 50px;
-  }
-
-  .label {
-    font-size: 16px;
-  }
-}
+.box {
+  border: 3px solid #0A0A0A;
+  box-sizing: border-box;
+  width: 100%;
+}

src/components/CardList/index.tsx

@@ -6,7 +6,7 @@
 
   // background-color: pink;
 
-  @media screen and (max-width: 650px)  {
+  @media screen and (max-width: 720px)  {
     justify-content: center;
   }