Add custom ellipses and custom arrows

USSF-ORBIT · Aug 9, 2022 · 02c0ad7 · 02c0ad7
1 parent 289771f
commit 02c0ad7
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 17 deletions.
diff --git a/src/components/AnnouncementCarousel/AnnouncementCarousel.tsx b/src/components/AnnouncementCarousel/AnnouncementCarousel.tsx
@@ -7,6 +7,18 @@ import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import { AnnouncementRecord } from 'types'
 
+const CustomEllipse = ({ onClick }: any) => {
+  return (
+    <div className="announcement-carousel-container">
+      <button
+        onClick={onClick}
+        type="button"
+        className={styles.carouselEllipse}
+      />
+    </div>
+  )
+}
+
 const NextArrow = ({ onClick }: any) => {
   return (
     <div className={styles.carouselArrow}>
@@ -38,13 +50,15 @@ const AnnouncementCarousel = ({
     slidesToScroll: 1,
     nextArrow: <NextArrow />,
     prevArrow: <PrevArrow />,
+    dotsClass: `slick-dots ${styles.dots}`,
     appendDots: (dots: React.ReactNode) => {
       return (
         <div style={{ bottom: '-20px' }}>
           <ul style={{ margin: '0px', paddingLeft: '0px' }}> {dots} </ul>
         </div>
       )
     },
+    customPaging: () => <CustomEllipse />,
   }
 
   return (

diff --git a/src/components/NewsCarousel/NewsCarousel.module.scss b/src/components/NewsCarousel/NewsCarousel.module.scss
@@ -9,6 +9,20 @@
   width: 100%;
   height: 100%;
   background-color: #161f2f;
+  border-radius: 4px;
+
+  .dots {
+    button.newsCarouselEllipse {
+      width: 16.17px;
+      height: 16px;
+      border-radius: 50px;
+      background: $theme-spacebase-lightest;
+    }
+
+    button::before {
+      color: transparent !important;
+    }
+  }
 }
 
 .carouselArrow {

diff --git a/src/components/NewsCarousel/NewsCarousel.tsx b/src/components/NewsCarousel/NewsCarousel.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import Slider from 'react-slick'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import styles from './NewsCarousel.module.scss'
@@ -7,23 +7,21 @@ import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import { ArticleListItemRecord } from 'types'
 
-const NextArrow = ({ onClick }: any) => {
+const CustomEllipse = ({ onClick }: any) => {
   return (
-    <div className={styles.carouselArrow}>
-      <FontAwesomeIcon icon="angle-right" onClick={onClick} />
-    </div>
-  )
-}
-
-const PrevArrow = ({ onClick }: any) => {
-  return (
-    <div className={styles.carouselArrow}>
-      <FontAwesomeIcon icon="angle-left" onClick={onClick} />
+    <div className="news-carousel-container">
+      <button
+        onClick={onClick}
+        type="button"
+        className={styles.newsCarouselEllipse}
+      />
     </div>
   )
 }
 
 const NewsCarousel = ({ articles }: { articles: ArticleListItemRecord[] }) => {
+  const sliderRef = useRef<Slider>()
+
   const settings = {
     dots: true,
     accessibility: true,
@@ -32,19 +30,52 @@ const NewsCarousel = ({ articles }: { articles: ArticleListItemRecord[] }) => {
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
-    nextArrow: <NextArrow />,
-    prevArrow: <PrevArrow />,
+    arrows: false,
+    dotsClass: `slick-dots ${styles.dots}`,
     appendDots: (dots: React.ReactNode) => {
       return (
-        <div style={{ bottom: '-20px' }}>
-          <ul style={{ margin: '0px', paddingLeft: '0px' }}> {dots} </ul>
+        <div
+          style={{
+            bottom: '-30px',
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}>
+          <div className={styles.carouselArrow}>
+            <FontAwesomeIcon
+              icon="angle-left"
+              onClick={() => {
+                if (sliderRef.current) {
+                  return sliderRef.current.slickPrev()
+                }
+              }}
+            />
+          </div>
+          <ul
+            style={{
+              margin: '0px',
+              paddingLeft: '0px',
+            }}>
+            {' '}
+            {dots}{' '}
+          </ul>
+          <div className={styles.carouselArrow}>
+            <FontAwesomeIcon
+              icon="angle-right"
+              onClick={() => {
+                if (sliderRef.current) {
+                  return sliderRef.current.slickNext()
+                }
+              }}
+            />
+          </div>
         </div>
       )
     },
+    customPaging: () => <CustomEllipse />,
   }
 
   return (
-    <Slider className={styles.carouselContainer} {...settings}>
+    <Slider ref={sliderRef} className={styles.carouselContainer} {...settings}>
       {articles.map((article: ArticleListItemRecord, index: number) => {
         return <NewsCarouselItem key={index} article={article} />
       })}

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -11,3 +11,11 @@ body,
 #__next {
   min-height: 100vh;
 }
+
+.slick-dots li.slick-active div.news-carousel-container button::before {
+  color: transparent !important;
+  background: #112548;
+  width: 16.17px;
+  height: 16px;
+  border-radius: 50px;
+}