chore(website): move styled-components to `components` directory
This commit is contained in:
parent
2764564c4c
commit
328c7c2a3f
|
@ -3,7 +3,6 @@ import styled from 'styled-components'
|
|||
const Container = styled.div`
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
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 { Card, CardSignIn, CardRegister, CardFiles, CardSettings }
|
|
@ -0,0 +1,9 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
const Description = styled.p`
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
`
|
||||
|
||||
export default Description
|
|
@ -0,0 +1,11 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
const Grid = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
`
|
||||
|
||||
export default Grid
|
|
@ -0,0 +1,34 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
||||
export default Title
|
|
@ -0,0 +1,9 @@
|
|||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import styled from "styled-components"
|
||||
|
||||
const Icon = styled(FontAwesomeIcon)`
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
`
|
||||
|
||||
export default Icon
|
|
@ -0,0 +1,28 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
const Table = styled.table`
|
||||
border: 1px solid;
|
||||
width: 80vw;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
background-color: #01754b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
|
||||
export default Table
|
|
@ -1,100 +1,12 @@
|
|||
import Head from 'next/head'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import styled from 'styled-components'
|
||||
import { Card, CardFiles, CardRegister, CardSettings, CardSignIn } from '../components/home/cards'
|
||||
import Description from '../components/home/description'
|
||||
import Grid from '../components/home/grid'
|
||||
import Title from '../components/home/title'
|
||||
import { links } from '../config'
|
||||
|
||||
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"])
|
||||
|
||||
|
|
|
@ -1,42 +1,12 @@
|
|||
import { faFile, faFolder } from "@fortawesome/free-solid-svg-icons"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { Link as MuiLink } from "@mui/material"
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useCookies } from 'react-cookie'
|
||||
import styled from 'styled-components'
|
||||
import api from '../../api_utils'
|
||||
|
||||
const Table = styled.table`
|
||||
border: 1px solid;
|
||||
width: 80vw;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
background-color: #01754b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
|
||||
const Icon = styled(FontAwesomeIcon)`
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
`
|
||||
import Icon from "../../components/other/icon"
|
||||
import Table from "../../components/user/table"
|
||||
|
||||
export default function Files() {
|
||||
const [cookies] = useCookies(["token"])
|
||||
|
@ -121,7 +91,7 @@ function FileComponent({ name, path, size, modified, refresh }: Props) {
|
|||
</Link>
|
||||
</td>
|
||||
<td>{size}</td>
|
||||
<td>{modified}</td>
|
||||
<td>{modified} ago</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue