Merge branch 'dev' into i18n-and-content-creation

src/App.jsx

@@ -5,9 +5,10 @@ import Navbar from './components/Navbar/Navbar/Navbar';
 import Home from './pages/Home';
 import Footer from './components/Footer/Footer';
 import AboutUs from './pages/AboutUs/AboutUs';
-
 import SignUpPage from './pages/SignUpPage/SignUpPage';
 import SignInPage from './pages/SignInPage/SignInPage';
+import ProjectsPage from './pages/ProjectsPage/ProjectsPage';
+import SelectedProject from './features/projects/SelectedProject';
 import FaqPage from './pages/FAQ/FaqPage';
 import ContactUs from './pages/ContactUsPage/ContactUs';
 import {
@@ -17,6 +18,7 @@ import {
   ABOUT_ROUTE,
   FAQ_ROUTE,
   CONTACT_ROUTE,
+  PROJECT_ROUTE,
 } from './routes';
 
 function App() {
@@ -37,6 +39,8 @@ function App() {
           path={SIGN_IN_ROUTE}
           element={currentUser ? <Navigate to={HOME_ROUTE} /> : <SignInPage />}
         />
+        <Route path={PROJECT_ROUTE} element={<ProjectsPage />} />
+        <Route path="/project/:id" element={<SelectedProject />} />
       </Routes>
       <Footer />
     </div>

src/app/store.js

@@ -13,6 +13,10 @@ import {
 
 import storage from 'redux-persist/lib/storage';
 import userReducer from '../features/user/userSlice';
+import projectsReducer from '../features/projects/projectsSlice';
+import categoryReducer from '../features/projects/categorySlice';
+import selectedProjectDetailsReducer from '../features/projects/selectedProjectSlice';
+import reviewReducer from '../features/projects/reviewSlice';
 
 const persistConfig = {
   key: 'root',
@@ -22,6 +26,10 @@ const persistConfig = {
 
 const rootReducer = combineReducers({
   user: userReducer,
+  projects: projectsReducer,
+  category: categoryReducer,
+  selectedProjectDetails: selectedProjectDetailsReducer,
+  review: reviewReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

src/components/Projects/ProjectTypeButton.jsx

@@ -0,0 +1,115 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+export default function ProjectTypeButton({ title, setSpecific }) {
+  const [categories, setCategories] = useState('All');
+
+  useEffect(
+    () => setSpecific(categories.toLowerCase()),
+    [categories, setSpecific],
+  );
+
+  return (
+    <div className="flex justify-center">
+      <div>
+        <div className="dropdown relative">
+          <button
+            className="
+          dropdown-toggle
+          px-6
+          py-2.5
+          bg-white
+          text-black
+          font-medium
+          text-xs
+          leading-tight
+          uppercase
+          rounded
+          shadow-md
+          hover:bg-black hover:shadow-lg
+          hover:text-white
+          transition
+          duration-150
+          ease-in-out
+          flex
+          items-center
+          whitespace-nowrap
+        "
+            type="button"
+            id="dropdownMenuButton1"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          >
+            {categories}
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="caret-down"
+              className="w-2 ml-2"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"
+            >
+              <path
+                fill="currentColor"
+                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+              />
+            </svg>
+          </button>
+          <ul
+            className="
+          dropdown-menu
+          min-w-max
+          absolute
+          bg-white
+          text-base
+          z-50
+          float-left
+          py-2
+          list-none
+          text-left
+          rounded-lg
+          shadow-lg
+          mt-1
+          hidden
+          m-0
+          bg-clip-padding
+          border-none
+        "
+            aria-labelledby="dropdownMenuButton1"
+          >
+            {title.map((element) => (
+              <li key={element}>
+                <a
+                  onClick={() => setCategories(element)}
+                  className="
+                dropdown-item
+                text-sm
+                py-2
+                px-4
+                font-normal
+                block
+                w-full
+                whitespace-nowrap
+                text-red
+                hover:bg-black
+                hover:text-white
+              "
+                  href={`#${element.toLowerCase()}`}
+                >
+                  {element}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ProjectTypeButton.propTypes = {
+  title: PropTypes.node.isRequired,
+  setSpecific: PropTypes.func.isRequired,
+};

src/components/Projects/ProjectsTypes.jsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import ProjectTypeButton from './ProjectTypeButton';
+
+export default function ProjectsTypes({ setSelected }) {
+  const [specific, setSpecific] = useState('');
+
+  useEffect(() => setSelected(specific), [specific, setSelected]);
+
+  return (
+    <div className="bg-primary px-5">
+      <h1 className="flex justify-center text-white font-bold text-lg py-5 ">
+        Find a charity to support
+      </h1>
+      <div className=" flex justify-around md: pb-5">
+        <ProjectTypeButton
+          setSpecific={setSpecific}
+          title={['All', 'Cars', 'Education', 'Social', 'Tech', 'Stack']}
+        />
+      </div>
+    </div>
+  );
+}
+
+ProjectsTypes.propTypes = {
+  setSelected: PropTypes.func.isRequired,
+};