player lists

components/Content.tsx

@@ -1,9 +1,9 @@
-import { VNode } from "preact";
+import { FunctionComponent } from "preact";
 
-export function Content(props: { children?: VNode | VNode[] }) {
+export const Content: FunctionComponent = ({ children }) => {
   return (
     <div class="bg-smoke-200 dark:bg-smoke-900 border-4 border-licorice-800 p-8 rounded-3xl">
-      {props.children}
+      {children}
     </div>
   );
-}
+};

components/OL.tsx

@@ -1,19 +1,23 @@
-import { VNode, toChildArray } from "preact";
+import { FunctionComponent, toChildArray } from "preact";
 
-export function OL(props: {children?: VNode | VNode[], color?: string;}) {
+export const OL: FunctionComponent<{ color?: string }> = (props) => {
   const childs = toChildArray(props.children);
-  props.color = props.color || 'bg-sky';
+  props.color = props.color || "bg-sky";
   return (
     <ol>
-      {childs.map((c,i) => (
+      {childs.map((c, i) => (
         <li class="flex gap-4 p-1 even:bg-black/10">
-          <div class={`w-16 h-16 relative p-2 ${props.color} rounded-md text-white`}>
-            <span class="text-6xl font-pixel absolute -bottom-1 right-0 text-smoke-800/30">{i+1}</span>
-            <span class="text-5xl font-pixel">{i+1}</span>
+          <div
+            class={`w-16 h-16 relative p-2 ${props.color} rounded-md text-white`}
+          >
+            <span class="text-6xl font-pixel absolute -bottom-1 right-0 text-smoke-800/30">
+              {i + 1}
+            </span>
+            <span class="text-5xl font-pixel">{i + 1}</span>
           </div>
           {c}
         </li>
       ))}
     </ol>
-  )
-}
+  );
+};