evgen-app/lending-next
1
0
Fork 0
mirror of https://github.com/evgen-app/lending-next.git synced 2024-11-22 06:46:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

add buttons func

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/modal/index.tsx
View File

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

14
components/solution/index.tsx
View File

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

6
pages/index.tsx
View File

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