Resources page

app/controllers/admin/resources_controller.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Admin
+  class ResourcesController < AdminController
+    include Pagy::Backend
+
+    before_action :authorize_resource
+    before_action :set_resource, only: %w[edit update destroy]
+
+    def index
+      @pagy, @resources = pagy(Resource.recent, items: 15)
+    end
+
+    def new
+      @resource = Resource.new
+    end
+
+    def create
+      @resource = Resource.new(resource_params)
+
+      if @resource.save
+        redirect_to admin_resources_path, notice: "Resource created successfully."
+      else
+        render :new, status: :unprocessable_content
+      end
+    end
+
+    def edit; end
+
+    def update
+      if @resource.update(resource_params)
+        redirect_to admin_resources_path, notice: "Resource updated successfully."
+      else
+        render :edit, status: :unprocessable_content
+      end
+    end
+
+    def destroy
+      @resource.destroy
+      redirect_to admin_resources_path, notice: "Resource deleted."
+    end
+
+    private
+
+    def authorize_resource
+      authorize Resource
+    end
+
+    def set_resource
+      @resource = Resource.find(params[:id])
+    end
+
+    def resource_params
+      params.require(:resource).permit(:title, :url, :description, :category, :submitted_by)
+    end
+  end
+end

app/controllers/api/resources_controller.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Api
+  class ResourcesController < ApplicationController
+    protect_from_forgery with: :null_session
+
+    def index
+      resources = Resource.recent
+      resources = resources.by_category(params[:category]) if params[:category].present?
+      render json: { data: resources.map(&:as_json) }
+    end
+
+    def create
+      resource = Resource.new(resource_params)
+
+      if resource.save
+        render json: { message: "Resource submitted successfully!" }, status: :created
+      else
+        render json: { errors: resource.errors.full_messages }, status: :unprocessable_entity
+      end
+    end
+
+    private
+
+    def resource_params
+      params.permit(:title, :url, :description, :category, :submitted_by)
+    end
+  end
+end

app/controllers/site_controller.rb

@@ -16,4 +16,6 @@ def past_meetup; end
   def sponsor_us; end
 
   def community; end
+
+  def resources; end
 end

app/javascript/react/components/Modal.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+
+import '../stylesheets/modal';
+
+const Modal = ({ isOpen, onClose, children }) => {
+    const handleKeyDown = useCallback(
+        (e) => {
+            if (e.key === 'Escape') onClose();
+        },
+        [onClose],
+    );
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, handleKeyDown]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                <button className="modal-close" type="button" onClick={onClose} aria-label="Close">
+                    &times;
+                </button>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+Modal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    children: PropTypes.node,
+};
+
+export default Modal;

app/javascript/react/components/layout/Footer.jsx

@@ -69,6 +69,9 @@ const Footer = () => (
                         <a className="footer-col-item" href="/meetups">
                             Meetups
                         </a>
+                        <a className="footer-col-item" href="/resources">
+                            Community Resources
+                        </a>
                     </div>
                 </div>
 

app/javascript/react/components/layout/Header.jsx

@@ -7,9 +7,10 @@ const Header = () => {
     const links = [
         { id: 1, text: 'Events', href: '/meetups' },
         { id: 2, text: 'Our Community', href: '/community' },
-        { id: 3, text: 'Donate', href: 'https://buy.stripe.com/6oE7t874ReRc7gA9AN' },
-        { id: 4, text: 'Support us', href: '/sponsor-us' },
-        { id: 5, text: 'Join', href: '/join-us' },
+        { id: 3, text: 'Resources', href: '/resources' },
+        { id: 4, text: 'Donate', href: 'https://buy.stripe.com/6oE7t874ReRc7gA9AN' },
+        { id: 5, text: 'Support us', href: '/sponsor-us' },
+        { id: 6, text: 'Join', href: '/join-us' },
     ];
 
     const [headerState, setHeaderState] = useState({