A
Anonymous

Fundraiser Description Form - Copy this React, Tailwind Component to your project

Create a step by step component form where like below form input <div> <div className="flex justify between w full"> <label htmlFor="email" className="block mb 2 text sm font medium text gray 900 dark:text white">Write a description for fund raiser</label> <label onClick={async () => { let description = await generateAIDescription(values); setFieldValue("description", description); }} htmlFor="ai description" style={{ fontSize: "10px" }} className=" mb 2 block text white bg gray 600 cursor pointer font mono py 1 px 2 rounded lg shadow hover:bg blue 700 transition colors"> Generate AI Description! </label> </div> <Field as="textarea" rows={5} name="description" id="description" className="bg gray 50 border border gray 300 text gray 900 text sm rounded lg focus:ring blue 500 focus:border blue 500 block w full p 2.5 dark:bg gray 600 dark:border gray 500 dark:placeholder gray 400 dark:text white" placeholder="Write a description" /> <ErrorMessage component={"div"} className='errorMessage' name='description'></ErrorMessage> </div>. for the scheme of {"_id":{"$oid":"66f2900ea13bec22727dda1a"},"fund_id":"EPUYF U 628","amount":{"$numberInt":"50000"},"collected":{"$numberInt":"0"},"category":"Education","sub_category":"School Supplies","phone_number":{"$numberDouble":"9744727684.0"},"email_id":"muhammedjavad119144@gmail.com","created_date":{"$date":{"$numberLong":"1727087824628"}},"created_by":"USER","user_id":{"$oid":"66eaf0a68a1a335da114804b"},"picture":["https://fund raiser.s3.amazonaws.com/fund raiser pictures/bigd 2591 pic.jpeg","https://fund raiser.s3.amazonaws.com/fund raiser pictures/nxfm 5208 pic.jpeg","https://fund raiser.s3.amazonaws.com/fund raiser pictures/gtdw 1632 pic.jpeg"],"documents":["https://fund raiser.s3.amazonaws.com/fund raiser documents/uktn 5741 doc.jpeg","https://fund raiser.s3.amazonaws.com/fund raiser documents/nldc 8210 doc.jpeg","https://fund raiser.s3.amazonaws.com/fund raiser documents/mqwe 5881 doc.jpeg"],"closed":false,"status":"CREATED","__v":{"$numberInt":"3"},"about":"Provide a detailed description of the cause you are fundraising for.\nProvide a detailed description of the cause you are fundraising for.\nProvide a detailed description of the cause you are fundraising for.\nProvide a detailed description of the cause you are fundraising for.\nProvide a detailed description of the cause you are fundraising for.\n","age":{"$numberInt":"18"},"benificiary_relation":"Father","deadline":{"$date":{"$numberLong":"1727481600000"}},"full_name":"Muhammed Javad","city":"Kochi","district":"Anantapur","full_address":"Erol kunnumal house, po bara kasaragod","pincode":{"$numberInt":"671319"},"state":"Andhra Pradesh"}

Prompt
Component Preview

About

FundraiserDescriptionForm - Create detailed descriptions with a textarea, AI generation option, and error handling. Built with React and. Access free code!

Share

Last updated 1 month ago