sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor dualSelector component to add top margin in DualOptionSelector

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-17 10:10:09 +07:00
parent dca9af5e3b
commit 327bf34267
3 changed files with 317 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/business/apply/page.tsx
View File

@ -707,14 +707,14 @@ export default function Apply() {
</div> </div>
)} )}
{/* Submit */} {/* Submit */}
<center> {/* <center>
<Button <Button
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5" className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5"
type="submit" type="submit"
> >
Submit application Submit application
</Button> </Button>
</center> </center> */}
</div> </div>
); );
} }

624
src/components/BusinessForm.tsx
View File

@ -1,15 +1,8 @@
import { useState } from "react"; import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form"; import { SubmitHandler, useForm } from "react-hook-form";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { DualOptionSelector } from "@/components/dualSelector"; import { DualOptionSelector } from "@/components/dualSelector";
import { MultipleOptionSelector } from "@/components/multipleSelector"; import { MultipleOptionSelector } from "@/components/multipleSelector";
import {
Tooltip,
TooltipProvider,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip";
import { import {
Form, Form,
FormControl, FormControl,
@ -23,6 +16,7 @@ import { Input } from "@/components/ui/input";
import { businessFormSchema } from "@/types/schemas/application.schema"; import { businessFormSchema } from "@/types/schemas/application.schema";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Label } from "@radix-ui/react-label";
type businessSchema = z.infer<typeof businessFormSchema>; type businessSchema = z.infer<typeof businessFormSchema>;
@ -53,9 +47,7 @@ const BusinessForm = ({
return ( return (
<Form {...form}> <Form {...form}>
<form <form
onSubmit={form.handleSubmit( onSubmit={form.handleSubmit(onSubmit as SubmitHandler<businessSchema>)}
onSubmit as unknown as SubmitHandler<businessSchema>
)}
className="space-y-8" className="space-y-8"
> >
<div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]"> <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 <span className="text-red-500 font-bold">**</span>All requested
information in this section is required. information in this section is required.
</p> </p>
<div className="ml-96 mt-5 space-y-10">
{/* Company Name */} {/* Company Name */}
<FormField <FormField
control={form.control} control={form.control}
name="companyName" name="companyName"
render={({ field }: { field: any }) => ( render={({ field }: { field: any }) => (
<FormItem> <FormItem>
<FormLabel>Company name</FormLabel> <FormLabel className="font-bold text-lg">
<FormControl> Company name
<Input placeholder="Your company name" {...field} /> </FormLabel>
</FormControl> <FormControl>
<FormDescription> <div className="mt-10 space-y-5">
This should be the name your company uses on your website and <div className="flex space-x-5">
in the market. <Input
</FormDescription> type="text"
<FormMessage /> id="companyName"
</FormItem> className="w-96"
)} {...field}
/> />
<span className="text-[12px] text-neutral-500 self-center">
{/* Industry */} This should be the name your company uses on your{" "}
<FormField <br />
control={form.control} website and in the market.
name="industry" </span>
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> </div>
)} </div>
</div> </FormControl>
</FormControl> <FormMessage />
<FormMessage /> </FormItem>
</FormItem> )}
)} />
/>
{/* Community Size */} {/* Industry */}
<FormField <FormField
control={form.control} control={form.control}
name="communitySize" name="industry"
render={({ field }) => ( render={({ field }: { field: any }) => (
<FormItem> <FormItem>
<FormLabel>What's the rough size of your community?</FormLabel> <FormControl>
<FormControl> <MultipleOptionSelector
<MultipleOptionSelector header={<>Industry</>}
header={<>What's the rough size of your community?</>} fieldName="industry"
fieldName="communitySize" choices={industry}
choices={communitySize} handleFunction={(selectedValues: string) => {
handleFunction={(selectedValues: string) => { field.onChange(selectedValues);
field.onChange(selectedValues); }}
}} description={
description={ <>
<> Choose the industry that best aligns with your
Include your email list, social media following (e.g., business.
Instagram, Discord, Twitter). </>
</> }
} placeholder="Select an industry"
placeholder="Select" selectLabel="Industry"
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}
/> />
<TooltipProvider> </FormControl>
<Tooltip> <FormMessage />
<TooltipTrigger asChild> </FormItem>
<span className="text-[12px] text-neutral-500 self-center cursor-pointer"> )}
Would you like to apply for your first fundraising />
project as well?
</span> {/* Raised Money */}
</TooltipTrigger> <FormField
<TooltipContent> control={form.control}
<p className="text-[11px]"> name="totalRaised"
Toggling this option allows you to begin your first render={({ field }) => (
project, which is crucial for unlocking fundraising <FormItem>
tools. <div className="mt-10 space-y-5">
</p> <Label htmlFor="totalRaised" className="font-bold text-lg">
</TooltipContent> How much money has your company <br /> raised to date?
</Tooltip> </Label>
</TooltipProvider> <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> </div>
</FormControl> </FormItem>
<FormMessage /> )}
</FormItem> />
)}
/> */} {/* Incorporated in US */}
<Button <FormField
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5" control={form.control}
type="submit" name="isInUS"
> render={({ field }) => (
Submit application <FormItem>
</Button> <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> </div>
</form> </form>
</Form> </Form>

2
src/components/dualSelector.tsx
View File

@ -14,7 +14,7 @@ interface SelectorInterface {
export function DualOptionSelector(props: SelectorInterface) { export function DualOptionSelector(props: SelectorInterface) {
return ( return (
<div className="space-y-5"> <div className="space-y-5 mt-10">
<Label htmlFor={props.name} className="font-bold text-lg"> <Label htmlFor={props.name} className="font-bold text-lg">
{props.label} {props.label}
</Label> </Label>