chess field

src/app/fun/_components/ChessPiece.tsx

@@ -0,0 +1,30 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faChessBishop,faChessPawn,faChessKing,faChessQueen,faChessKnight,faChessRook } from "@fortawesome/free-solid-svg-icons"
+
+type piece = "pawn" | "bishop" | "king" | "queen" | "knight" | "rook"
+type color = "black" | "white"
+type ChessPieceProps = {
+  piece: piece,
+  pieceColor: color,
+  color: color
+}
+export default function ChessField(props:ChessPieceProps) {
+  let fontSize = "2em";
+  let className = props.color == "black" ? "bg-slate-600" : "bg-slate-200"
+  className += " h-10 w-10 flex place-content-center items-center text-center p-auto"
+  const pieceColor = props.pieceColor == "black" ? "#3d3d3d" : "#b5b5b5"
+  switch(props.piece) {
+    case "pawn":
+      return <div className={className}> <FontAwesomeIcon icon={faChessPawn} style={{color:pieceColor, fontSize:fontSize}}/> </div>
+    case "bishop":
+      return <div className={className}> <FontAwesomeIcon icon={faChessBishop} style={{color:pieceColor,fontSize:fontSize}}/> </div>
+    case "king":
+      return <div className={className}> <FontAwesomeIcon icon={faChessKing} style={{color:pieceColor,fontSize:fontSize}}/> </div>
+    case "queen":
+      return <div className={className}> <FontAwesomeIcon icon={faChessQueen} style={{color:pieceColor,fontSize:fontSize}}/> </div>
+    case "knight":
+      return <div className={className}> <FontAwesomeIcon icon={faChessKnight} style={{color:pieceColor,fontSize:fontSize}}/> </div>
+    case "rook":
+      return <div className={className}> <FontAwesomeIcon icon={faChessRook} style={{color:pieceColor,fontSize:fontSize}}/> </div>
+  }
+}

src/app/fun/page.tsx

@@ -1,12 +1,12 @@
 'use client'
-
 import { usePathname } from "next/navigation"
-
+import ChessField from "./_components/ChessPiece"
 export default function Page() {
   const pathName = usePathname()
   return (
     <div>
-      {pathName}
+      <ChessField color="black" piece="pawn" pieceColor="white"/>
+      <ChessField color="white" piece="king" pieceColor="black"/>
     </div>
   )
 }

src/app/layout.tsx

@@ -2,8 +2,10 @@ import "~/styles/globals.css";
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
 import { ClerkProvider } from "@clerk/nextjs";
-
+import { config } from "@fortawesome/fontawesome-svg-core"
+import "@fortawesome/fontawesome-svg-core/styles.css"
 import TopNav from "./_components/TopNav";
+config.autoAddCss = false;
 export const metadata: Metadata = {
 	title: "Gregor Lohaus",
 	description: "My Personal Website",