Skip to content

Commit

Permalink
second view completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonatanluismoreno
jonatanluismoreno committed Mar 1, 2022
1 parent c7dde02 commit a610d06
Show file tree
Hide file tree
Showing 5 changed files with 341 additions and 69 deletions.
4 changes: 4 additions & 0 deletions src/assets/images/newmeet.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/user.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/assets/images/users.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
159 changes: 114 additions & 45 deletions src/pages/Confirmation/Confirmation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import share from '../../assets/images/share.svg'
import notifications from '../../assets/images/notifications.svg'
import threelines from '../../assets/images/threelines.svg'
import backicon from '../../assets/images/backicon.svg'
import newmeet from '../../assets/images/newmeet.svg'
import user from '../../assets/images/user.svg'
import users from '../../assets/images/users.svg'

export function Confirmation() {
const [inputList, setinputList] = useState([
Expand All @@ -27,6 +30,8 @@ export function Confirmation() {
])
}

const [isNotConfirmed, setIsNotConfirmed] = useState(true)

const generatedLink = "https://www.figma.com/file/cv13MX..."
return (
<div className={styles.confirmation}>
Expand Down Expand Up @@ -61,58 +66,122 @@ export function Confirmation() {
</h3>
</div>
</header>
<Link>
<div className={styles.back}>
<img src={backicon} alt="back" className={styles.backicon}/>
<h4 className={styles.backtext}>Atrás</h4>
</div>
</Link>
<h2 className={styles.title}>¡Tu invitación está lista!</h2>
<section className={styles.section}>
<div className={styles.jam}>
<h4 className={styles.jamtitle}>Diseño</h4>
<div className={styles.jaminfo}>
<div>
<h5 className={styles.jamtext}>Lluvia de ideas para Luxi</h5>
<h5 className={styles.jamtext}>Duración: 1.5 hrs aprox.</h5>
{
isNotConfirmed
?
<div>
<Link>
<div className={styles.back}>
<img src={backicon} alt="back" className={styles.backicon}/>
<h4 className={styles.backtext}>Atrás</h4>
</div>
<img src={line} className={styles.line} alt="line" />
<div>
<h5 className={styles.jamtext}>Observaciones:
<h5>Por zoom</h5>
</h5>
</Link>
<h2 className={styles.title}>¡Tu invitación está lista!</h2>
<section className={styles.section}>
<div className={styles.jam}>
<h4 className={styles.jamtitle}>Diseño</h4>
<div className={styles.jaminfo}>
<div>
<h5 className={styles.jamtext}>Lluvia de ideas para Luxi</h5>
<h5 className={styles.jamtextmovile}>Observaciones:
<h5>Por zoom</h5>
</h5>
<h5 className={styles.jamtextdesktop}>Duración: 1.5 hrs aprox.</h5>
</div>
<img src={line} className={styles.line} alt="line" />
<div>
<h5 className={styles.jamtextdesktop}>Observaciones:
<h5>Por zoom</h5>
</h5>
</div>
<div>
<h4 className={styles.jamdate}>17 de septiembre</h4>
<h5 className={styles.jamtextmovile}>Duración: 1.5 hrs aprox.</h5>
</div>
<Link>
<img src={arrow} alt="arrow" />
</Link>
</div>
</div>
<div>
<h4 className={styles.jamdate}>17 de septiembre</h4>
</section>
<h2 className={styles.subtitle}>Puedes copiar el link o enviarla por mail</h2>
<div className={styles.form}>
<section className={styles.copyNShare}>
<h3 className={styles.camp}>Link:</h3>
<input type="text" className={styles.linkinput} placeholder={generatedLink} readOnly onClick={() => navigator.clipboard.writeText(generatedLink)}>

</input>
<img src={share} alt="share" className={styles.shareicon} />
<h3 className={styles.camp}>Mail</h3>
{
inputList.map(() => (
<input type="text" className={styles.input} />
))
}
</section>
<div onClick={() => setIsNotConfirmed(false)}>
<ButtonComponent name="Enviar"></ButtonComponent>
</div>
</div>
<button className={styles.plusbutton} onClick={addInputList}>+</button>
<section className={styles.navbar}>
<Link>
<img src={arrow} alt="arrow" />
<div className={styles.navbarcamp}>
<img src={newmeet} alt="" />
<h3>Nueva reunión</h3>
</div>
</Link>
</div>
<Link>
<div className={styles.navbarcamp}>
<img src={user} alt="" />
<h3>Perfil</h3>
</div>
</Link>
<Link>
<div className={styles.navbarcamp}>
<img src={users} alt="" />
<h3>Mis reuniones</h3>
</div>
</Link>
</section>
</div>
</section>
<h2 className={styles.subtitle}>Puedes copiar el link o enviarla por mail</h2>
<div className={styles.form}>
<section className={styles.copyNShare}>
<h3 className={styles.camp}>Link:</h3>
<input type="text" className={styles.linkinput} placeholder={generatedLink} readOnly onClick={() => navigator.clipboard.writeText(generatedLink)}>

</input>
<img src={share} alt="share" className={styles.shareicon} />
<h3 className={styles.camp}>Mail</h3>
{
inputList.map(() => (
<input type="text" className={styles.input} />
))
}
</section>
<div>
<Link to="/home">
<ButtonComponent name="Registrate"></ButtonComponent>
</Link>
:
<div className={styles.confirmed}>
<main className={styles.confirmedmain}>
<h2 className={styles.confirmedtitle}>¡LISTO!</h2>
<section className={styles.confirmedsection}>
<h3 className={styles.confirmedtext}>
Ahora tus invitados tienen que elegir el mejor horario. Podés ver las votaciones en <h3 className={styles.confirmedtextorange}>“Mis reuniones”</h3>
</h3>
</section>
<div className={styles.confirmedbuttoncontainer}>
<Link>
<ButtonComponent name="Mis reuniones"></ButtonComponent>
</Link>
</div>
</main>
<section className={styles.navbar}>
<Link>
<div className={styles.navbarcamp}>
<img src={newmeet} alt="" />
<h3>Nueva reunión</h3>
</div>
</Link>
<Link>
<div className={styles.navbarcamp}>
<img src={user} alt="" />
<h3>Perfil</h3>
</div>
</Link>
<Link>
<div className={styles.navbarcamp}>
<img src={users} alt="" />
<h3>Mis reuniones</h3>
</div>
</Link>
</section>
</div>
</div>
<button className={styles.plusbutton} onClick={addInputList}>+</button>
}
</div>
)
}
Expand Down
Loading

0 comments on commit a610d06

Please sign in to comment.