updated vagabond-systems#2

sextant/src/App.css

@@ -0,0 +1,3 @@
+.App {
+    font-family: Arial, Helvetica, sans-serif;
+}

sextant/src/App.js

@@ -1,23 +1,19 @@
+import React, { Component } from 'react';
 import './App.css';
+import Banner from './Banner';
+import Exhibit from './Exhibit';
 
-function FancyBorder(props) {
-    return (
-      <div className={'FancyBorder FancyBorder-' + props.color}>
-        {props.children}
-      </div>
-    );
-  }
-
-function App() {
-    return ( 
-        <div className = "App">
-            <header className = "App-header" >
-            Welcome to Sextant!
-            </header> 
-
-        </div>
-
-    );
+class App extends Component {
+    render() {
+        return (
+            <div className="App">
+                <Banner bannerText="Cisco Sextant" />
+                <Exhibit name="Exhibit">content</Exhibit>
+                <Exhibit name="Exhibit">content</Exhibit>
+                <Exhibit name="Exhibit">content</Exhibit>
+            </div>
+        );
+    }
 }
 
-export default App;
+export default App;

sextant/src/Banner.css

@@ -0,0 +1,7 @@
+.Banner {
+    margin: 0.5vw;
+    padding: 0vw 2vw 0vw 2vw;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.75vw;
+}

sextant/src/Banner.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './Banner.css';
+
+class Banner extends Component {
+    render() {
+        return (
+            <div className="Banner">
+                <h1>{this.props.bannerText}</h1>
+            </div>
+        );
+    }
+}
+
+export default Banner;

sextant/src/Exhibit.css

@@ -0,0 +1,23 @@
+.Exhibit {
+    float: left;
+    margin: 0.5vw;
+    padding: 0vw 2vw 0vw 2vw;
+    text-align: center;
+    border: 1px solid;
+    /* Black shadow with 10px blur */
+    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
+
+}
+
+.ExhibitHeading {
+    font-weight: bold;
+    font-size: 1.75vw;
+}
+
+.ExhibitContent {
+    margin: 0.5vw;
+    padding: 1vw;
+    text-align: center;
+    font-size: 1.75vw;
+    color: black;
+}

sextant/src/Exhibit.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import './Exhibit.css';
+
+class Exhibit extends Component {
+    render() {
+        return (
+            <div className="Exhibit">
+                <h2 className="ExhibitHeading">{this.props.name}</h2>
+                <div className="ExhibitContent">
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Exhibit;

sextant/src/index.css

@@ -1,13 +1,5 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+html {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
 }

sextant/src/index.js

@@ -1,17 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
+import ReactDOM from 'react-dom';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './index.css';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+ReactDOM.render(
+    <App />,
+    document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();