170 lines
3.1 KiB
TypeScript
170 lines
3.1 KiB
TypeScript
import Head from 'next/head'
|
|
import { useEffect, useState } from 'react'
|
|
import { useCookies } from 'react-cookie'
|
|
import styled from 'styled-components'
|
|
import { links } from '../config'
|
|
import ThemeInterface from '../types/theme'
|
|
|
|
const Title = styled.h1`
|
|
margin: 0;
|
|
line-height: 1.15;
|
|
font-size: 4rem;
|
|
text-align: center;
|
|
|
|
a {
|
|
color: ${({ theme }) => theme.pages.index.title.a};
|
|
text-decoration: none;
|
|
animation: animate 1.5s linear infinite;
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
a:hover,
|
|
a:focus,
|
|
a:active {
|
|
text-decoration: underline;
|
|
}
|
|
`
|
|
|
|
const Description = styled.p`
|
|
line-height: 1.5;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
`
|
|
|
|
const Grid = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
max-width: 800px;
|
|
`
|
|
|
|
const Card = styled.div`
|
|
margin: 1rem;
|
|
padding: 1.5rem;
|
|
text-align: left;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border: 1px solid #eaeaea;
|
|
border-radius: 10px;
|
|
transition: color 0.15s ease, border-color 0.15s ease;
|
|
max-width: 300px;
|
|
|
|
:hover,
|
|
:focus,
|
|
:active {
|
|
color: #0070f3;
|
|
border-color: #0070f3;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
}
|
|
`
|
|
|
|
const CardSignIn = styled.a`
|
|
color: ${({ theme }) => theme.pages.index.cards.signin};
|
|
`
|
|
|
|
const CardRegister = styled.a`
|
|
color: ${({ theme }) => theme.pages.index.cards.register};
|
|
`
|
|
|
|
const CardFiles = styled.a`
|
|
color: ${({ theme }) => theme.pages.index.cards.files};
|
|
`
|
|
|
|
const CardSettings = styled.a`
|
|
color: ${({ theme }) => theme.pages.index.cards.settings};
|
|
`
|
|
|
|
export default function Home() {
|
|
const [cookies] = useCookies(["token"])
|
|
|
|
const [cards, setCards] = useState(<CardsNonLogged />)
|
|
|
|
useEffect(() => {
|
|
if (cookies.token) {
|
|
setCards(<CardsLogged />)
|
|
}
|
|
}, [setCards, cookies])
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>HomeDisk</title>
|
|
</Head>
|
|
|
|
<Title>
|
|
Welcome to <a href={links.github} target="_blank" rel="noreferrer">HomeDisk!</a>
|
|
</Title>
|
|
|
|
<Description>
|
|
Fast and lightweight local cloud for your data written in Rust
|
|
</Description>
|
|
|
|
<Grid>
|
|
{cards}
|
|
</Grid>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function CardsNonLogged() {
|
|
return (
|
|
<>
|
|
<Card>
|
|
<CardSignIn href="/login">
|
|
<h2>Sign in →</h2>
|
|
<p>Log in to your account</p>
|
|
</CardSignIn>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardRegister href="/register">
|
|
<h2>Register →</h2>
|
|
<p>Register a new account</p>
|
|
</CardRegister>
|
|
</Card>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function CardsLogged() {
|
|
return (
|
|
<>
|
|
<Card>
|
|
<CardFiles href="/user/files">
|
|
<h2>Files →</h2>
|
|
<p>View your files</p>
|
|
</CardFiles>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardSettings href="/user/settings">
|
|
<h2>Settings →</h2>
|
|
<p>Go to user settings</p>
|
|
</CardSettings>
|
|
</Card>
|
|
</>
|
|
)
|
|
}
|