Skip to content

Update StartupForm.tsx #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update StartupForm.tsx #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 32 additions & 62 deletions components/StartupForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import React, { useState, useActionState } from "react";
import React, { useState } from "react";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import MDEditor from "@uiw/react-md-editor";
Expand Down Expand Up @@ -29,40 +29,32 @@ const StartupForm = () => {
};

await formSchema.parseAsync(formValues);

const result = await createPitch(prevState, formData, pitch);

if (result.status == "SUCCESS") {
if (result.status === "SUCCESS") {
toast({
title: "Success",
description: "Your startup pitch has been created successfully",
});

router.push(`/startup/${result._id}`);
}

return result;
} catch (error) {
if (error instanceof z.ZodError) {
const fieldErorrs = error.flatten().fieldErrors;

setErrors(fieldErorrs as unknown as Record<string, string>);

const fieldErrors = error.flatten().fieldErrors;
setErrors(fieldErrors as unknown as Record<string, string>);
toast({
title: "Error",
description: "Please check your inputs and try again",
variant: "destructive",
});

return { ...prevState, error: "Validation failed", status: "ERROR" };
}

toast({
title: "Error",
description: "An unexpected error has occurred",
variant: "destructive",
});

return {
...prevState,
error: "An unexpected error has occurred",
Expand All @@ -75,104 +67,82 @@ const StartupForm = () => {
error: "",
status: "INITIAL",
});

//updated ui for cleaner modern look :))
return (
<form action={formAction} className="startup-form">
<form action={formAction} className="bg-white/20 p-8 backdrop-blur-lg shadow-lg rounded-xl max-w-3xl mx-auto space-y-6">
<div>
<label htmlFor="title" className="startup-form_label">
Title
</label>
<label htmlFor="title" className="block text-sm font-semibold text-gray-700">Title</label>
<Input
id="title"
name="title"
className="startup-form_input"
className="mt-2 w-full p-3 bg-white/10 border border-transparent focus:border-blue-400 rounded-lg shadow-sm transition-all duration-200 focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 placeholder-gray-400"
required
placeholder="Startup Title"
placeholder="Enter the title of your startup"
/>

{errors.title && <p className="startup-form_error">{errors.title}</p>}
{errors.title && <p className="text-sm text-red-500 mt-1">{errors.title}</p>}
</div>

<div>
<label htmlFor="description" className="startup-form_label">
Description
</label>
<label htmlFor="description" className="block text-sm font-semibold text-gray-700">Description</label>
<Textarea
id="description"
name="description"
className="startup-form_textarea"
className="mt-2 w-full p-3 bg-white/10 border border-transparent focus:border-blue-400 rounded-lg shadow-sm transition-all duration-200 focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 placeholder-gray-400"
required
placeholder="Startup Description"
placeholder="Describe your startup idea"
/>

{errors.description && (
<p className="startup-form_error">{errors.description}</p>
)}
{errors.description && <p className="text-sm text-red-500 mt-1">{errors.description}</p>}
</div>

<div>
<label htmlFor="category" className="startup-form_label">
Category
</label>
<label htmlFor="category" className="block text-sm font-semibold text-gray-700">Category</label>
<Input
id="category"
name="category"
className="startup-form_input"
className="mt-2 w-full p-3 bg-white/10 border border-transparent focus:border-blue-400 rounded-lg shadow-sm transition-all duration-200 focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 placeholder-gray-400"
required
placeholder="Startup Category (Tech, Health, Education...)"
placeholder="Category (e.g., Tech, Health, Education)"
/>

{errors.category && (
<p className="startup-form_error">{errors.category}</p>
)}
{errors.category && <p className="text-sm text-red-500 mt-1">{errors.category}</p>}
</div>

<div>
<label htmlFor="link" className="startup-form_label">
Image URL
</label>
<label htmlFor="link" className="block text-sm font-semibold text-gray-700">Image URL</label>
<Input
id="link"
name="link"
className="startup-form_input"
className="mt-2 w-full p-3 bg-white/10 border border-transparent focus:border-blue-400 rounded-lg shadow-sm transition-all duration-200 focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 placeholder-gray-400"
required
placeholder="Startup Image URL"
placeholder="Provide a link to an image for your startup"
/>

{errors.link && <p className="startup-form_error">{errors.link}</p>}
{errors.link && <p className="text-sm text-red-500 mt-1">{errors.link}</p>}
</div>

<div data-color-mode="light">
<label htmlFor="pitch" className="startup-form_label">
Pitch
</label>

<div>
<label htmlFor="pitch" className="block text-sm font-semibold text-gray-700">Pitch</label>
<MDEditor
value={pitch}
onChange={(value) => setPitch(value as string)}
id="pitch"
preview="edit"
height={300}
style={{ borderRadius: 20, overflow: "hidden" }}
height={200}
className="mt-2 bg-white/10 p-3 rounded-lg shadow-sm border border-transparent focus:border-blue-400 transition-all duration-200"
textareaProps={{
placeholder:
"Briefly describe your idea and what problem it solves",
}}
previewOptions={{
disallowedElements: ["style"],
placeholder: "Briefly describe your idea and what problem it solves",
}}
/>

{errors.pitch && <p className="startup-form_error">{errors.pitch}</p>}
{errors.pitch && <p className="text-sm text-red-500 mt-1">{errors.pitch}</p>}
</div>

<Button
type="submit"
className="startup-form_btn text-white"
className={`w-full flex items-center justify-center gap-2 mt-6 py-3 px-6 text-white bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 rounded-lg shadow-lg hover:scale-105 transform transition-transform duration-200 ${
isPending && "cursor-not-allowed opacity-70"
}`}
disabled={isPending}
>
{isPending ? "Submitting..." : "Submit Your Pitch"}
<Send className="size-6 ml-2" />
<Send className="w-5 h-5" />
</Button>
</form>
);
Expand Down