add buttons func

This commit is contained in:
Firesieht 2022-03-27 17:33:29 +03:00
parent 0b83a98063
commit bb4c46abb2
3 changed files with 23 additions and 9 deletions

View File

@ -1,13 +1,15 @@
import Link from 'next/link'
import styles from './Modal.module.css'
import react from "react"
import react, { useState } from "react"
import Image from 'next/image'
export const Modal:React.FC = () =>{
export const Modal:React.FC<{show:boolean, setShow:(a:boolean)=>void }> = (props) =>{
return(
<div className={styles.modal} style={{display: "flex"}} id="questInfo">
<div className={styles.modal} style={{display:props.show? "flex":"none"}} id="questInfo">
<div className={styles.modalCard}>
<button id="modalButton" className={styles.modalButton}>
<button id="modalButton" className={styles.modalButton} onClick={()=>props.setShow(false)}>
<img src="/images/cross.svg"/>
</button>
<h1>Спаси корабль</h1>
@ -47,7 +49,7 @@ export const Modal:React.FC = () =>{
</ul>
</div>
<h2>Фото</h2>
<img src="/images/mockups.png" />
<img src="/images/mockups.png"/>
</div>
</div>
);

View File

@ -2,9 +2,14 @@ import styles from './Solution.module.css'
import React from "react"
import Link from 'next/link';
export const Solution:React.FC = () =>{
interface SolutionIE{
onAboutClick: () => void
onBuyClick?: ()=> void
}
export const Solution:React.FC<SolutionIE> = (props) =>{
return(
<div className={styles.solution} id="buy" >
<div className={styles.solution} id="buy">
<h1 >Что мы предлагаем</h1>
<h2 >Приедем к вам - соберем квест</h2>
<div className={styles.carousel} >
@ -26,9 +31,12 @@ export const Solution:React.FC = () =>{
</div>
</div>
<button className={styles.btn}>Подробнее</button>
<button onClick={()=>props.onAboutClick()} className={styles.btn}>Подробнее</button>
<Link href={"#contacts"}>
<button className={styles.btn}>купить</button>
</Link>
</div>
<div className={styles.card} style={{justifyContent: "center"}}>
Coming soon...

View File

@ -1,5 +1,6 @@
import type { NextPage } from 'next'
import Head from 'next/head'
import { useState } from 'react'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { Header } from '../components/header'
@ -11,6 +12,8 @@ import { Contacts } from '../components/contacts'
import { MyFooter } from '../components/footer'
import { Rings } from '../components/rings'
const Home: NextPage = () => {
let [showModal, setShowModal] = useState(false)
return (
<div className={styles.container}>
<Head>
@ -21,9 +24,10 @@ const Home: NextPage = () => {
<main>
<Header></Header>
<Modal setShow={(a:boolean)=>setShowModal(a)} show={showModal}></Modal>
<div className={styles.content}>
<Main></Main>
<Solution></Solution>
<Solution onAboutClick={()=> setShowModal(!showModal)}></Solution>
<Team></Team>
<Contacts></Contacts>
<MyFooter></MyFooter>