added example react js app to play with gitea actions

src/components/HelpArea.css

@@ -0,0 +1,4 @@
+#help-area {
+  margin: auto;
+  display: flex;
+}

src/components/HelpArea.jsx

@@ -0,0 +1,32 @@
+import HelpBox from './HelpBox';
+import './HelpArea.css';
+
+const HELP_ITEMS = [
+  {
+    id: 'h1',
+    title: 'What is Git?',
+    text: 'Git is a version control system, helping you to manage your code and create code snapshots.',
+  },
+  {
+    id: 'h2',
+    title: 'What is GitHub?',
+    text: 'GitHub is a company and online offering, providing you with tons of Git-related services (e.g., cloud repositories).',
+  },
+  {
+    id: 'h3',
+    title: 'What is GitHub Actions?',
+    text: 'GitHub Actions is an automation service (or CI / CD service) that helps you automate repository-related workflows and processes.',
+  },
+];
+
+function HelpArea() {
+  return (
+    <section data-testid="help-area" id="help-area">
+      {HELP_ITEMS.map((item) => (
+        <HelpBox key={item.id} title={item.title} text={item.text} />
+      ))}
+    </section>
+  );
+}
+
+export default HelpArea;

src/components/HelpBox.css

@@ -0,0 +1,11 @@
+.help-box {
+  padding: 1rem;
+  border-radius: 4px;
+  margin: 1;
+  flex: 1;
+}
+
+.help-box h2 {
+  color: #97a2a2;
+  font-size: 1.05rem;
+}

src/components/HelpBox.jsx

@@ -0,0 +1,12 @@
+import './HelpBox.css';
+
+function HelpBox({ title, text }) {
+  return (
+    <article className="help-box">
+      <h2>{title}</h2>
+      <p>{text}</p>
+    </article>
+  );
+}
+
+export default HelpBox;

src/components/MainContent.jsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+import HelpArea from './HelpArea';
+
+function MainContent() {
+  const [helpVisible, setHelpVisible] = useState(false);
+
+  function toggleHelp() {
+    setHelpVisible((isVisible) => !isVisible);
+  }
+
+  return (
+    <main>
+      <button onClick={toggleHelp}>{helpVisible ? 'Hide' : 'Show'} Help</button>
+      {helpVisible && <HelpArea />}
+    </main>
+  );
+}
+
+export default MainContent;

src/components/MainContent.test.jsx

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import MainContent from './MainContent';
+
+describe('MainContent', () => {
+  it('should render a button', () => {
+    render(<MainContent />);
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('should show the help area after clicking the button', async () => {
+    render(<MainContent />);
+
+    const button = screen.getByRole('button');
+    await userEvent.click(button);
+    expect(screen.getByTestId('help-area')).toBeInTheDocument();
+  });
+});