Update features (#62)

* removes the need for global react import

* update the features

* fix image url

* fix image path

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "react-app"
+  "extends": "react-app",
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
 }

src/PostsRoot.js

@@ -109,16 +109,19 @@ export const PostsRoot = () => {
             <div className="max-w-xl px-4 py-4 mx-auto sm:px-6 lg:max-w-screen-xl lg:px-8">
               <div className="lg:grid lg:grid-cols-3 lg:gap-8">
                 <Feature
-                  title="A titile"
-                  description="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."
+                  link="https://twitch.tv/bdougieYO"
+                  title="Twitch"
+                  description="I stream code Tuesday and Fridays. Watch me build GitHub Actions and contribute to Open Source projects."
                 />
                 <Feature
-                  title="A titile"
-                  description="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."
+                  link="https://www.youtube.com/ilikerobot?sub_confirmation=1"
+                  title="Youtube"
+                  description="Developer focused videos every Tuesday and Thursdays. Learn how to grow your career and git action traction."
                 />
                 <Feature
-                  title="A titile"
-                  description="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione."
+                  link="https://twitter.com/twitter"
+                  title="Twitter"
+                  description="I tweet sometimes. Find out what I tweet by following my every word as it happens on Twitter."
                 />
               </div>
             </div>

src/components/Feature.js

@@ -1,23 +1,28 @@
-const Feature = ({ title, description }) => {
+import imageUrl from '../imageUrl';
+
+const Feature = ({link, title, description}) => {
   return (
-    <div className="flex flex-col items-center text-center">
-      <svg
-        className="w-10 h-10"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+    <div>
+      <a href={link}>
+        <img
+          alt={title}
+          className="z-20 m-auto h-32 md:h-24"
+          src={`/${title.toLowerCase()}.png`}
         />
-      </svg>
-      <div className="mt-5">
-        <h5 className="text-lg font-bold leading-6">{title}</h5>
-        <p className="mt-2 text-base font-light leading-6">{description}</p>
+      </a>
+      <div
+        style={{minHeight: 215}}
+        className="-mt-14 bg-white rounded-lg p-6">
+        <div>
+          <a href={link}>
+            <h5 className="text-center text-purple-600 pt-8 text-lg font-bold leading-6">
+              {title}
+            </h5>
+          </a>
+          <p className="text-gray-600 p-4 mt-2 text-base font-light leading-6">
+            {description}
+          </p>
+        </div>
       </div>
     </div>
   );

src/components/Nav.js

@@ -3,11 +3,12 @@ import Link from './Link';
 import { useOnClickOutside } from '../utils/hooks';
 
 const links = [
-  { name: 'GitHub', link: 'https://github.com/bdougie/live' },
-  { name: 'Twitch', link: 'https://twitch.tv/bdougieYO' },
+  { name: 'Subscribe', link: 'https://buttondown.email/bdougie' },
+  // { name: 'Twitch', link: 'https://twitch.tv/bdougieYO' },
   { name: 'Twitter', link: 'https://twitter.com/bdougieyo' },
-  { name: 'Discord', link: 'https://discord.com/invite/gZMKK5q' },
   { name: 'Youtube', link: 'https://www.youtube.com/ilikerobot?sub_confirmation=1' },
+  { name: 'Discord', link: 'https://discord.com/invite/gZMKK5q' },
+  { name: 'GitHub', link: 'https://github.com/bdougie/live' },
 ];
 
 function Nav() {