Merge pull request #33 from lynnlo/styling-cities

Added Styling to City Links

Author: oohwooh

.babelrc

@@ -0,0 +1 @@
+{ "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] }

components/cities.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+const CityDiv = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #ff686b;
+    border: 1px solid #e6e6e6;
+    border-radius: 3px;
+    box-shadow: 0 4px 4px rgba(0,0,0,0.5);
+    padding: 30px;
+    cursor: pointer;
+    transition: filter 0.2s ease-in-out;
+
+    &:hover {
+        filter: brightness(1.2);
+    }
+
+    &:active {
+        filter: brightness(0.8);
+    }
+`;
+
+export default class Cities extends React.Component {
+    static propTypes = {
+        href: PropTypes.string.isRequired,
+        city_event: PropTypes.object.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { href, city_event } = this.props;
+
+        return (
+            <CityDiv onClick={()=> {window.location = href}}>
+                <h3> {city_event.name} </h3>
+            </CityDiv>
+        );
+    }
+}

next.config.js

@@ -11,5 +11,8 @@ module.exports = {
 
     return config;
   },
+  compiler: {
+    styledComponents: true
+  },
   port: 8001,
 };

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider next dev",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider next build",
     "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {

pages/index.js

@@ -2,6 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
 import Srnd from '../server/srndApi';
+import Cities from '../components/cities';
+import styled from 'styled-components';
+
+const CityContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
 
 export default class Index extends React.Component {
   static propTypes = {
@@ -21,13 +32,11 @@ export default class Index extends React.Component {
       <div>
         <h1>CodeDay Present</h1>
         <p>Pick a city...</p>
-        <ul>
-          {events.map((event) => (
-            <li>
-              <Link href={`/e/${event.id}`}>{event.name}</Link>
-            </li>
+        <CityContainer>
+          {events.map((event, index) => (
+            <Cities key={index} href={`/e/${event.id}`} city_event={event} />
           ))}
-        </ul>
+        </CityContainer>
       </div>
     );
   }