Added slider to publications

2026-08-07 11:52:48 -04:00 · 2022-05-08 23:27:29 +05:30
parent fbb4b94eff
commit 7758ec4463
7 changed files with 165 additions and 68 deletions
--- a/package.json
+++ b/package.json
@@ -10,8 +10,11 @@
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
    "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
--- a/src/App.css
+++ b/src/App.css
@@ -1,63 +1,71 @@
-.App {
-    text-align: center;
-    background-color: #282c34;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    color: azure;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
+    .App {
+        text-align: center;
+        background-color: #282c34;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        color: azure;
+    }
+    
    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
+        height: 40vmin;
+        pointer-events: none;
    }
-}
-
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
+    
+    @media (prefers-reduced-motion: no-preference) {
+        .App-logo {
+            animation: App-logo-spin infinite 20s linear;
+        }
    }
-    to {
-        transform: rotate(360deg);
+    
+    .App-header {
+        background-color: #282c34;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(10px + 2vmin);
+        color: white;
    }
-}
-
-.About {
-    width: 100%;
-    position: absolute;
-    top: 100px;
-    bottom: 0px;
-}
-
-hr {
-    width: 70%;
-    margin-left: 15% !important;
-    margin-right: 15% !important;
-    border: 10px solid aquamarine;
-}
-
-.publications {
-    margin-top: 150px;
-}
+    
+    .App-link {
+        color: #61dafb;
+    }
+    
+    @keyframes App-logo-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    
+    .About {
+        width: 100%;
+        position: absolute;
+        top: 120px;
+        bottom: 0px;
+    }
+    
+    hr {
+        width: 70%;
+        margin-left: 15% !important;
+        margin-right: 15% !important;
+        border: 10px solid aquamarine;
+    }
+    
+    .publications {
+        margin-top: 230px;
+    }
+    
+    .slick-dots button:before {
+        color: grey !important;
+    }
+    
+    .slick-dots li.slick-active button:before {
+        color: White !important;
+    }
--- a/src/App.js
+++ b/src/App.js
@@ -5,18 +5,18 @@ import About from "./components/About";
 import Publication from "./components/Publication";
 import publicationData from "./components/publications.json"
 import { getByTitle } from "@testing-library/react";
+import SimpleSlider from "./components/publicationSlider";

 function App() {
  return (
    <div className="App">
      <Header />
      <hr></hr>
-      <About className ="About" />
-      <div className="publications">
+      <About className ="About" id="About"/>
+      <div className="publications" id="Publications">
        <h2 style={{color:"salmon", fontSize:"50px"}}><b>Publications</b></h2>
-        {publicationData.map(({title,authors, publish_date, abstract,link}) =>(
-          <Publication title={title} authors={authors} publish_date={publish_date} abstract={abstract} link={link}/>
-        ))}
+        <SimpleSlider/>
+
      </div>
    </div>
  );
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -16,10 +16,10 @@ class Header extends Component {
                    <a href="./">Home</a>
                  </Col>
                  <Col>
-                    <a>About</a>
+                    <a href="#About">About</a>
                  </Col>
                  <Col>
-                    <a>Publications</a>
+                    <a href="#Publications">Publications</a>
                  </Col>
                </Row>
              </Col>
--- a/src/components/about.css
+++ b/src/components/about.css
@@ -3,7 +3,7 @@
    width: 75%;
    margin-top: 80px;
    margin-left: 12.5%;
-    padding-top: 4%;
+    padding-top: 5.5%;
    padding-bottom: 4%;
 }

--- a/src/components/publicationSlider.js
+++ b/src/components/publicationSlider.js
@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import Slider from "react-slick";
+import publicationData from "./publications.json"
+import Publication  from "./Publication";
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
+import {FaArrowAltCircleRight,FaArrowAltCircleLeft} from "react-icons/fa"
+export default class SimpleSlider extends Component {
+    constructor(props) {
+    super(props);
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+  }
+  next() {
+    this.slider.slickNext();
+  }
+  previous() {
+    this.slider.slickPrev();
+  }
+  render() {
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+    };
+    return (
+      <div>
+        <Slider ref={c => (this.slider = c)} {...settings}>
+        {publicationData.map(({title,authors, publish_date, abstract,link}) =>(
+          <Publication title={title} authors={authors} publish_date={publish_date} abstract={abstract} link={link}/>
+        ))}
+        </Slider>
+        <div style={{ textAlign: "center"}}>
+            <FaArrowAltCircleLeft onClick={this.previous} style={{marginTop:"40px",marginBottom:"40px",borderRadius:"3em" ,fontSize:"40px", color:"aquamarine"}}/>
+
+            <FaArrowAltCircleRight onClick={this.next} style={{marginTop:"40px", marginBottom:"40px", borderRadius:"3em",fontSize:"40px",marginLeft:"30px", color:"salmon"}}/>
+        </div>
+      </div>
+    );
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -2977,7 +2977,7 @@ cjs-module-lexer@^1.0.0:
  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==

-classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -3756,6 +3756,11 @@ enhanced-resolve@^5.9.2:
    graceful-fs "^4.2.4"
    tapable "^2.2.0"

+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=
+
 entities@^2.0.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -5694,6 +5699,13 @@ json-stable-stringify-without-jsonify@^1.0.1:
  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=

+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json5@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -7217,6 +7229,11 @@ react-error-overlay@^6.0.11:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
  integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.13.1, react-is@^16.3.2:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -7312,6 +7329,17 @@ react-scripts@5.0.1:
  optionalDependencies:
    fsevents "^2.3.2"

+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-transition-group@^4.4.2:
  version "4.4.2"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -7471,6 +7499,11 @@ requires-port@^1.0.0:
  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -7787,6 +7820,11 @@ slash@^4.0.0:
  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==

+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 sockjs@^0.3.21:
  version "0.3.24"
  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -7908,6 +7946,11 @@ statuses@2.0.1:
  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=

+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-length@^4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"