1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-22 22:54:22 +00:00

Create landing page

This commit is contained in:
Steffo 2022-05-25 17:50:31 +02:00
parent 85f43ca59a
commit 5e33b0fce5
Signed by: steffo
GPG key ID: 6965406171929D01
9 changed files with 136 additions and 30 deletions

31
components/Intro.tsx Normal file
View file

@ -0,0 +1,31 @@
import { Trans, useTranslation } from "next-i18next"
import { LoginContext } from "../contexts/login"
import { useDefinedContext } from "../hooks/useDefinedContext"
import { LoginButton } from "./LoginButton"
import { TelegramUserLink } from "./TelegramUserLink"
export function Intro() {
const {t} = useTranslation("common")
const [login, setLogin] = useDefinedContext(LoginContext)
const loginMessage = login ? (
<Trans i18nKey="introTelegramLoggedIn">
Sei connesso come <TelegramUserLink u={login}/>!
</Trans>
) : (
<Trans i18nKey="introTelegramLogin">
Effettua il login con Telegram per iniziare a creare il tuo evento.
</Trans>
)
return <>
<p>
{loginMessage}
</p>
<LoginButton
botName="festaappbot"
/>
</>
}

View file

@ -12,11 +12,13 @@ export function LoginButton(props: any) {
Log out Log out
</button> </button>
: :
<div className="container-btn-telegram">
<OriginalTelegramLoginButton <OriginalTelegramLoginButton
dataOnauth={setLogin} dataOnauth={setLogin}
usePic={false} usePic={false}
{...props} {...props}
/> />
</div>
), ),
[login] [login]
) )

View file

@ -0,0 +1,24 @@
import { UserData } from "../utils/telegram";
interface TelegramUserLinkProps {
u: UserData
}
export function TelegramUserLink({u}: TelegramUserLinkProps) {
if(u.username) return (
<a href={`https://t.me/${u.username}`}>
{u.username}
</a>
)
else if(u.last_name) return (
<span>
{u.first_name} {u.last_name}
</span>
)
else return (
<span>
u.first_name
</span>
)
}

View file

@ -1,10 +1,12 @@
import type { NextPage, NextPageContext } from 'next' import type { NextPage, NextPageContext } from 'next'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Intro } from '../components/Intro';
import { LoginButton } from '../components/LoginButton';
export async function getStaticProps(context: NextPageContext) { export async function getStaticProps(context: NextPageContext) {
return {props: { return {props: {
...(await serverSideTranslations(context.locale, ["common"])) ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
}} }}
} }
@ -12,13 +14,18 @@ const Page: NextPage = () => {
const {t} = useTranslation("common") const {t} = useTranslation("common")
return ( return (
<div className="index-layout"> <div className="index">
<h1 class="index-title"> <hgroup>
{t("title")} <h1>
{t("siteTitle")}
</h1> </h1>
<h2> <h2>
{t("description")} {t("siteSubtitle")}
</h2> </h2>
</hgroup>
<div>
<Intro/>
</div>
</div> </div>
) )
} }

View file

@ -1,4 +1,6 @@
{ {
"title": "Festa", "siteTitle": "Festa",
"description": "Organizziamo un evento insieme!" "siteSubtitle": "Organizza il tuo evento ora!",
"introTelegramLogin": "Effettua il login con Telegram per iniziare a creare il tuo evento.",
"introTelegramLoggedIn": "Sei connesso come <1/>! Non sei tu?"
} }

View file

@ -8,14 +8,6 @@ html, body {
box-sizing: border-box; box-sizing: border-box;
} }
a {
color: #4444ff;
}
a:visited {
color: #aa44ff;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
} }
@ -24,7 +16,18 @@ h1, h2, h3, h4, h5, h6 {
body { body {
background-color: white; background-color: white;
color: black; color: black;
text-shadow: 2px 2px 2px white; }
h1, h2, h3, h4, h5, h6 {
text-shadow: 1px 1px 1px white;
}
a {
color: #4444ff;
}
a:visited {
color: #aa44ff;
} }
} }
@ -32,6 +35,18 @@ h1, h2, h3, h4, h5, h6 {
body { body {
background-color: black; background-color: black;
color: white; color: white;
text-shadow: 1px 1px 1px black;
}
h1, h2, h3, h4, h5, h6 {
text-shadow: 2px 2px 2px black; text-shadow: 2px 2px 2px black;
} }
a {
color: #8888ff;
}
a:visited {
color: #aa88ff;
}
} }

View file

@ -1,19 +1,30 @@
.index-layout { .index {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-evenly;
align-items: center; align-items: center;
text-align: center;
min-height: 100vh;
} }
@media only screen and (max-width: 639px) { @media only screen and (max-width: 639px) {
.index-title { .index h1 {
font-size: 5em; font-size: 5rem;
}
.index h2 {
font-size: 1.5rem;
} }
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
.index-title { .index h1 {
font-size: 10em; font-size: 10rem;
}
.index h2 {
font-size: 2.5rem;
} }
} }

View file

@ -1,4 +1,8 @@
/* Taken from the Telegram widget button */ /* Taken from the Telegram widget button */
.container-btn-telegram > div {
height: 40px;
}
.btn-telegram { .btn-telegram {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;

View file

@ -25,6 +25,16 @@ export interface LoginData extends UserData {
} }
/**
* Get the default Telegram representation of a username.
*
* @param u
* @returns
*/
export function getTelegramName(u: UserData) {
}
/** /**
* Create a {@link LoginData} object from a {@link ParsedUrlQuery}. * Create a {@link LoginData} object from a {@link ParsedUrlQuery}.
* *