[DOC] Add example

README.md

@@ -1,3 +1,34 @@
 # Sorteo del amigo invisible
 
 > aka Secret Santa
+
+## (Español) Como participar
+
+Crea un fichero CSV como el siguiente
+
+| clave | nombre | exclusiones | 2022  | 2023  |
+| ----- | ------ | ----------- | ----- | ----- |
+| jonh  | Jonh   | mary        | joe   | john2 |
+| mary  | Mary   | jonh        | jonh2 | bob   |
+| jonh2 | Jonh D | jonh	       | mary  | joe   | 
+| joe   | Joe    |             | jonh  | mary  |
+
+Las dos primeras columnas son obligatorias e indican el nombre y código de cada participante.
+El resto de columnas expresan las exclusiones (parejas, hermanos) y el histórico de cada uno.
+Así no se repite  Amigos Invisibles 2 o 3 años consecutivos.
+
+## (English) How to play
+
+Create a CSV file like the following
+
+| key   | name   | excluded | 2022  | 2023  |
+| ----- | ------ | -------- | ----- | ----- |
+| jonh  | Jonh   | mary     | joe   | john2 |
+| mary  | Mary   | jonh     | jonh2 | bob   |
+| jonh2 | Jonh D | jonh	    | mary  | joe   | 
+| joe   | Joe    |          | jonh  | mary  |
+
+The first 2 columns are mandatory and provide the names and the codes for the participants.
+The rest of the columns express the fixed exclusions (siblings, couples, etc) as well as the
+historic series for each one. This avoids repeating Secret Santa 2 or 3 years in a row.
+

src/app/help.tsx

@@ -1,3 +1,49 @@
+import { Table } from "react-bootstrap"
+
+function ExampleTable() {
+    return <Table>
+        <thead>
+            <tr>
+                <th>key</th>
+                <th>name</th>
+                <th>excluded</th>
+                <th>2022</th>
+                <th>2023</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>jonh</td>
+                <td>Jonh</td>
+                <td>mary</td>
+                <td>joe</td>
+                <td>john2</td>
+            </tr>
+            <tr>
+                <td>mary</td>
+                <td>Mary</td>
+                <td>jonh</td>
+                <td>jonh2</td>
+                <td>bob</td>
+            </tr>
+            <tr>
+                <td>jonh2</td>
+                <td>Jonh D</td>
+                <td>jonh</td>
+                <td>mary</td>
+                <td>joe</td>
+            </tr>
+            <tr>
+                <td>joe</td>
+                <td>Joe</td>
+                <td></td>
+                <td>jonh</td>
+                <td>mary</td>
+            </tr>
+        </tbody>
+
+    </Table>
+}
 export function FileFormat(
     props: { lang?: 'en' | 'es' } = { lang: 'es' }
 ): React.ReactElement {
@@ -22,6 +68,7 @@ export function FileFormat(
                         with the history. One key per cell. Can be empty
                     </li>
                 </ol>
+                <ExampleTable />
             </div>
         )
     return (
@@ -43,6 +90,7 @@ export function FileFormat(
                     por celda para describir la historia
                 </li>
             </ol>
+            <ExampleTable />
         </div>
     )
 }