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:
parent
85f43ca59a
commit
5e33b0fce5
9 changed files with 136 additions and 30 deletions
31
components/Intro.tsx
Normal file
31
components/Intro.tsx
Normal 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"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
}
|
|
@ -12,11 +12,13 @@ export function LoginButton(props: any) {
|
||||||
Log out
|
Log out
|
||||||
</button>
|
</button>
|
||||||
:
|
:
|
||||||
<OriginalTelegramLoginButton
|
<div className="container-btn-telegram">
|
||||||
dataOnauth={setLogin}
|
<OriginalTelegramLoginButton
|
||||||
usePic={false}
|
dataOnauth={setLogin}
|
||||||
{...props}
|
usePic={false}
|
||||||
/>
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
),
|
),
|
||||||
[login]
|
[login]
|
||||||
)
|
)
|
||||||
|
|
24
components/TelegramUserLink.tsx
Normal file
24
components/TelegramUserLink.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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>
|
||||||
</h1>
|
{t("siteTitle")}
|
||||||
<h2>
|
</h1>
|
||||||
{t("description")}
|
<h2>
|
||||||
</h2>
|
{t("siteSubtitle")}
|
||||||
|
</h2>
|
||||||
|
</hgroup>
|
||||||
|
<div>
|
||||||
|
<Intro/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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?"
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -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}.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in a new issue