Finished replacing components

Closes , 
This commit is contained in:
Neshura 2022-12-16 00:11:30 +01:00
parent f15b98d09a
commit 2ec2f70772
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
9 changed files with 103 additions and 168 deletions

View file

@ -1,11 +1,11 @@
import '/styles/globals.css'
import type { ReactElement, ReactNode } from 'react'
import { Fragment, ReactElement, ReactNode } from 'react'
import Layout from '../components/layout'
import type { NextPage } from 'next'
import { AppProps } from 'next/app';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import { createContext, useContext, useEffect, useState } from 'react'
import { darkTheme } from '../components/themes';
import { darkTheme, GlobalStyle } from '../components/themes';
import { getTheme } from '../components/themeselector';
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
@ -44,10 +44,14 @@ export default function Website({ Component, pageProps }: AppPropsWithLayout) {
<Layout>{page}</Layout>))
return (
<ThemeProvider theme={selectedTheme}>
<Fragment>
<GlobalStyle />
<ThemeProvider theme={selectedTheme}>
<ThemeUpdateContext.Provider value={setselectedTheme}>
{getLayout(<Component {...pageProps} />)}
</ThemeUpdateContext.Provider>
</ThemeProvider>
</Fragment>
)
}

View file

@ -1,14 +1,15 @@
import { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import { Html, Head, Main, NextScript } from 'next/document'
import { StyledBody } from '../components/styles/generic'
export default function Document() {
return (
<Html lang='en'>
<Head />
<body>
<StyledBody>
<Main />
<NextScript />
</body>
</StyledBody>
</Html>
)
}

View file

@ -1,9 +1,8 @@
import Head from 'next/head'
import styles from '/styles/Home.module.css'
import fsPromises from 'fs/promises'
import path from 'path'
import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content'
import { PageContentBox, PageCard, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
import Link from 'next/link'
function Servers(props: EntryList) {
@ -30,7 +29,7 @@ function Servers(props: EntryList) {
return (
<PageCard key={item.name}>
<Link href={item.href}>
<PageCardContentGame content={item} />
<CardContentGame content={item} />
</Link>
</PageCard>
)
@ -38,7 +37,7 @@ function Servers(props: EntryList) {
else {
return (
<PageCard key={item.name}>
<PageCardContentGame content={item} />
<CardContentGame content={item} />
</PageCard>
)
}

View file

@ -1,11 +1,10 @@
import Head from 'next/head'
import Link from 'next/link'
import styles from '/styles/Home.module.css'
import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/Services';
import Dockerode from 'dockerode';
import { ReactElement } from 'react'
import useSWR from 'swr';
import Image from 'next/image';
import { PageCard, CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
const fetcher = (url: string) => fetch(url).then((res) => res.json())
@ -18,51 +17,28 @@ function Services() {
else if (loadingInitial) { content = <div>Loading</div> }
else if (loadingFull) {
content =
<div className={styles.grid}>
<PageContentBox>
{initialData?.map((item: Service) => (
<Link className={styles.contentcard} key={item.name} href={item.href}>
<div className={styles.contentTitle}>
{
item.icon ? (
<div className={styles.contentIcon}>
<Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
</div>
) : (<></>)
}
<h2>{item.name}</h2>
</div>
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
{item.status}
</div>
<div><p>{item.desc}</p></div>
<div className={styles.cardwarn}><p>{item.warn}</p></div>
</Link>
<PageCard key={item.name}>
<Link key={item.name} href={item.href}>
<CardContentService content={item} />
</Link>
</PageCard>
))}
</div>
</PageContentBox>
}
else if (fullData) {
content =
<div className={styles.grid}>
<PageContentBox>
{fullData.map((item: Service) => (
<Link className={styles.contentcard} key={item.name} href={item.href}>
<div className={styles.contentTitle}>
{
item.icon ? (
<div className={styles.contentIcon}>
<Image alt="icon" src={item.icon} fill></Image>
</div>
) : (<></>)
}
<h2>{item.name}</h2>
</div>
<div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
{item.status}
</div>
<div><p>{item.desc}</p></div>
<div className={styles.cardwarn}><p>{item.warn}</p></div>
</Link>
<PageCard key={item.name}>
<Link key={item.name} href={item.href}>
<CardContentService content={item} />
</Link>
</PageCard>
))}
</div>
</PageContentBox>
}
else {
content = <div>Error loading data</div>
@ -77,13 +53,13 @@ function Services() {
<meta name="description" content="Lists all available Services, most likely up-to-date" />
</Head>
<h1 className={styles.title}>
<PageTitle>
Service List
</h1>
</PageTitle>
<p className={styles.description}>
<PageDescription>
Lists all available Services, most likely up-to-date
</p>
</PageDescription>
{content}
</>