ProductCard.tsx

import { observer } from 'mobx-react';
import { FilePreview } from 'mobx-restful-table';
import { FC } from 'react';
import { CardProps, Card, Button } from 'react-bootstrap';
import { formatDate } from 'web-utility';

import { Product } from '../../models/Hackathon';
import styles from '../../styles/Hackathon.module.less';

export type ProductCardProps = Product & Omit<CardProps, 'id' | 'title'>;

export const ProductCard: FC<ProductCardProps> = observer(
  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => {
    const createdAtValue = Number(createdAt);
    const createdAtISO = Number.isFinite(createdAtValue)
      ? new Date(createdAtValue).toJSON()
      : undefined;
    const createdAtText = Number.isFinite(createdAtValue) ? formatDate(createdAtValue) : '';

    return (
      <Card className={`${styles.projectCard} ${className}`} {...props}>
        <Card.Body className="d-flex flex-column">
          <Card.Title
            as="a"
            className="text-dark fw-bold"
            title={name as string}
            target="_blank"
            href={link as string}
          >
            {(name || link) as string}
          </Card.Title>
          <p className="text-dark opacity-75 mb-3">{summary as string}</p>
          <div className="flex-fill mb-3">
            <FilePreview className="w-100" path={link as string} />
          </div>

          {sourceLink && (
            <div className="d-flex flex-wrap gap-2 mb-3">
              <Button
                variant="dark"
                size="sm"
                href={sourceLink as string}
                target="_blank"
                rel="noreferrer"
              >
                GitHub
              </Button>
              <Button
                variant="primary"
                size="sm"
                href={`https://github.dev/${(sourceLink as string).replace('https://github.com/', '')}`}
                target="_blank"
                rel="noreferrer"
              >
                GitHub.dev
              </Button>
              <Button
                variant="dark"
                size="sm"
                href={`https://codespaces.new/${(sourceLink as string).replace('https://github.com/', '')}`}
                target="_blank"
                rel="noreferrer"
              >
                Codespaces
              </Button>
              <Button
                variant="warning"
                size="sm"
                href={`https://gitpod.io/#${sourceLink as string}`}
                target="_blank"
                rel="noreferrer"
              >
                GitPod
              </Button>
            </div>
          )}

          {createdAtISO && (
            <time
              suppressHydrationWarning
              className="text-dark opacity-75 small"
              dateTime={createdAtISO}
            >
              📅 {createdAtText}
            </time>
          )}
        </Card.Body>
      </Card>
    );
  },
);