FORA-345: Project creation page

client/src/components/icons/add-plus/index.tsx

@@ -0,0 +1,21 @@
+import {FC, SVGProps } from 'react';
+
+const AddPlusIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11 18H13C14.1046 18 15 17.1046 15 16C15 14.8954 14.1046 14 13 14H11C9.89543 14 9 14.8954 9 16C9 17.1046 9.89543 18 11 18Z"
+        fill="#212121"
+      />
+    </svg>
+  );
+}
+
+export default AddPlusIcon

client/src/containers/cards/card/component.tsx

@@ -14,10 +14,11 @@ import Icon from 'components/icon';
 import LOCATION_SVG from 'svgs/ui/location.svg?sprite';
 
 import { THEME } from './constants';
+import LinkButton, { Anchor, Button } from 'components/button/component';
 type T = Project & Funder;
 export interface CardProps extends Partial<T> {
   href?: string;
-  theme?: 'green' | 'grey';
+  theme?: 'green' | 'grey' | 'bg-green-0';
 }
 
 const Cards = ({
@@ -53,7 +54,7 @@ const Cards = ({
   return (
     <div
       className={cx({
-        'flex flex-col justify-between p-8': true,
+        'flex flex-col justify-between p-8 bg-green-0': true,
         [THEME[theme]]: true,
       })}
     >
@@ -73,10 +74,12 @@ const Cards = ({
       <div className="border-t divide-y divide-grey-40/50 border-grey-40/50">
         <div className="py-4 leading-snug">{AREAS_OF_FOCUS.join(' • ')}</div>
 
-        <div className="pt-4">
-          <Link href={href} className="font-semibold underline">
-            {`Go to ${FORMAT_LINK_TEXT} page`}
-          </Link>
+        <div>
+          <Button className="px-2 mt-4 border border-black rounded-md" theme="transparent">
+            <Link href={href} className="font-medium">
+              Edit Details
+            </Link>
+          </Button>
         </div>
       </div>
     </div>

client/src/containers/cards/component.tsx

@@ -4,16 +4,39 @@ import { Funder } from 'types/funder';
 import { Project } from 'types/project';
 
 import Card from './card';
+import projectCard from '../projects/component';
+import Icon from 'components/icon';
+import AddPlusIcon from 'components/icons/add-plus';
+import ADD_ICON_SVG from 'svgs/icons/add.svg?sprite';
+import Link from 'next/link';
 
 export interface CardsProps {
   data: (Funder | Project)[] | Partial<Funder>[] | Partial<Project>[];
-  theme?: 'green' | 'grey';
+  theme?: 'green' | 'grey' | 'bg-green-0';
   pathname: string;
+  project?: boolean;
 }
 
-const Cards = ({ data = [], theme = 'grey', pathname }: CardsProps) => {
+const Cards = ({ data = [], theme = 'grey', pathname, project = false }: CardsProps) => {
   return (
     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {project && (
+        <div
+          className={
+            'flex flex-col items-center justify-center p-8 bg-green-0 text-[24px] text-center space-x-2'
+          }
+        >
+          <p className="font-[400]">
+            {' '}
+            Add new <br /> Project{' '}
+          </p>
+          <div className="mt-5">
+            <Link href="/projects/create-project/project-details">
+              <Icon icon={ADD_ICON_SVG} className="w-10 h-10 font-medium" />
+            </Link>
+          </div>
+        </div>
+      )}
       {data.map((item) => (
         <Card theme={theme} key={item.id} href={`${pathname}/${item.id}`} {...item} />
       ))}

client/src/containers/funding/index.tsx

@@ -0,0 +1,35 @@
+import ProjectCard from 'containers/projects/ui/Card';
+import React from 'react';
+import Icon from 'components/icon';
+import eye from 'svgs/icons/eye.svg?sprite';
+import upload from 'svgs/icons/upload.svg?sprite';
+import CHEVRON_LEFT from 'svgs/icons/arrow-left.svg?sprite';
+
+const FundingHome = () => {
+  return (
+    <ProjectCard title="">
+      <div className="flex flex-col items-center justify-center font-display h-[50vh]">
+        <h2 className="md:text-2xl">You have no funding</h2>
+        <h2 className="md:text-2xl">Reported for this project</h2>
+        <div className="md:w-[406px] text-center font-sans my-5">
+          <p>
+            Lorem ipsum dolor sit amet consectetur. Convallis fusce neque odio nunc elementum
+            habitant sit sagittis.
+          </p>
+        </div>
+        <button className="bg-green-10 text-black rounded-lg p-2"> Report Funding</button>
+      </div>
+
+      <div className="flex items-center justify-end">
+        <button className="flex items-center p-2 mt-6 text-black transition bg-transparent border rounded-lg hover:bg-blue-700">
+          <span className="pr-2">
+            <Icon icon={CHEVRON_LEFT} className="w-3 h-3" />
+          </span>
+          Focus Area{' '}
+        </button>
+      </div>
+    </ProjectCard>
+  );
+};
+
+export default FundingHome;

client/src/containers/header/component.tsx

@@ -71,7 +71,7 @@ const Header = () => {
                         className={cx({
                           'text-base font-semibold py-2 px-7': true,
                           'hover:rounded-lg hover:bg-grey-60/75': pathname !== href,
-                          'rounded-lg bg-green-0': isActiveNavItem(href),
+                          'border-b-2 border-[#A3BC3B]': isActiveNavItem(href),
                           'text-grey-0 hover:underline': !filled,
                         })}
                       >
@@ -85,7 +85,7 @@ const Header = () => {
                           'text-base font-semibold py-2 px-7',
                           {
                             'hover:rounded-lg hover:bg-grey-60/75': !pathname.includes(href),
-                            'rounded-lg bg-green-0': isActiveNavItem(href),
+                            'border-b-2 border-[#A3BC3B]': isActiveNavItem(href),
                             'pointer-events-none select-none':
                               pathname.includes(href) && pathname !== '/',
                           },

client/src/containers/project/components/ProjectDetails/component.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { updateProjectDetails } from 'store/projects/projectFormSlice';
+
+
+const ProjectDetails = () => {
+  const dispatch = useDispatch();
+  const projectDetails = useSelector((state: RootState) => state.projectForm.projectDetails);
+
+const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  dispatch(updateProjectDetails({ [e.target.name]: e.target.value }));
+}
+  return (
+    <div className="space-y-6">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Project Name</label>
+        <input
+          name="name"
+          value={projectDetails.name}
+          onChange={handleChange}
+          className="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+        <textarea
+          name="description"
+          value={projectDetails.description}
+          onChange={handleChange}
+          rows={4}
+          className="w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ProjectDetails

client/src/containers/project/components/ProjectDetails/index.ts

@@ -0,0 +1 @@
+export {default} from './component';

client/src/containers/project/components/ProjectForm/component.tsx

@@ -0,0 +1,48 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useProject } from 'hooks/projects';
+import React, {useEffect} from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { setFormData, resetForm } from 'store/projects/projectFormSlice';
+
+const STEP_COMPONENTS = [
+  ProjectDetailsStep,
+  ContactDetailsStep,
+  FocusAreasStep,
+  FundingStep
+];
+
+interface ProjectFormProps {
+  isEdit?: boolean;
+  projectId?: string;
+}
+const ProjectForm = ({isEdit = false, projectId}: ProjectFormProps) => {
+
+  const dispatch = useDispatch();
+  const currentStep = useSelector((state: RootState) => state.projectForm.currentStep);
+
+  const {data: projectData, isLoading} = useProject(projectId, {enabled: isEdit && !!projectId});
+
+  useEffect(() => {
+    if(isEdit && projectData){
+      dispatch(setFormData(projectData));
+    }
+
+    return () => { if(!isEdit) dispatch(resetForm()) };
+  }, [dispatch, isEdit, projectData]);
+
+  const mutationOptions = {
+    onSuccess: () => dispatch(resetForm()),
+    onError: (error: Error) => console.error('Submission error.', error)
+  }
+
+  const createMutation = useMutation(, mutationOptions);
+
+
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default ProjectForm

client/src/containers/project/list/component.tsx

@@ -17,7 +17,7 @@ const ProjectList = () => {
 
   return (
     <div className="space-y-20">
-      {!!funders.length && (
+      {!!funders?.length && (
         <div className="space-y-9">
           <h3 className="text-2xl font-display"> Who is funding this project?</h3>
 

client/src/containers/project/new/breadcumb/component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ProjectBreadcumb = () => {
+  return (
+    <div className="flex flex-col md:flex-row  justify-between my-2">
+      <div className="my-3 text-center">
+        <h1 className="font-normal text-[32px] py-3 md:py-0 font-display tracking-normal">Add or update project details</h1>
+      </div>
+      <div className="md:flex md:flex-row grid grid-cols-2 place-content-center justify-center gap-2">
+        <div>
+          <button className="rounded-md p-2 border">Preview Project Page</button>
+        </div>
+        <div>
+          <button className="rounded-md p-2 border">Report Funding</button>
+        </div>
+
+        <div>
+          <button className="rounded-md p-2 border bg-green-0">Save Changes</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectBreadcumb;