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>
)}
{/* 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>
);
}

168
src/components/BusinessForm.tsx
View File

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

2
src/components/dualSelector.tsx
View File

@ -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>