style file input and chess board page

src/assets/images/lichess-logo.svg

@@ -0,0 +1,7 @@
+<svg
+    viewBox="0 0 50 50"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <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>

src/components/LichessButton.tsx

@@ -0,0 +1,27 @@
+interface IProps {
+	onClickHandler: () => void;
+}
+
+const LichessButton = ({ onClickHandler }: IProps) => {
+	return (
+		<button
+			className="text-(--accent) border rounded-xl px-6 py-3 cursor-pointer flex items-center gap-2 p-2 hover:bg-(--accent) hover:text-(--header-bg) transition-colors duration-300 ease-in-out"
+			onClick={onClickHandler}
+			type="button"
+		>
+			<div className="w-6 h-6">
+				<svg
+					viewBox="0 0 50 50"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+				>
+					<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>
+
+			<p>Log into Lichess.org</p>
+		</button>
+	);
+};
+
+export default LichessButton;

src/pages/Chessboard.container.tsx

@@ -0,0 +1,7 @@
+import Chessboard from "#/pages/Chessboard.tsx";
+
+const ChessboardContainer = () => {
+	return <Chessboard />;
+};
+
+export default ChessboardContainer;

src/pages/Chessboard.tsx

@@ -0,0 +1,13 @@
+import LichessButton from "#/components/LichessButton.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>
+);
+
+export default Chessboard;

src/pages/chessboard.tsx

@@ -1,9 +0,0 @@
-import Section from "#/components/Section.tsx";
-
-const Chessboard = () => (
-	<Section title="Convert PGN to PDF">
-		<p>section content</p>
-	</Section>
-);
-
-export default Chessboard;

src/routes/chessboard.tsx

@@ -1,10 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Chessboard from "#/pages/chessboard.tsx";
+import ChessboardContainer from "#/pages/Chessboard.container.tsx";
 
 export const Route = createFileRoute("/chessboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <Chessboard />;
+	return <ChessboardContainer />;
 }

src/routes/contact.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Contact from "#/pages/contact.tsx";
+import Contact from "#/pages/Contact.tsx";
 
 export const Route = createFileRoute("/contact")({
 	component: RouteComponent,

src/styles.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./styles/_accordion.css";
+@import "./styles/_file-input.css";
 
 @plugin "@tailwindcss/typography";
 

src/styles/_file-input.css

@@ -0,0 +1,22 @@
+.file-input {
+	height: 3rem;
+	padding-inline-end: 1rem;
+	font-size: 0.875rem;
+	line-height: 2;
+	border-width: 1px;
+	border-color: var(--accent);
+	border-radius: 0.5rem;
+	background-color: var(--header-bg);
+	flex-shrink: 1;
+}
+
+.file-input::file-selector-button {
+	color: var(--header-bg);
+	font-weight: 600;
+	text-transform: uppercase;
+	text-align: center;
+	background-color: var(--accent);
+	cursor: pointer;
+	height: 100%;
+	padding: 0 1rem;
+}