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

import { Service } from '../../../interfaces/CardTypes';
import styled from 'styled-components';
import { CardLink, PageCard, CardStyleWrap, CardContentTitle, CardContentWarning, OnlineStatus } from '../content';

// Card Content Component for Services Page
export const ServiceCardDesktop = ({ content }: { content: Service }) => {
  let ret;
  if (content.href) {
    ret = (
      <CardLink href={content.href}>
        <PageCard>
          <CardContentTitle content={content} />
          <p>{content.desc}</p>
          <CardContentWarning>{content.warn}</CardContentWarning>
        </PageCard>
        <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
      </CardLink>
    )
  }
  else {
    ret = (
      <CardStyleWrap>
        <PageCard>
          <CardContentTitle content={content} />
          <p>{content.desc}</p>
          <CardContentWarning>{content.warn}</CardContentWarning>
        </PageCard>
        <OnlineStatus status={content.status}>{content.status}</OnlineStatus>
      </CardStyleWrap>
    )
  }
  return ret;
}