feat(ModalProject): iOS Android icon, skills

LeleDallas · Sep 22, 2023 · fbb9699 · fbb9699
1 parent b17da1e
commit fbb9699
Showing 1 changed file with 42 additions and 19 deletions.
diff --git a/src/screens/ModalProjects.tsx b/src/screens/ModalProjects.tsx
@@ -2,40 +2,63 @@ import { useState } from "react"
 import IconFont from "../components/iconfont"
 import { ModalProjectProps } from "../types"
 
-
 const ModalProjects = ({ visible, setVisible, data }: ModalProjectProps) => {
-
-    const [over, setOver] = useState(false)
+    const [overGithub, setOverGithub] = useState(false)
+    const [overAndoird, setOverAndroid] = useState(false)
+    const [overIos, setOverIos] = useState(false)
     return (
         <div className={visible ? "modal-container active" : "modal-container"}  >
-            <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)}></div>
+            <div className={visible ? "overlay active" : "overlay"} onClick={() => setVisible(false)} />
             <section style={{ width: 1050 }} className="testimonials-modal">
                 <button className="modal-close-btn" onClick={() => setVisible(false)}>
                     <IconFont name="close1" color={"white"} size={10} />
                 </button>
                 <div className="modal-img-wrapper">
                     <figure className="modal-avatar-box" >
-                        <img style={{ padding: 10, width: 350 }} src={data.image} alt={data.title} />
+                        <img style={{ padding: 10, width: 350, borderRadius: 20 }} src={data.image} alt={data.title} />
                     </figure>
-                    <a style={{ marginTop: 22 }} href={data.url} target="_blank" className="social-link">
-                        <IconFont
-                            color={over ? "white" : "gray"}
-                            name={"github"}
-                            size={22}
-                            onMouseOver={() => setOver(true)}
-                            onMouseLeave={() => setOver(false)} />
-                    </a>
-                    {/* <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
-                        {data.tech?.map((tecnology, key) =>
-                            <img style={{ width: 35, height: 35, objectFit: "scale-down" }} key={key} src={tecnology} />
+                    <div style={{ marginTop: 22, display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+                        {data.tech?.map((technology) =>
+                            <img
+                                style={{ marginRight: 5, width: 35, height: 35, objectFit: "scale-down", borderRadius: 20 }}
+                                key={technology}
+                                src={technology} />
                         )}
-                    </div> */}
+                        {data.url &&
+                            <a href={data.url} target="_blank" className="social-link">
+                                <IconFont
+                                    style={{ marginRight: 5 }}
+                                    color={overGithub ? "white" : "gray"}
+                                    name={"github"}
+                                    size={35}
+                                    onMouseOver={() => setOverGithub(true)}
+                                    onMouseLeave={() => setOverGithub(false)} />
+                            </a>}
+                        {data.android &&
+                            <a href={data.android} target="_blank" className="social-link">
+                                <IconFont
+                                    style={{ marginRight: 5 }}
+                                    color={overAndoird ? "white" : "gray"}
+                                    name={"Play-Store"}
+                                    size={35}
+                                    onMouseOver={() => setOverAndroid(true)}
+                                    onMouseLeave={() => setOverAndroid(false)} />
+                            </a>}
+                        {data.ios &&
+                            <a href={data.ios} target="_blank" className="social-link">
+                                <IconFont
+                                    style={{ marginRight: 5 }}
+                                    color={overIos ? "white" : "gray"}
+                                    name={"a-applestore"}
+                                    size={35}
+                                    onMouseOver={() => setOverIos(true)}
+                                    onMouseLeave={() => setOverIos(false)} />
+                            </a>}
+                    </div>
                 </div>
                 <div className="modal-content">
                     <h4 className="h3 modal-title" >{data.title}</h4>
                     <time>{data.type}</time>
-                    {/* <time>{data?.url2}</time>
-                    <time>{data?.description2}</time> */}
                     <div data-modal-text>
                         <p>{data.description}</p>
                     </div>