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()
useEffect(() => {
if (cookies.token) {
setCards()
}
}, [setCards, cookies])
return (
<>
HomeDisk
Welcome to <a href={links.github} target="_blank" rel="noreferrer">HomeDisk!</a>
Fast and lightweight local cloud for your data written in Rust
{cards}
)
}
function CardsNonLogged() {
return (
<>
Sign in →
Log in to your account
Register →
Register a new account
)
}
function CardsLogged() {
return (
<>
Files →
View your files
Settings →
Go to user settings
)
}