Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/components/LegacyBadge/LegacyBadge.tsx

@@ -0,0 +1,41 @@
+import clsx from "clsx";
+import { FC, HTMLAttributes } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+import { LabelChip } from "@dndbeyond/ttui/components/LabelChip";
+
+import { Link } from "../Link";
+import styles from "./styles.module.css";
+
+interface LegacyBadgeProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "margin-left";
+}
+
+export const LegacyBadge: FC<LegacyBadgeProps> = ({
+  variant,
+  className,
+  ...props
+}) => (
+  <LabelChip
+    className={clsx([styles.chip, variant && styles[variant], className])}
+    data-tooltip-id={`legacybadge_${uuidv4()}`}
+    tooltipContent={
+      <span>
+        This doesn't reflect the latest rules and lore.{" "}
+        <Link
+          className={styles.tooltipLink}
+          href="https://dndbeyond.com/legacy"
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => {}} //TODO - can fix this after we refactor Link to not stop propgation inside the component
+        >
+          Learn More
+        </Link>
+      </span>
+    }
+    tooltipClickable
+    {...props}
+  >
+    Legacy
+  </LabelChip>
+);