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>
); );
} }

168
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,21 +56,33 @@ 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">
Company name
</FormLabel>
<FormControl> <FormControl>
<Input placeholder="Your company name" {...field} /> <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> </FormControl>
<FormDescription>
This should be the name your company uses on your website and
in the market.
</FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
@ -90,7 +94,6 @@ const BusinessForm = ({
name="industry" name="industry"
render={({ field }: { field: any }) => ( render={({ field }: { field: any }) => (
<FormItem> <FormItem>
<FormLabel>Industry</FormLabel>
<FormControl> <FormControl>
<MultipleOptionSelector <MultipleOptionSelector
header={<>Industry</>} header={<>Industry</>}
@ -101,7 +104,8 @@ const BusinessForm = ({
}} }}
description={ description={
<> <>
Choose the industry that best aligns with your business. Choose the industry that best aligns with your
business.
</> </>
} }
placeholder="Select an industry" placeholder="Select an industry"
@ -119,21 +123,33 @@ const BusinessForm = ({
name="totalRaised" name="totalRaised"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <div className="mt-10 space-y-5">
How much money has your company raised to date? <Label htmlFor="totalRaised" className="font-bold text-lg">
</FormLabel> How much money has your company <br /> raised to date?
</Label>
<FormControl> <FormControl>
<div className="flex space-x-5">
<Input <Input
type="number" type="number"
id="totalRaised"
className="w-96"
placeholder="$ 1,000,000" placeholder="$ 1,000,000"
onChange={(e) => field.onChange(Number(e.target.value))} {...field}
onChange={(e) => {
const value = e.target.value;
field.onChange(value ? parseFloat(value) : null);
}}
value={field.value}
/> />
</FormControl> <span className="text-[12px] text-neutral-500 self-center">
<FormDescription> The sum total of past financing, including angel or
The sum total of past financing, including angel or venture venture <br />
capital, loans, grants, or token sales. capital, loans, grants, or token sales.
</FormDescription> </span>
</div>
</FormControl>
<FormMessage /> <FormMessage />
</div>
</FormItem> </FormItem>
)} )}
/> />
@ -144,9 +160,6 @@ const BusinessForm = ({
name="isInUS" name="isInUS"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>
Is your company incorporated in the United States?
</FormLabel>
<FormControl> <FormControl>
<DualOptionSelector <DualOptionSelector
name="isInUS" name="isInUS"
@ -161,8 +174,8 @@ const BusinessForm = ({
}} }}
description={ description={
<> <>
Only companies that are incorporated or formed in the US Only companies that are incorporated or formed in the
are eligible to raise via Reg CF. US are eligible to raise via Reg CF.
</> </>
} }
value={field.value} value={field.value}
@ -179,14 +192,13 @@ const BusinessForm = ({
name="isForSale" name="isForSale"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>
Is your product available (for sale) in market?
</FormLabel>
<FormControl> <FormControl>
<DualOptionSelector <DualOptionSelector
name="isForSale" name="isForSale"
value={field.value} value={field.value}
label={<>Is your product available (for sale) in market?</>} label={
<>Is your product available (for sale) in market?</>
}
choice1="Yes" choice1="Yes"
choice2="No" choice2="No"
handleFunction={(selectedValues: string) => { handleFunction={(selectedValues: string) => {
@ -195,8 +207,8 @@ const BusinessForm = ({
}} }}
description={ description={
<> <>
Only check this box if customers can access, use, or buy Only check this box if customers can access, use, or
your product today. buy your product today.
</> </>
} }
/> />
@ -212,7 +224,6 @@ const BusinessForm = ({
name="isGenerating" name="isGenerating"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Is your company generating revenue?</FormLabel>
<FormControl> <FormControl>
<DualOptionSelector <DualOptionSelector
name="isGenerating" name="isGenerating"
@ -221,7 +232,6 @@ const BusinessForm = ({
choice2="No" choice2="No"
value={field.value} value={field.value}
handleFunction={(selectedValues: string) => { handleFunction={(selectedValues: string) => {
// setIsGenerating;
field.onChange(selectedValues); field.onChange(selectedValues);
}} }}
description={ description={
@ -243,12 +253,18 @@ const BusinessForm = ({
name="businessPitchDeck" name="businessPitchDeck"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Pitch deck</FormLabel> <div className="space-y-5 mt-10">
<Label htmlFor="pitchDeck" className="font-bold text-lg">
Pitch deck
</Label>
<FormControl> <FormControl>
<div>
<div className="flex space-x-2 w-96"> <div className="flex space-x-2 w-96">
<Button <Button
type="button" type="button"
variant={businessPitch === "text" ? "default" : "outline"} variant={
businessPitch === "text" ? "default" : "outline"
}
onClick={() => setBusinessPitch("text")} onClick={() => setBusinessPitch("text")}
className="w-32 h-12 text-base" className="w-32 h-12 text-base"
> >
@ -256,12 +272,16 @@ const BusinessForm = ({
</Button> </Button>
<Button <Button
type="button" type="button"
variant={businessPitch === "file" ? "default" : "outline"} variant={
businessPitch === "file" ? "default" : "outline"
}
onClick={() => setBusinessPitch("file")} onClick={() => setBusinessPitch("file")}
className="w-32 h-12 text-base" className="w-32 h-12 text-base"
> >
Upload a file Upload a file
</Button> </Button>
</div>
<div className="flex space-x-5">
<Input <Input
type={businessPitch === "file" ? "file" : "text"} type={businessPitch === "file" ? "file" : "text"}
placeholder={ placeholder={
@ -269,14 +289,33 @@ const BusinessForm = ({
? "Upload your Markdown file" ? "Upload your Markdown file"
: "https:// " : "https:// "
} }
accept={businessPitch === "file" ? ".md" : undefined} accept={
businessPitch === "file" ? ".md" : undefined
}
onChange={(e) => { onChange={(e) => {
field.onChange(e); field.onChange(e);
}} }}
className="w-96 mt-5"
value={ value={
businessPitch === "file" ? "" : (field.value as string) 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 && ( {businessPitchFile && (
<div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground"> <div className="flex justify-between items-center border p-2 rounded w-96 text-sm text-foreground">
<span>1. {businessPitchFile}</span> <span>1. {businessPitchFile}</span>
@ -293,6 +332,7 @@ const BusinessForm = ({
</div> </div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</div>
</FormItem> </FormItem>
)} )}
/> />
@ -303,7 +343,6 @@ const BusinessForm = ({
name="communitySize" name="communitySize"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>What's the rough size of your community?</FormLabel>
<FormControl> <FormControl>
<MultipleOptionSelector <MultipleOptionSelector
header={<>What's the rough size of your community?</>} header={<>What's the rough size of your community?</>}
@ -326,42 +365,6 @@ const BusinessForm = ({
</FormItem> </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>
<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>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
<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"
@ -369,6 +372,7 @@ const BusinessForm = ({
Submit application Submit application
</Button> </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>