Switch to NextJS

src/components/OptionButtons.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss';
+
+button {
+  @apply bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)];
+  @apply border border-[rgb(72,72,96)] hover:border-[rgb(96,96,128)];
+  @apply m-1 p-2 rounded-lg transition-colors cursor-pointer;
+}
+
+h2 {
+  @apply mx-auto;
+}
+
+.container {
+  @apply bg-[rgb(24,24,36)] mt-5 p-5 border border-[rgb(48,48,72)] rounded-lg;
+  @apply justify-center mx-auto w-fit flex flex-col gap-2;
+}

src/components/OptionButtons.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { JSX } from 'react'
+import './OptionButtons.css'
+
+type OptionButtonsProps = {
+  buttons: JSX.Element[]
+  name: string | null
+}
+
+export default function OptionButtons ({ buttons, name }: OptionButtonsProps) {
+  return (
+    <div className='container'>
+      <h2 style={{ display: name == null ? 'none' : 'block' }}>{name}</h2>
+      <div className='flex gap-2'>{buttons}</div>
+    </div>
+  )
+}