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`
|
const Container = styled.div`
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 0 0.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
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 Head from 'next/head'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useCookies } from 'react-cookie'
|
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'
|
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() {
|
export default function Home() {
|
||||||
const [cookies] = useCookies(["token"])
|
const [cookies] = useCookies(["token"])
|
||||||
|
|
||||||
|
|
|
@ -1,42 +1,12 @@
|
||||||
import { faFile, faFolder } from "@fortawesome/free-solid-svg-icons"
|
import { faFile, faFolder } from "@fortawesome/free-solid-svg-icons"
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
||||||
import { Link as MuiLink } from "@mui/material"
|
import { Link as MuiLink } from "@mui/material"
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { useCookies } from 'react-cookie'
|
import { useCookies } from 'react-cookie'
|
||||||
import styled from 'styled-components'
|
|
||||||
import api from '../../api_utils'
|
import api from '../../api_utils'
|
||||||
|
import Icon from "../../components/other/icon"
|
||||||
const Table = styled.table`
|
import Table from "../../components/user/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;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default function Files() {
|
export default function Files() {
|
||||||
const [cookies] = useCookies(["token"])
|
const [cookies] = useCookies(["token"])
|
||||||
|
@ -121,7 +91,7 @@ function FileComponent({ name, path, size, modified, refresh }: Props) {
|
||||||
</Link>
|
</Link>
|
||||||
</td>
|
</td>
|
||||||
<td>{size}</td>
|
<td>{size}</td>
|
||||||
<td>{modified}</td>
|
<td>{modified} ago</td>
|
||||||
</tr>
|
</tr>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue