add share icon

Akshatchaube01 · Jun 23, 2024 · 8ff2be2 · 8ff2be2
1 parent e490422
commit 8ff2be2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/Models.css b/src/components/Models.css
@@ -145,7 +145,18 @@
 .view-icon {
   position: absolute;
   bottom: 10px;
-  right: 10px;
+  right: 1px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: white;
+  padding: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.share-icon {
+  position: absolute;
+  bottom: 10px;
+  right: 50px;
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
   color: white;

diff --git a/src/components/Models.jsx b/src/components/Models.jsx
@@ -8,7 +8,7 @@ import BackToTop from "./BottomToTop";
 
 // Import Font Awesome icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight, faTimes, faExpand } from "@fortawesome/free-solid-svg-icons";
+import { faChevronLeft, faChevronRight, faTimes, faExpand,faShareAlt } from "@fortawesome/free-solid-svg-icons";
 
 // Import images
 import AkshatImage from "../assets/Timepic.jpg";
@@ -82,6 +82,9 @@ const Models = () => {
                     <button className="view-icon" onClick={() => handleImageClick(images[currentImageIndex])}>
                         <FontAwesomeIcon icon={faExpand} />
                     </button>
+                    <button className="share-icon">
+                        <FontAwesomeIcon icon={faShareAlt} />
+                    </button>
                 </div>
                 <button onClick={nextImage} className="carousel-button">
                     <FontAwesomeIcon icon={faChevronRight} />