changes in index

This commit is contained in:
2022-12-15 20:24:27 -03:00
parent 3abd2ee132
commit 9bb1ab9480
5 changed files with 31 additions and 21 deletions

1
.gitignore vendored
View File

@@ -3,6 +3,7 @@
node_modules node_modules
package-lock.json package-lock.json
yarn.lock
.env .env

View File

@@ -11,6 +11,7 @@
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-wavify": "^1.6.3",
"styled-components": "^5.3.5", "styled-components": "^5.3.5",
"web-vitals": "^2.1.4", "web-vitals": "^2.1.4",
"wouter": "^2.8.0-alpha.2" "wouter": "^2.8.0-alpha.2"

View File

@@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Open Telegram to Notion Bot website"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Telegram to Notion Bot</title> <title>Open Telegram to Notion Bot</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

View File

@@ -1,5 +1,6 @@
import background from './background.svg' import background from './background.svg'
import styled from "styled-components" import styled from "styled-components"
import Wave from 'react-wavify'
function Index() { function Index() {
@@ -13,7 +14,6 @@ function Index() {
aspect-ratio: 960/300; aspect-ratio: 960/300;
background-image: url(${background});
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@@ -92,19 +92,30 @@ function Index() {
] ]
return ( return (
<IndexStyles className="index"> <>
<ul className="title-list"> <IndexStyles className="index">
{ <ul className="title-list">
listData.map((obj, index) => ( {
<li key={index}> listData.map((obj, index) => (
{obj.link ? <a href={obj.link} target="_blank" children={<h2> {obj.text}</h2>} rel="noreferrer"/> : <h2> {obj.text}</h2>} <li key={index}>
{obj.secondaryText ? <span>&nbsp;{obj.secondaryText}</span> : null} {obj.link ? <a href={obj.link} target="_blank" children={<h2> {obj.text}</h2>} rel="noreferrer"/> : <h2> {obj.text}</h2>}
</li> {obj.secondaryText ? <span>&nbsp;{obj.secondaryText}</span> : null}
)) </li>
} ))
</ul> }
<a className="link-to-bot" href="https://t.me/TelegrmToNotionBot" target="_blank" children="Check it out" rel="noreferrer"/> </ul>
</IndexStyles> <a className="link-to-bot" href="https://t.me/OpenTelegramToNotionBot" target="_blank" children="Check it out" rel="noreferrer"/>
</IndexStyles>
<Wave fill='#4797ff'
paused={false}
options={{
height: 20,
amplitude: 40,
speed: 0.15,
points: 3
}}
/>
</>
) )
} }

View File

@@ -5,14 +5,11 @@ import { Link } from 'wouter'
function Header() { function Header() {
const HeaderStyles = styled.header` const HeaderStyles = styled.header`
height: 15vh;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0px 2vw; padding: 3vh 2vw;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@@ -67,7 +64,7 @@ function Header() {
<Link href='/'> <Link href='/'>
<div className='logotype'> <div className='logotype'>
<img src={icon} alt="Page icon"></img> <img src={icon} alt="Page icon"></img>
<h1>Telegram to Notion Bot</h1> <h1>Open Telegram to Notion Bot</h1>
</div> </div>
</Link> </Link>
<div className="links"> <div className="links">