commit mui#15: xmas-light component from https://github.com/iamshaunj…

…p/CSS-Tips-and-Tricks
DavidNgv · Dec 9, 2016 · f4d2d0d · f4d2d0d
1 parent 23a7a27
commit f4d2d0d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 39 deletions.
diff --git a/david-docs/src/app/components/pages/Home.js b/david-docs/src/app/components/pages/Home.js
@@ -8,7 +8,8 @@ import typography from 'material-ui/styles/typography';
 import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 import {cyan500, grey200, darkWhite} from 'material-ui/styles/colors';
 
-require('./home.css');
+
+import XMasLight from './my-components/xmas-light';
 
 class HomePage extends Component {
 
@@ -85,44 +86,7 @@ class HomePage extends Component {
     return (
       <FullWidthSection style={styles.root}>
         {/*<img style={styles.svgLogo} src="images/material-ui-logo.svg" />*/}
-        <ul id="wire">
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-          <li></li>
-        </ul>
+        <XMasLight></XMasLight>
         <img style={styles.svgLogo} src="images/store-man-logo-2.png" />
         <div style={styles.tagline}>
           <h1 style={styles.h1}>EzyStoreMan</h1>

diff --git a/david-docs/src/app/components/pages/home.css → ...onents/pages/my-components/xmas-light.css b/david-docs/src/app/components/pages/home.css → ...onents/pages/my-components/xmas-light.css
diff --git a/david-docs/src/app/components/pages/my-components/xmas-light.js b/david-docs/src/app/components/pages/my-components/xmas-light.js
@@ -0,0 +1,60 @@
+/**
+ * Created by davidngv on 12/9/16.
+ */
+
+import React from 'react';
+
+
+import './xmas-light.css';
+
+/** the 'CSS Tips & Tricks' playlist on The Net Ninja YouTube channel
+ * https://github.com/iamshaunjp/CSS-Tips-and-Tricks
+**/
+
+class XMasLight extends React.Component {
+
+  render() {
+    return (
+      <ul id="wire">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    );
+  }
+}
+
+export default XMasLight;