import { Service } from '../../../interfaces/CardTypes'; import styled, { css, DefaultTheme } from 'styled-components'; import Link from 'next/link'; import Image from 'next/image'; import { Dispatch, SetStateAction, useState } from 'react'; // needed for Online Status checks interface OnlinePropType { status: string; } const Card = styled.div` position: relative; display: flex; flex-direction: column; align-items: center; width: 30rem; min-height: 10rem; max-height: 15rem; margin-bottom: 2rem; // themeing border-top: 0.25rem solid; border-radius: 10px; color: ${({ theme }) => theme.colors.primary}; border-color: ${({ theme }) => theme.colors.primary}; background-color: ${({ theme }) => theme.colors.background}; transition-property: max-height, margin-bottom; transition-duration: 0.2s, 0s; transition-delay: 0.2s, 0.2s; ` // custom objects for CardTitle //############################# const CardTitleWrap = styled.div` display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; flex-grow: 0.8; `; const CardTitleText = styled.h2` font-size: 1.2rem; margin: 0.5rem 0; `; const CardTitleIcon = styled.div` position: relative; object-fit: contain; margin-right: 0.4rem; aspect-ratio: 1; height: 1.5rem; `; const CardTitleIconMirror = styled.div` height: 1.5rem; aspect-ratio: 1; ` const CardStatus = styled.p` font-size: 0.9rem; padding: 0.1rem; margin: 0.5rem; margin-right: 1.5rem; border-radius: 5px; border: 0; border-bottom: 0.125rem solid; ${({ theme }) => { let ret; if (theme.backgroundImage) { ret = css` background-image: ${() => { return css` linear-gradient(${theme.colors.background}, ${theme.colors.background}), url(${theme.backgroundImage}) ` }}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: 60%; `; } else { ret = css` background-color: ${({ theme }) => theme.colors.background}; `; } return ret; }}; 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; }}; ` const CardTitleLink = styled(Link)` display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: flex-start; margin: 0.5rem; padding-left: 1rem; ` const CardTitleLinkPlaceholder = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; align-self: flex-start; margin: 0.5rem; padding-left: 1rem; ` // content visible when reduced const CardTitle = ({ content, href }: { content: Service, href: string }) => { let card; if (href) { card = ( { content.icon ? ( icon ) : (<>) } {content.name} { content.icon ? ( ) : (<>) } {content.status} ) } else { card = ( { content.icon ? ( icon ) : (<>) } {content.name} { content.icon ? ( ) : (<>) } {content.status} ) } return card } // custom objects for CardDescription //################################### // shared properties for all Description objects const CardDescriptionCommon = css` text-align: left; font-size: 0.9rem; margin: 0.3rem; ` // content visible when expanded const CardDescriptionWrap = styled.div` ${CardDescriptionCommon} padding: 0 1rem; margin-bottom: 2rem; overflow-y: scroll; scrollbar-width: thin; width: 100%; p { margin-top: 0; margin-bottom: 0.9rem; } ` const CardDescriptionExtended = styled.p` ${CardDescriptionCommon} margin: 0; margin-bottom: 0.9rem; width: 100%; ` const CardDescription = ({ content }: { content: Service }) => { let ret; ret = ( {content.desc}

{content.warn}

{content.extName}
); return ret; } // exported Card Elements //####################### export const ServiceCardMobile = ({ content }: { content: Service }) => { let card; // TEMP if (content.href) { // TODO: adjust sizes card = ( ) } else { card = ( ) } return card; } // TODO: remove unneeded exports //############# // OLD ELEMENTS //############# 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 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 .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 }) => { return (

{content.name}

) } // Card Content Component for Services Page const MobileServiceCardOld = ({ 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; }