mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-19 05:54:06 +01:00
Refactor dualSelector component to add top margin in DualOptionSelector
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
dca9af5e3b
commit
327bf34267
@ -707,14 +707,14 @@ export default function Apply() {
|
||||
</div>
|
||||
)}
|
||||
{/* Submit */}
|
||||
<center>
|
||||
{/* <center>
|
||||
<Button
|
||||
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5"
|
||||
type="submit"
|
||||
>
|
||||
Submit application
|
||||
</Button>
|
||||
</center>
|
||||
</center> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { DualOptionSelector } from "@/components/dualSelector";
|
||||
import { MultipleOptionSelector } from "@/components/multipleSelector";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@/components/ui/tooltip";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
@ -23,6 +16,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { businessFormSchema } from "@/types/schemas/application.schema";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "@radix-ui/react-label";
|
||||
|
||||
type businessSchema = z.infer<typeof businessFormSchema>;
|
||||
|
||||
@ -53,9 +47,7 @@ const BusinessForm = ({
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(
|
||||
onSubmit as unknown as SubmitHandler<businessSchema>
|
||||
)}
|
||||
onSubmit={form.handleSubmit(onSubmit as SubmitHandler<businessSchema>)}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
|
||||
@ -64,310 +56,322 @@ const BusinessForm = ({
|
||||
<span className="text-red-500 font-bold">**</span>All requested
|
||||
information in this section is required.
|
||||
</p>
|
||||
|
||||
{/* Company Name */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="companyName"
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Company name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Your company name" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
This should be the name your company uses on your website and
|
||||
in the market.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Industry */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="industry"
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Industry</FormLabel>
|
||||
<FormControl>
|
||||
<MultipleOptionSelector
|
||||
header={<>Industry</>}
|
||||
fieldName="industry"
|
||||
choices={industry}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Choose the industry that best aligns with your business.
|
||||
</>
|
||||
}
|
||||
placeholder="Select an industry"
|
||||
selectLabel="Industry"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Raised Money */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="totalRaised"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
How much money has your company raised to date?
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="$ 1,000,000"
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
The sum total of past financing, including angel or venture
|
||||
capital, loans, grants, or token sales.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Incorporated in US */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isInUS"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Is your company incorporated in the United States?
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isInUS"
|
||||
label={
|
||||
<>Is your company incorporated in the United States?</>
|
||||
}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
handleFunction={(selectedValues: string) => {
|
||||
// setIsInUS;
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only companies that are incorporated or formed in the US
|
||||
are eligible to raise via Reg CF.
|
||||
</>
|
||||
}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Product for Sale */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isForSale"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Is your product available (for sale) in market?
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isForSale"
|
||||
value={field.value}
|
||||
label={<>Is your product available (for sale) in market?</>}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
handleFunction={(selectedValues: string) => {
|
||||
// setIsForSale;
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only check this box if customers can access, use, or buy
|
||||
your product today.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Generating Revenue */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isGenerating"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Is your company generating revenue?</FormLabel>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isGenerating"
|
||||
label={<>Is your company generating revenue?</>}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
value={field.value}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
// setIsGenerating;
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only check this box if your company is making money.
|
||||
Please elaborate on revenue below.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Pitch Deck */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="businessPitchDeck"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Pitch deck</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex space-x-2 w-96">
|
||||
<Button
|
||||
type="button"
|
||||
variant={businessPitch === "text" ? "default" : "outline"}
|
||||
onClick={() => setBusinessPitch("text")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
Paste URL
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={businessPitch === "file" ? "default" : "outline"}
|
||||
onClick={() => setBusinessPitch("file")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
Upload a file
|
||||
</Button>
|
||||
<Input
|
||||
type={businessPitch === "file" ? "file" : "text"}
|
||||
placeholder={
|
||||
businessPitch === "file"
|
||||
? "Upload your Markdown file"
|
||||
: "https:// "
|
||||
}
|
||||
accept={businessPitch === "file" ? ".md" : undefined}
|
||||
onChange={(e) => {
|
||||
field.onChange(e);
|
||||
}}
|
||||
value={
|
||||
businessPitch === "file" ? "" : (field.value as string)
|
||||
}
|
||||
/>
|
||||
{businessPitchFile && (
|
||||
<div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
|
||||
<span>1. {businessPitchFile}</span>
|
||||
<Button
|
||||
className="ml-4"
|
||||
onClick={() => {
|
||||
setBusinessPitchFile("");
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
<div className="ml-96 mt-5 space-y-10">
|
||||
{/* Company Name */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="companyName"
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="font-bold text-lg">
|
||||
Company name
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<div className="mt-10 space-y-5">
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="text"
|
||||
id="companyName"
|
||||
className="w-96"
|
||||
{...field}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
This should be the name your company uses on your{" "}
|
||||
<br />
|
||||
website and in the market.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Community Size */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="communitySize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>What's the rough size of your community?</FormLabel>
|
||||
<FormControl>
|
||||
<MultipleOptionSelector
|
||||
header={<>What's the rough size of your community?</>}
|
||||
fieldName="communitySize"
|
||||
choices={communitySize}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Include your email list, social media following (e.g.,
|
||||
Instagram, Discord, Twitter).
|
||||
</>
|
||||
}
|
||||
placeholder="Select"
|
||||
selectLabel="Select"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Apply for First Fundraising Project */}
|
||||
{/* <FormField
|
||||
control={form.control}
|
||||
name="applyProject"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Switch
|
||||
onCheckedChange={() => setApplyProject(!applyProject)}
|
||||
{...field}
|
||||
{/* Industry */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="industry"
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<MultipleOptionSelector
|
||||
header={<>Industry</>}
|
||||
fieldName="industry"
|
||||
choices={industry}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Choose the industry that best aligns with your
|
||||
business.
|
||||
</>
|
||||
}
|
||||
placeholder="Select an industry"
|
||||
selectLabel="Industry"
|
||||
/>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="text-[12px] text-neutral-500 self-center cursor-pointer">
|
||||
Would you like to apply for your first fundraising
|
||||
project as well?
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-[11px]">
|
||||
Toggling this option allows you to begin your first
|
||||
project, which is crucial for unlocking fundraising
|
||||
tools.
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Raised Money */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="totalRaised"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="mt-10 space-y-5">
|
||||
<Label htmlFor="totalRaised" className="font-bold text-lg">
|
||||
How much money has your company <br /> raised to date?
|
||||
</Label>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="number"
|
||||
id="totalRaised"
|
||||
className="w-96"
|
||||
placeholder="$ 1,000,000"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
field.onChange(value ? parseFloat(value) : null);
|
||||
}}
|
||||
value={field.value}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
The sum total of past financing, including angel or
|
||||
venture <br />
|
||||
capital, loans, grants, or token sales.
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/> */}
|
||||
<Button
|
||||
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5"
|
||||
type="submit"
|
||||
>
|
||||
Submit application
|
||||
</Button>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Incorporated in US */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isInUS"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isInUS"
|
||||
label={
|
||||
<>Is your company incorporated in the United States?</>
|
||||
}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
handleFunction={(selectedValues: string) => {
|
||||
// setIsInUS;
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only companies that are incorporated or formed in the
|
||||
US are eligible to raise via Reg CF.
|
||||
</>
|
||||
}
|
||||
value={field.value}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Product for Sale */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isForSale"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isForSale"
|
||||
value={field.value}
|
||||
label={
|
||||
<>Is your product available (for sale) in market?</>
|
||||
}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
handleFunction={(selectedValues: string) => {
|
||||
// setIsForSale;
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only check this box if customers can access, use, or
|
||||
buy your product today.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Generating Revenue */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isGenerating"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<DualOptionSelector
|
||||
name="isGenerating"
|
||||
label={<>Is your company generating revenue?</>}
|
||||
choice1="Yes"
|
||||
choice2="No"
|
||||
value={field.value}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Only check this box if your company is making money.
|
||||
Please elaborate on revenue below.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Pitch Deck */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="businessPitchDeck"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="space-y-5 mt-10">
|
||||
<Label htmlFor="pitchDeck" className="font-bold text-lg">
|
||||
Pitch deck
|
||||
</Label>
|
||||
<FormControl>
|
||||
<div>
|
||||
<div className="flex space-x-2 w-96">
|
||||
<Button
|
||||
type="button"
|
||||
variant={
|
||||
businessPitch === "text" ? "default" : "outline"
|
||||
}
|
||||
onClick={() => setBusinessPitch("text")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
Paste URL
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={
|
||||
businessPitch === "file" ? "default" : "outline"
|
||||
}
|
||||
onClick={() => setBusinessPitch("file")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
Upload a file
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type={businessPitch === "file" ? "file" : "text"}
|
||||
placeholder={
|
||||
businessPitch === "file"
|
||||
? "Upload your Markdown file"
|
||||
: "https:// "
|
||||
}
|
||||
accept={
|
||||
businessPitch === "file" ? ".md" : undefined
|
||||
}
|
||||
onChange={(e) => {
|
||||
field.onChange(e);
|
||||
}}
|
||||
className="w-96 mt-5"
|
||||
value={
|
||||
businessPitch === "file"
|
||||
? ""
|
||||
: (field.value as string)
|
||||
}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Your pitch deck and other application info will be
|
||||
used for <br />
|
||||
internal purposes only. <br />
|
||||
Please make sure this document is publicly
|
||||
accessible. This can <br />
|
||||
be a DocSend, Box, Dropbox, Google Drive or other
|
||||
link.
|
||||
<br />
|
||||
<p className="text-red-500">
|
||||
** support only markdown(.md) format
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
{businessPitchFile && (
|
||||
<div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
|
||||
<span>1. {businessPitchFile}</span>
|
||||
<Button
|
||||
className="ml-4"
|
||||
onClick={() => {
|
||||
setBusinessPitchFile("");
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Community Size */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="communitySize"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<MultipleOptionSelector
|
||||
header={<>What's the rough size of your community?</>}
|
||||
fieldName="communitySize"
|
||||
choices={communitySize}
|
||||
handleFunction={(selectedValues: string) => {
|
||||
field.onChange(selectedValues);
|
||||
}}
|
||||
description={
|
||||
<>
|
||||
Include your email list, social media following (e.g.,
|
||||
Instagram, Discord, Twitter).
|
||||
</>
|
||||
}
|
||||
placeholder="Select"
|
||||
selectLabel="Select"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5"
|
||||
type="submit"
|
||||
>
|
||||
Submit application
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
@ -14,7 +14,7 @@ interface SelectorInterface {
|
||||
|
||||
export function DualOptionSelector(props: SelectorInterface) {
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-5 mt-10">
|
||||
<Label htmlFor={props.name} className="font-bold text-lg">
|
||||
{props.label}
|
||||
</Label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user