main-site/components/styles/cards/mobile.tsx

249 lines
5.3 KiB
TypeScript
Raw Normal View History

import { Service } from '../../../interfaces/CardTypes';
import styled, { css, DefaultTheme } from 'styled-components';
import Link from 'next/link';
import Image from 'next/image';
import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg'
// needed for Online Status checks
interface OnlinePropType {
status: string;
}
const Card = styled.div`
2023-01-14 20:10:54 +00:00
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 30rem;
2023-03-15 21:17:51 +00:00
max-width: 90%;
min-height: 10rem;
max-height: 12.5rem;
margin: 1rem;
2023-01-14 20:10:54 +00:00
// themeing
2023-03-15 20:27:40 +00:00
border-top: 0.25rem solid;
2023-01-14 20:10:54 +00:00
border-radius: 10px;
color: ${({ theme }) => theme.colors.primary};
border-color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors.background};
2023-01-14 20:10:54 +00:00
transition-property: max-height, margin-bottom;
transition-duration: 0.2s, 0s;
transition-delay: 0.2s, 0.2s;
2023-01-14 20:10:54 +00:00
`
// custom objects for CardTitle
//#############################
const CardTitleWrap = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
2023-01-14 20:10:54 +00:00
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;
2023-01-14 20:10:54 +00:00
`;
2023-03-15 21:17:51 +00:00
const OpenInNewTab = styled.div`
color: ${({theme}) => theme.colors.primary };
2023-03-15 21:17:51 +00:00
position: relative;
object-fit: contain;
padding: 0.2rem;
2023-03-15 21:17:51 +00:00
margin-left: 0.5rem;
aspect-ratio: 1;
height: 1.5rem;
`
const CardStatus = styled.p<OnlinePropType>`
font-size: 0.9rem;
padding: 0.1rem;
margin: 0.5rem;
margin-right: 1.5rem;
border-radius: 5px;
border: 0;
border-bottom: 0.125rem solid;
background: transparent;
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;
`
2023-01-14 20:10:54 +00:00
// content visible when reduced
const CardTitle = ({ content, href }: { content: Service, href: string }) => {
let card;
if (href) {
card = (
<CardTitleWrap>
<CardTitleLink href={href}>
{
content.icon ? (
<CardTitleIcon>
2023-03-16 23:19:42 +00:00
<Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
</CardTitleIcon>
) : (<></>)
}
<CardTitleText>{content.name}</CardTitleText>
{
2023-03-15 21:17:51 +00:00
<OpenInNewTab>
<OpenInNewTabIcon width="100%" height="100%"/>
2023-03-15 21:17:51 +00:00
</OpenInNewTab>
}
</CardTitleLink>
<CardStatus status={content.status}>{content.status}</CardStatus>
</CardTitleWrap>
)
}
else {
card = (
<CardTitleWrap>
<CardTitleLinkPlaceholder>
{
content.icon ? (
<CardTitleIcon>
2023-03-16 23:19:42 +00:00
<Image alt="icon" src={content.icon} fill sizes={'1.5rem'}/>
</CardTitleIcon>
) : (<></>)
}
<CardTitleText>{content.name}</CardTitleText>
</CardTitleLinkPlaceholder>
<CardStatus status={content.status}>{content.status}</CardStatus>
</CardTitleWrap>
)
}
return card
}
2023-01-14 20:10:54 +00:00
// 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}
2023-03-15 20:27:40 +00:00
padding: 0 1rem;
2023-01-14 20:10:54 +00:00
margin-bottom: 2rem;
overflow: hidden; /* Hide scrollbars */
2023-01-14 20:10:54 +00:00
scrollbar-width: thin;
2023-03-15 20:27:40 +00:00
width: 100%;
2023-01-14 20:10:54 +00:00
p {
margin-top: 0;
margin-bottom: 0.9rem;
}
`
const CardDescriptionExtended = styled.p`
${CardDescriptionCommon}
margin: 0;
margin-bottom: 0.9rem;
2023-03-15 20:27:40 +00:00
width: 100%;
2023-01-14 20:10:54 +00:00
`
const CardDescription = ({ content }: { content: Service }) => {
let ret;
ret = (
<CardDescriptionWrap>
<CardDescriptionExtended>
{content.desc}
</CardDescriptionExtended>
<p>
{content.warn}
</p>
<a href={content.extLink}>
Official Site
2023-01-14 20:10:54 +00:00
</a>
</CardDescriptionWrap>
);
return ret;
}
// exported Card Elements
//#######################
export const ServiceCardMobile = ({ content }: { content: Service }) => {
2023-01-14 20:10:54 +00:00
let card;
// TEMP
if (content.href) {
card = (
<Card>
<CardTitle content={content} href={content.href}/>
<CardDescription content={content}/>
</Card>
)
}
else {
2023-01-14 20:10:54 +00:00
card = (
<Card>
2023-03-15 20:27:40 +00:00
<CardTitle content={content} href={""}/>
<CardDescription content={content}/>
2023-01-14 20:10:54 +00:00
</Card>
)
}
return card;
}