Added Custom Docker Action which prints fibonacci

src/App.jsx

@@ -0,0 +1,18 @@
+import MainContent from './components/MainContent';
+import logo from './assets/images/logo.png';
+
+function App() {
+  return (
+    <>
+      <header>
+        <div id="logo-img">
+          <img src={logo} />
+        </div>
+        <h1>Learn & Master GitHub Actions</h1>
+      </header>
+      <MainContent />
+    </>
+  );
+}
+
+export default App;

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,19 @@
+import { string } from 'prop-types';
+
+import './HelpBox.css';
+
+function HelpBox({ title, text }) {
+  return (
+    <article className="help-box">
+      <h2>{title}</h2>
+      <p>{text}</p>
+    </article>
+  );
+}
+
+HelpBox.propTypes = {
+  title: string,
+  text: string,
+};
+
+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,24 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import MainContent from './MainContent';
+
+// My tests!
+// Add yet another comment
+
+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();
+  });
+});

src/index.css

@@ -0,0 +1,51 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+body {
+  background-color: #798080;
+  color: #292d2d;
+  text-align: center;
+}
+
+#logo-img {
+  width: 7rem;
+  height: 7rem;
+  background-color: #3f3828;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  border: 4px solid #292d2d;
+}
+
+header img {
+  width: 4rem;
+  height: 4rem;
+  margin: 2rem 0;
+  object-fit: contain;
+}
+
+main {
+  margin: 2rem auto;
+  padding: 2rem;
+  max-width: 50rem;
+  background-color: #292d2d;
+  border-radius: 8px;
+  color: white;
+}
+
+button {
+  font: inherit;
+  cursor: pointer;
+  background-color: #f8bd47;
+  color: #292d2d;
+  padding: 0.25rem 1rem;
+  border-radius: 4px;
+  border: 1px solid #f8bd47;
+}

src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/test/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';