chore(website): move styled-components to `components` directory

website/components/container.tsx

@@ -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;

website/components/home/cards.tsx

@@ -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 }

website/components/home/description.tsx

@@ -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

website/components/home/grid.tsx

@@ -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

website/components/home/title.tsx

@@ -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

website/components/other/icon.tsx

@@ -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

website/components/user/table.tsx

@@ -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

website/pages/index.tsx

@@ -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"])
 

website/pages/user/files.tsx

@@ -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>
   )
 }