import Link from 'next/link'; import Image from 'next/image'; import styled, { css, DefaultTheme } from 'styled-components'; import { Service, Game } from '../../interfaces/CardTypes'; // needed for Online Status checks // TODO: migrate to shared Status type for Games and Services interface OnlinePropType { status: string; } // replaces .title export const PageTitle = styled.h1` margin: 0; padding: 0.25rem 1rem; line-height: 1.15; font-size: 4rem; text-align: center; background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""}; border-radius: 15px; `; // replaces .description export const PageDescription = styled.p` background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""}; padding: 0.25rem 0.5rem; margin: 4rem 0; line-height: 1.5; font-size: 1.5rem; text-align: center; border-radius: 10px; `; // replaces .grid export const PageContentBox = styled.div` display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 80%; `; const CardStyle = css` display: flex; flex-direction: column; align-items: center; position: relative; width: 332px; height: 240px; `; const CardLink = styled(Link)` ${CardStyle} `; const CardStyleWrap = styled.div` ${CardStyle} `; // replaces .card & .contentcard export const PageCard = styled.div` margin: 1rem; padding: 23px 10px; text-align: center; color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.background}; text-decoration: none; border: 2px solid; border-radius: 10px; border-color: ${({ theme }) => theme.colors.primary}; transition: all 0.1s linear; width: 300px; height: 200px; display: flex; flex-direction: column; justify-content: space-between; h2 { margin: 0 0 1rem 0; font-size: 1.5rem; } p { margin: 0; font-size: 1rem; line-height: 1.5; } ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & { color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background}; } ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & { color: ${({ theme }) => theme.colors.secondary}; border-color: ${({ theme }) => theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background}; } `; // replaces the three status classes const OnlineStatus = styled.p` color: ${props => { let ret; switch (props.status) { case "Online": ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online; break; case "Loading": ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading; break; case "Offline": ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; break; default: ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; } return ret; }}; padding: 0.2rem; border: 1px solid; border-color: ${({ theme }) => theme.colors.primary}; border-radius: 5px; width: min-content; position: absolute; top: 100; right: 50; bottom: 0; left: 50; offset-position: bottom 10px; transition: color 0.15s ease, border-color 0.15s ease; background-color: ${({ theme }) => theme.colors.background}; background-image: ${({ theme }) => theme.backgroundImage ? "linear-gradient(" + theme.colors.background + "," + theme.colors.background + "), url(" + theme.backgroundImage + ")" : ""}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & { border-color: ${({ theme }) => theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background}; } ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & { border-color: ${({ theme }) => theme.colors.secondary}; background-color: ${({ theme }) => theme.invertButtons ? theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background}; } `; // replaces .cardwarn const CardContentWarning = styled.p` color: ${({ theme }) => theme.colors.secondary}; `; // replaces .contentIcon const CardContentTitleIcon = styled(Image)` object-fit: "contain"; margin-right: 8px; aspect-ratio: 1; height: 28px; `; // replaces .contentTitle const CardContentTitleWrap = styled.div` position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; margin-bottom: 1rem; h2 { margin: 0; white-space: nowrap; } `; const CardContentTitle = ({ content }: { content: Service | Game }) => { return ( { content.icon ? ( ) : (<>) }

{content.name}

) } // Card Content Component for Games Page export const CardContentGame = ({ content }: { content: Game }) => { let ret; if (content.href) { ret = (

{content.desc}

{content.ip}

{content.status ? {content.status} : <> }
) } else { ret = (

{content.desc}

{content.ip}

{content.status ? {content.status} : <> }
) } return ret; } // Card Content Component for Services Page export const CardContentService = ({ content }: { content: Service }) => { let ret; if (content.href) { ret = (

{content.desc}

{content.warn}
{content.status}
) } else { ret = (

{content.desc}

{content.warn}
{content.status}
) } return ret; }