Complete

Author: jcs090218

src/App.css

@@ -1,11 +1,5 @@
 .App {
   text-align: center;
-  background-image: url("./etc/background.png");
-  position: fixed;
-  min-width: 100%;
-  min-height: 100%;
-  background-size: cover;
-  background-position: center;
 }
 
 .App-logo {
@@ -51,3 +45,19 @@ body {
   margin-left: 10px;
   margin-right: 10px;
 }
+
+.splide__arrow--prev {
+  margin-left: -20px;
+  width: 25px;
+  height: 25px;
+}
+
+.splide__arrow--next {
+  margin-right: -20px;
+  width: 25px;
+  height: 25px;
+}
+
+#code {
+  background-color: #312F38;
+}

src/components/EBanner.js

@@ -7,15 +7,40 @@
  *                   Copyright © 2022 by Shen, Jen-Chieh $
  */
 import React from 'react';
-import { Button, Container } from 'react-bootstrap';
+import { Button, Container, Collapse } from 'react-bootstrap';
 
 import banner from '../etc/sink_white.png';
 
 import { FiDownload } from 'react-icons/fi';
 import { RiInstallFill } from 'react-icons/ri';
 
 class Ebanner extends React.Component {
-  state = {};
+  state = {
+    install_cmd: 'git clone https://github.com/jcs-emacs/jcs-emacs ~/.emacs.d',
+    open: false,
+    copied: false,
+  };
+
+  clickInstall = () => {
+    this.setState({ open: !this.state.open });
+    if (!this.state.open) {
+      this.setState({ copied: false });
+    }
+  }
+
+  clickCopy = () => {
+    navigator.clipboard.writeText(this.state.install_cmd);
+    this.setState({ copied: true });
+  }
+
+  copyText = () => {
+    if (this.state.copied) {
+      return "Copied";
+    } else {
+      return "Copy";
+    }
+  }
+
   render () {
     return (
       <>
@@ -37,13 +62,28 @@ class Ebanner extends React.Component {
             </Button>{' '}
             <Button variant="dark"
                     className="rounded-pill btn-lg border-2 border-success px-5 mx-1"
-                    href="#collapseExample"
+                    onClick={ this.clickInstall }
+                    aria-expanded={ this.state.open }
                     type="button"
                     data-toggle="collapse"
-                    role="button" aria-expanded="false" aria-controls="collapseExample">
+                    role="button">
               <RiInstallFill /> Install
             </Button>
           </Container>
+          <Collapse in={ this.state.open }>
+            <Container>
+              <div className="mx-auto text-white p-3 mb-3 rounded shadow-lg"
+                   id="code"
+                   style={{ width: '60%' }}>
+                { this.state.install_cmd }
+              </div>
+              <Button variant="light"
+                      className="rounded-pill btn-sm"
+                      onClick= { this.clickCopy }>
+                { this.copyText() }
+              </Button>
+            </Container>
+          </Collapse>
         </div>
       </>);
   }

src/components/ECarousel.js

@@ -28,16 +28,16 @@ class ECarousel extends React.Component {
               autoplay: true,
               lazyLoad: 'nearby',
               speed: 2000,
-              interval: 2000,
+              interval: 3000,
               rewind: true,
+              drag: true,
+              waitForTransition: false,
             }} renderControls={() => (
               <div className="splide__arrows">
-                <button className="splide__arrow splide__arrow--prev"
-                        style={{ width: '25px', height: '25px' }}>
+                <button className="splide__arrow splide__arrow--prev">
                   ⮜
                 </button>
-                <button className="splide__arrow splide__arrow--next"
-                        style={{ width: '25px', height: '25px' }}>
+                <button className="splide__arrow splide__arrow--next">
                   ⮞
                 </button>
               </div>