add new copy to clipboard feature to install section

Signed-off-by: Jess Chitas <[email protected]>

Author: jessicachitas

src/App.css

@@ -101,16 +101,30 @@
 }
 
 /* ----------------------------- Install Section ---------------------------- */
+.copy-button {
+  align-content: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.copy-button:hover {
+  background-color: #454545;
+  border-radius: 20%;
+  transition-duration: 2ms;
+}
+
+.copy-svg {
+  @media screen and (max-width: 768px){
+    width: 20px;
+  }
+}
 
 .install-info, .demo-info {
   padding: 10%;
   @media screen and (max-width: 1024px) {
     font-size: medium;
     @media screen and (max-width: 768px) {
       font-size: small;
-      @media screen and (max-width: 500px) {
-        font-size: x-small;
-      }
     }
   }
 }
@@ -121,12 +135,24 @@
 
 .install-code {
   /* word-break: break-all; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-family: "Red Hat Mono", monospace !important;
   font-weight: 500;
   padding: 1rem;
+  padding-left: 2rem;
   background-color: #262626;
   border-radius: 15px;
   width: 100%;
+  @media screen and (max-width: 768px) {
+       padding: 0.75rem;
+  padding-left: 1rem;
+      @media screen and (max-width: 500px) {
+         padding: 0.5rem;
+  padding-left: 1rem;;
+      }
+    }
 }
 
 .install-code div {
@@ -286,7 +312,7 @@ button {
   transition: border-color 0.25s;
 }
 
-button:not(.install-button) {
+button:not(.install-button, .copy-button) {
   display: flex;
   align-items: center;
   width: 70%;

src/App.jsx

@@ -14,6 +14,10 @@ import aboutGraphic1 from "./assets/ramalama-about-graphic-1.svg";
 import aboutGraphic2 from "./assets/ramalama-about-graphic-2.svg";
 import aboutGraphic3 from "./assets/ramalama-about-graphic-3.svg";
 import aboutGraphic4 from "./assets/ramalama-about-graphic-4.svg";
+import copySVG from "./assets/copy.svg";
+
+let installCode1 = "curl -fsSL https://ramalama.ai/install.sh | bash";
+let installCode2 = "pip install ramalama";
 
 /* -------------------------------- Main App Function -------------------------------- */
 function App() {
@@ -31,7 +35,7 @@ function App() {
             <ul>
               <li>
                 <a href="https://github.com/containers/ramalama?tab=readme-ov-file#install">
-                  <button>
+                  <button className="button">
                     {" "}
                     <img src={installIcon} alt="Install Icon"></img>{" "}
                     <p>Installation guide here</p>
@@ -40,7 +44,7 @@ function App() {
               </li>
               <li>
                 <a href="https://github.com/containers/ramalama">
-                  <button>
+                  <button className="button">
                     {" "}
                     <img src={githubIcon} alt="GitHub Icon"></img>{" "}
                     <p>Contribute to the project</p>
@@ -49,7 +53,7 @@ function App() {
               </li>
               <li>
                 <a href="https://matrix.to/#/#ramalama:fedoraproject.org">
-                  <button>
+                  <button className="button">
                     {" "}
                     <img src={communityIcon} alt="Community Icon"></img>{" "}
                     <p>Interact with the community</p>
@@ -58,7 +62,7 @@ function App() {
               </li>
               <li>
                 <a href="https://github.com/containers/ramalama?tab=readme-ov-file#hardware-support">
-                  <button>
+                  <button className="button">
                     {" "}
                     <img src={hardwareIcon} alt="Hardware Icon"></img>{" "}
                     <p>Hardware support here</p>
@@ -85,12 +89,32 @@ function App() {
             <h2 className="install-h2">
               Install RamaLama by running this in your command line:
             </h2>
-            <h3 className="install-h3">Linux and Mac:</h3>
-            <p className="install-code">
-              <div>curl -fsSL https://ramalama.ai/install.sh | sh</div>
-            </p>
-            <h3 className="install-h3">RamaLama is also available on PyPi!</h3>
-            <p className="install-code">pip install ramalama</p>
+            <div>
+              <h3 className="install-h3">Linux and Mac:</h3>
+              <div className="install-code">
+                <p>{installCode1}</p>
+                <button
+                  className="copy-button"
+                  onClick={() => navigator.clipboard.writeText(installCode1)}
+                >
+                  <img className="copy-svg" src={copySVG} width="30px" />
+                </button>
+              </div>
+            </div>
+            <div>
+              <h3 className="install-h3">
+                RamaLama is also available on PyPi!
+              </h3>
+              <div className="install-code">
+                <p>{installCode2}</p>
+                <button
+                  className="copy-button"
+                  onClick={() => navigator.clipboard.writeText(installCode2)}
+                >
+                  <img className="copy-svg" src={copySVG} width="30px" />
+                </button>
+              </div>
+            </div>
             <a href="https://github.com/containers/ramalama?tab=readme-ov-file#install">
               <button className="install-button" role="button">
                 More install methods here
@@ -103,7 +127,11 @@ function App() {
         <div className="demo viewport orange-background">
           <div className="demo-info">
             <h1 className="demo-header">Watch it in action</h1>
-            <img src={demoGIF} className="demo-gif" alt="GIF of RamaLama running in a command line"></img>
+            <img
+              src={demoGIF}
+              className="demo-gif"
+              alt="GIF of RamaLama running in a command line"
+            ></img>
           </div>
         </div>