form element and styling

src/Components/Profile/ProfileForm.tsx

@@ -45,6 +45,7 @@ export function ProfileForm() {
     relations: [] as Item[],
     start: '',
     end: '',
+    openCollectiveSlug: '',
   })
 
   const [updatePermission, setUpdatePermission] = useState<boolean>(false)
@@ -137,6 +138,7 @@ export function ProfileForm() {
       relations,
       start: item.start ?? '',
       end: item.end ?? '',
+      openCollectiveSlug: item.openCollectiveSlug ?? '',
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, tags, items])

src/Components/Profile/Subcomponents/CrowdfundingForm.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import { TextInput } from '#components/Input'
+
+import type { FormState } from '#types/FormState'
+
+export const CrowdfundingForm = ({
+  state,
+  setState,
+}: {
+  state: FormState
+  setState: React.Dispatch<React.SetStateAction<any>>
+}) => {
+  return (
+    <div className='tw-mt-4 tw-space-y-4'>
+      <div>
+        <label
+          htmlFor='OpenCollectiveSlug'
+          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+        >
+          Open Collective Slug:
+        </label>
+        <TextInput
+          placeholder='Open Collective Slug'
+          type='text'
+          required={false}
+          defaultValue={state.openCollectiveSlug}
+          updateFormValue={(v) =>
+            setState((prevState) => ({
+              ...prevState,
+              openCollectiveSlug: v,
+            }))
+          }
+        />
+      </div>
+    </div>
+  )
+}

src/Components/Profile/Subcomponents/CrowdfundingView.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { useState, useEffect } from 'react'
+import { NavLink } from 'react-router-dom'
 
 import type { Item } from '#types/Item'
 
@@ -78,7 +79,7 @@ const formatCurrency = (valueInCents: number, currency: string) => {
 
 export const CrowdfundingView = ({ item }: { item: Item }) => {
   // Hier wird slug aus dem Item extrahiert.
-  const slug = item.slug
+  const slug = item.openCollectiveSlug
 
   const [data, setData] = useState<AccountData | null>(null)
   const [loading, setLoading] = useState<boolean>(true)
@@ -139,25 +140,38 @@ export const CrowdfundingView = ({ item }: { item: Item }) => {
 
   return (
     <div className='tw-mx-6 tw-mb-6'>
-      <div className='tw-card tw-bg-base-200 tw-w-fit tw-max-w-full tw-shadow-xl'>
-        <div className='tw-stats tw-stats-vertical lg:tw-stats-horizontal tw-shadow tw-mb-12'>
-          <div className='tw-stat'>
+      <div className='tw-card tw-bg-base-200 tw-w-fit tw-max-w-full tw-shadow'>
+        <div className='tw-stats tw-bg-base-200 tw-stats-horizontal tw-rounded-b-none'>
+          <div className='tw-stat tw-p-3'>
             <div className='tw-stat-title'>Current Balance</div>
-            <div className='tw-stat-value'>{formatCurrency(currentBalance, currency)}</div>
+            <div className='tw-stat-value tw-text-xl lg:tw-text-3xl'>
+              {formatCurrency(currentBalance, currency)}
+            </div>
           </div>
-          <div className='tw-stat'>
+          <div className='tw-stat tw-p-3'>
             <div className='tw-stat-title'>Received</div>
-            <div className='tw-stat-value tw-text-green-500'>
+            <div className='tw-stat-value tw-text-green-500 tw-text-xl lg:tw-text-3xl'>
               {formatCurrency(stats.totalAmountReceived.valueInCents, currency)}
             </div>
           </div>
-          <div className='tw-stat'>
+          <div className='tw-stat tw-p-3'>
             <div className='tw-stat-title'>Spent</div>
-            <div className='tw-stat-value tw-text-red-500'>
+            <div className='tw-stat-value tw-text-red-500 tw-text-xl lg:tw-text-3xl'>
               {formatCurrency(stats.totalAmountReceived.valueInCents - currentBalance, currency)}
             </div>
           </div>
         </div>
+        <hr></hr>
+        <div className='tw-m-4 tw-items-center'>
+          <NavLink to={`https://opencollective.com/${slug}/donate`}>
+            <button className='tw-btn tw-btn-sm tw-btn-primary tw-float-right tw-ml-4'>
+              Donate
+            </button>
+          </NavLink>
+          <div className='tw-flex-1 tw-mr-4'>
+            Support {item.name} on <span className='tw-font-bold'>Open&nbsp;Collective</span>
+          </div>
+        </div>
       </div>
     </div>
   )

src/Components/Profile/Templates/FlexForm.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
 import { ContactInfoForm } from '#components/Profile/Subcomponents/ContactInfoForm'
+import { CrowdfundingForm } from '#components/Profile/Subcomponents/CrowdfundingForm'
 import { GroupSubheaderForm } from '#components/Profile/Subcomponents/GroupSubheaderForm'
 import { ProfileStartEndForm } from '#components/Profile/Subcomponents/ProfileStartEndForm'
 import { ProfileTextForm } from '#components/Profile/Subcomponents/ProfileTextForm'
@@ -14,6 +15,7 @@ const componentMap = {
   texts: ProfileTextForm,
   contactInfos: ContactInfoForm,
   startEnd: ProfileStartEndForm,
+  crowdfundings: CrowdfundingForm,
   // weitere Komponenten hier
 }
 

src/Components/Profile/itemFunctions.ts

@@ -196,6 +196,7 @@ export const onUpdateItem = async (
     ...(state.image.length > 10 && { image: state.image }),
     ...(state.offers.length > 0 && { offers: offerUpdates }),
     ...(state.needs.length > 0 && { needs: needsUpdates }),
+    ...(state.openCollectiveSlug && { openCollectiveSlug: state.openCollectiveSlug }),
   }
 
   const offersState: any[] = []

src/types/FormState.d.ts

@@ -19,4 +19,5 @@ export interface FormState {
   relations: Item[]
   start: string
   end: string
+  openCollectiveSlug: string
 }

src/types/Item.d.ts

@@ -50,6 +50,7 @@ export interface Item {
   telephone?: string
   next_appointment?: string
   gallery?: GalleryItem[]
+  openCollectiveSlug?: string
 
   // {
   // coordinates: [number, number]