New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import type { FC, HTMLAttributes } from "react";
+import { FancyButton } from "../FancyButton";
+import { SpinnerIcon } from "../Icons";
+import styles from "./PremadeCharacterCard.module.css";
+
+interface PremadeCharacterCardProps extends HTMLAttributes<HTMLDivElement> {
+  characterLevel: number;
+  characterName: string;
+  characterId?: number;
+  primaryClassName: string;
+  speciesName: string;
+  longDescription: string;
+  imageUrl: string;
+  imageAlt: string;
+  createButtonText?: string;
+  showProgress: boolean;
+  previewLink: string;
+  onClaim: () => void;
+  disableClaim?: boolean;
+}
+
+export const PremadeCharacterCard: FC<PremadeCharacterCardProps> = ({
+  characterLevel,
+  characterName,
+  characterId,
+  primaryClassName,
+  speciesName,
+  longDescription,
+  imageUrl,
+  imageAlt,
+  createButtonText = "Create",
+  showProgress,
+  previewLink,
+  onClaim,
+  disableClaim = false,
+  ...props
+}) => {
+  return (
+    <div className={styles.container} {...props}>
+      <img className={styles.image} src={imageUrl} alt={imageAlt} />
+      <h2 className={styles.title} id={characterId?.toString()}>
+        {characterName}
+      </h2>
+      <h3 className={styles.subTitle}>
+        Level {characterLevel}: {speciesName}{" "}
+        <strong>{primaryClassName}</strong>
+      </h3>
+
+      <p className={styles.description}>{longDescription}</p>
+      <FancyButton
+        className={styles.button}
+        color="light"
+        href={previewLink}
+        aria-label={`Preview ${speciesName} ${primaryClassName}`}
+      >
+        Preview
+      </FancyButton>
+      <FancyButton
+        className={styles.fancyButton}
+        onClick={disableClaim ? undefined : onClaim}
+        color={"dark"}
+        disabled={disableClaim}
+        aria-label={
+          showProgress
+            ? `Loading ${speciesName} ${primaryClassName}...`
+            : `${createButtonText} ${speciesName} ${primaryClassName}`
+        }
+      >
+        {showProgress ? <SpinnerIcon /> : createButtonText}
+      </FancyButton>
+    </div>
+  );
+};