mirror of
https://github.com/FranP-code/Open-Telegram-to-Notion-Website.git
synced 2025-10-13 00:42:53 +00:00
changes in index
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -3,6 +3,7 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
|
||||||
.env
|
.env
|
||||||
|
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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> {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> {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
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user