54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { clsx } from "clsx";
|
|
import { FC, HTMLAttributes } from "react";
|
|
|
|
import { FormatUtils } from "@dndbeyond/character-rules-engine/es";
|
|
|
|
import styles from "./styles.module.css";
|
|
|
|
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
sourceName?: string | null;
|
|
sourceNames?: Array<string>;
|
|
url?: string;
|
|
description?: string | null;
|
|
className?: string;
|
|
}
|
|
export const MarketplaceCta: FC<Props> = ({
|
|
sourceName = null,
|
|
sourceNames,
|
|
url = "/marketplace",
|
|
description = null,
|
|
className,
|
|
...props
|
|
}) => {
|
|
const allSourceNames: Array<string> = [];
|
|
|
|
if (sourceName) {
|
|
allSourceNames.push(sourceName);
|
|
}
|
|
|
|
if (sourceNames) {
|
|
allSourceNames.push(...sourceNames);
|
|
}
|
|
|
|
return (
|
|
<div className={clsx([styles.cta, className])} {...props}>
|
|
<a href={url} target="_blank" className={styles.link} rel="noreferrer">
|
|
<div className={styles.content}>
|
|
{allSourceNames.length > 0 && (
|
|
<div className={styles.header}>
|
|
<div className={styles.headerIntro}>Available in</div>
|
|
<div className={styles.headerTitle}>
|
|
{FormatUtils.renderNonOxfordCommaList(allSourceNames)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{description && (
|
|
<div className={styles.description}>{description}</div>
|
|
)}
|
|
<div className={styles.button}>Go To Marketplace</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|