import lichess pgn viewer as a react component

src/components/LichessButton.tsx

@@ -15,6 +15,7 @@ const LichessButton = ({ onClickHandler }: IProps) => {
 					xmlns="http://www.w3.org/2000/svg"
 					fill="currentColor"
 				>
+					<title>Lichess Logo</title>
 					<path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
 				</svg>
 			</div>

src/components/LichessPgnViewerComponent.tsx

@@ -0,0 +1,31 @@
+import LichessPgnViewer from "lichess-pgn-viewer";
+import type PgnViewer from "lichess-pgn-viewer/pgnViewer";
+import { useEffect, useRef } from "react";
+
+interface IProps {
+	pgn: string;
+}
+
+const PgnViewerComponent = ({ pgn }: IProps) => {
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const viewerRef = useRef<PgnViewer | null>(null);
+
+	useEffect(() => {
+		if (!containerRef.current) return;
+
+		viewerRef.current = LichessPgnViewer(containerRef.current, {
+			pgn,
+			scrollToMove: false,
+		});
+
+		return () => {
+			if (containerRef.current) {
+				containerRef.current.innerHTML = "";
+			}
+		};
+	}, [pgn]);
+
+	return <div ref={containerRef} className="lpv-board" />;
+};
+
+export default PgnViewerComponent;

src/pages/Chessboard.tsx

@@ -1,13 +1,18 @@
 import LichessButton from "#/components/LichessButton.tsx";
+import PgnViewerComponent from "#/components/LichessPgnViewerComponent.tsx";
 import Section from "#/components/Section.tsx";
 
-const Chessboard = () => (
-	<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
-		<Section title="Convert PGN to PDF">
-			<LichessButton /> or{" "}
-			<input type="file" id="file-input" className="file-input max-w-xs" />
-		</Section>
-	</main>
-);
+const Chessboard = () => {
+	return (
+		<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
+			<Section title="Convert PGN to PDF">
+				<LichessButton /> or{" "}
+				<input type="file" id="file-input" className="file-input max-w-xs" />
+			</Section>
+
+			<PgnViewerComponent pgn="" />
+		</main>
+	);
+};
 
 export default Chessboard;

src/styles.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
-@import "./styles/_accordion.css";
+@import "styles/_accordion.css";
 @import "./styles/_file-input.css";
+@import './styles/_pgn-viewer.css';
 
 @plugin "@tailwindcss/typography";
 

src/styles/_pgn-viewer.css

@@ -0,0 +1,7 @@
+@import "./vendor/lichess-pgn-viewer.css";
+
+.lpv-board {
+	max-width: 600px;
+	--board-color: #b58863;
+	font-family: "Noto Sans", sans-serif;
+}