Added color picker

components/arcade/showcase/cohort-card.js

@@ -19,7 +19,8 @@ const CohortCard = ({
   githubLink = '',
   draggable = false,
   personal = false,
-  reload
+  reload,
+  color = ''
 }) => {
   const [isHovered, setIsHovered] = useState(false)
 

components/arcade/showcase/project-edit.js

@@ -8,7 +8,9 @@ import FileInput from '../../../pages/api/arcade/showcase/projects/[projectID]/f
 const ProjectEditForm = ({ project }) => {
   const [previewProject, setPreviewProject] = useState(project)
   function publishedChanges(e) {
-    console.log('published changes')
+    console.log('published changes', e)
+    
+    console.log(color)
   }
   const { status, formProps, useField, data } = useForm(
     `/api/arcade/showcase/projects/${project.id}/edit`,
@@ -20,6 +22,12 @@ const ProjectEditForm = ({ project }) => {
     }
   )
 
+  const [color, setColor] = useState(project.color);
+
+  const handleColorChange = (e) => {
+    setColor(e.target.value);
+  };
+
   return (
     <Box
       sx={{
@@ -65,7 +73,7 @@ const ProjectEditForm = ({ project }) => {
           mb: 3,
           '&:hover': {
             background: '#333',
-            color: '#F4E7C7'
+            color: '#f8e4c4'
           }
         }}
       >
@@ -120,6 +128,27 @@ const ProjectEditForm = ({ project }) => {
             />
           </Label>
 
+          <Label>
+            <Text>Background Color</Text>
+            <Input
+              {...useField('color')}
+              type="color"
+              value={color}
+              onChange={handleColorChange}
+              sx={{
+                width: '150px',
+              height: '50px',
+              padding: '0',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              zIndex: 1,
+              position: 'relative',}}
+            />
+          </Label>
+          <Text>{color}</Text>
+
           <Input {...useField('authToken')} type="hidden" />
 
           <Submit

components/arcade/showcase/project-view.js

@@ -15,6 +15,7 @@ const ProjectView = ({
   githubProf,
   user = 'User Not Found',
   codeLink = '',
+  color = '',
   ...props
 }) => {
   const codeHost = codeLink.includes('github')

pages/api/arcade/showcase/projects/[projectID]/edit.js

@@ -12,6 +12,7 @@ export default async function handler(req, res) {
     return res.status(400).json({ error: "No body provided" })
   }
 
+
   const updatedFields = {}
   updatedFields['Name'] = body.title
   updatedFields['Description'] = body.desc
@@ -19,6 +20,9 @@ export default async function handler(req, res) {
   updatedFields['Code Link'] = body.codeLink
   updatedFields['Play Link'] = body.playLink
   updatedFields['Screenshot'] = body.images
+  updatedFields['color'] = body.color
+
+  console.log(body.color)
 
   const airtable = new AirtablePlus({
     apiKey: process.env.AIRTABLE_API_KEY,
@@ -40,7 +44,8 @@ export default async function handler(req, res) {
     playLink: project.fields['Play Link'] || '',
     images: (project.fields['Screenshot'] || []).map(i => i.url),
     user: user.fields['Name'],
-    githubProf: project.fields['Github Profile'] || ''
+    githubProf: project.fields['Github Profile'] || '',
+    color: project.fields['color'] || ''
   }
 
   return res.status(200).json({ project: results })

pages/api/arcade/showcase/projects/[projectID]/index.js

@@ -1,5 +1,6 @@
 import AirtablePlus from "airtable-plus";
 import { ensureAuthed } from "../../login/test";
+import { closestTo } from "date-fns";
 
 
 export default async function handler(req, res) {
@@ -31,7 +32,8 @@ export default async function handler(req, res) {
     playLink: p.fields['Play Link'] || '',
     images: (p.fields['Screenshot'] || []).map(i => i.url),
     githubProf: p.fields['Github Profile'] || '',
-    user: user.fields['Name']
+    user: user.fields['Name'],
+    color: p.fields['color'] || ''
   }))
   return res.status(200).json({ project: results[0] })
 }

pages/api/arcade/showcase/projects/add.js

@@ -33,6 +33,7 @@ export default async function handler(req, res) {
     "Name": name,
     "Description": description,
     "Play Link": playLink,
+    "color": "#FAEFD6"
   })
 
   return res.status(200).json({ project: project.id })

pages/api/arcade/showcase/projects/my.js

@@ -27,7 +27,8 @@ export default async function handler(req, res) {
     playLink: p.fields['Play Link'] || '',
     images: (p.fields['Screenshot'] || []).map(i => i.url),
     githubProf: p.fields['Github Profile'] || '',
-    user: user.fields['Name']
+    user: user.fields['Name'], 
+    color: p.fields['color'] || ''
   }))
   return res.status(200).json({ projects: results, name: user.fields['Name']})
 }