update

bbbond123 · Feb 5, 2020 · 466bf1e · 466bf1e
1 parent 9aef797
commit 466bf1e
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,14 +13,15 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",
+    "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2",
+    "test": "^0.6.0",
     "typescript": "^3.7.5"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import logo from './logo.svg';
+import 'semantic-ui-css/semantic.min.css'
+import Logs from './Component/Logs'
 import './App.css';
 
 const App = () => {
@@ -18,6 +20,7 @@ const App = () => {
         >
           Learn React
         </a>
+        <Logs />
       </header>
     </div>
   );

diff --git a/src/Component/Logs/index.tsx b/src/Component/Logs/index.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import ButtonExampleButton from '../../universal/ButtonExampleButton'
+import { Button, Icon } from 'semantic-ui-react'
+
+export interface ILogsProps {
+}
+
+export default function Logs(props: ILogsProps) {
+    return (
+        <div>
+            <ButtonExampleButton />
+
+            <Button animated>
+                <Button.Content visible>Next</Button.Content>
+                <Button.Content hidden>
+                    <Icon name='arrow right' />
+                </Button.Content>
+            </Button>
+            <Button animated='vertical'>
+                <Button.Content hidden>Shop</Button.Content>
+                <Button.Content visible>
+                    <Icon name='shop' />
+                </Button.Content>
+            </Button>
+            <Button animated='fade'>
+                <Button.Content visible>Sign-up for a Pro account</Button.Content>
+                <Button.Content hidden>$12.99 a month</Button.Content>
+            </Button>
+        </div>
+    );
+}
diff --git a/src/universal/ButtonExampleButton.tsx b/src/universal/ButtonExampleButton.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from 'semantic-ui-react'
+
+const ButtonExampleButton = () => <Button>Click Here</Button>
+
+export default ButtonExampleButton