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 Apply page component to use Selector component for handling yes/no choices

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-10 17:06:19 +07:00
parent e53821a0c7
commit 55b8d8759b
2 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ import {
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Selector } from "@/components/selector";
export default function Apply() { export default function Apply() {
const formSchema = z.object({ const formSchema = z.object({
@ -237,104 +238,66 @@ export default function Apply() {
</div> </div>
</div> </div>
{/* Is your company incorporated in the United States? */} {/* Is your company incorporated in the United States? */}
<div className="space-y-5"> <Selector
<Label htmlFor="isInUS" className="font-bold text-lg"> label={
Is your company incorporated in the <br /> <>
United States? Is your company incorporated in the <br />
</Label> United States?
<div className="flex space-x-5"> </>
<div className="flex space-x-2 w-96"> }
<Button name="isInUS"
type="button" choice1="Yes"
variant={isInUS === "Yes" ? "default" : "outline"} choice2="No"
onClick={() => handleFieldChange("isInUS", "Yes")} handleFunction={handleFieldChange}
className="w-20 h-12 text-base" description={
> <>
Yes
</Button>
<Button
type="button"
variant={isInUS === "No" ? "default" : "outline"}
onClick={() => handleFieldChange("isInUS", "No")}
className="w-20 h-12 text-base"
>
No
</Button>
<input type="hidden" value={isInUS} {...register("isInUS")} />
</div>
<span className="text-[12px] text-neutral-500 self-center">
Only companies that are incorporated or formed in the US are{" "} Only companies that are incorporated or formed in the US are{" "}
<br /> <br />
eligible to raise via Reg CF. If your company is incorporated{" "} eligible to raise via Reg CF. If your company is incorporated{" "}
<br /> <br />
outside the US, we still encourage you to apply. outside the US, we still encourage you to apply.
</span> </>
</div> }
</div> value={isInUS}
/>
{/* Is your product available (for sale) in market? */} {/* Is your product available (for sale) in market? */}
<div className="space-y-5"> <Selector
<Label htmlFor="isForSale" className="font-bold text-lg"> label={
Is your product available (for sale) <br /> <>
in market? Is your product available (for sale) <br />
</Label> in market?
<div className="flex space-x-5"> </>
<div className="flex space-x-2 w-96"> }
<Button name="isForSale"
type="button" choice1="Yes"
variant={isForSale === "Yes" ? "default" : "outline"} choice2="No"
onClick={() => handleFieldChange("isForSale", "Yes")} handleFunction={handleFieldChange}
className="w-20 h-12 text-base" description={
> <>
Yes
</Button>
<Button
type="button"
variant={isForSale === "No" ? "default" : "outline"}
onClick={() => handleFieldChange("isForSale", "No")}
className="w-20 h-12 text-base"
>
No
</Button>
</div>
<span className="text-[12px] text-neutral-500 self-center">
Only check this box if customers can access, use, or buy your{" "} Only check this box if customers can access, use, or buy your{" "}
<br /> <br />
product today. product today.
</span> </>
</div> }
</div> value={isForSale}
/>
{/* Is your company generating revenue?*/} {/* Is your company generating revenue?*/}
<div className="space-y-5"> <Selector
<Label htmlFor="isGenerating" className="font-bold text-lg"> label={<>Is your company generating revenue?</>}
Is your company generating revenue? name="isGenerating"
</Label> choice1="Yes"
<div className="flex space-x-5"> choice2="No"
<div className="flex space-x-2 w-96"> handleFunction={handleFieldChange}
<Button description={
type="button" <>
variant={isGenerating === "Yes" ? "default" : "outline"}
onClick={() => handleFieldChange("isGenerating", "Yes")}
className="w-20 h-12 text-base"
>
Yes
</Button>
<Button
type="button"
variant={isGenerating === "No" ? "default" : "outline"}
onClick={() => handleFieldChange("isGenerating", "No")}
className="w-20 h-12 text-base"
>
No
</Button>
</div>
<span className="text-[12px] text-neutral-500 self-center">
Only check this box if your company is making money. <br /> Only check this box if your company is making money. <br />
Please elaborate on revenue and other traction below. Please elaborate on revenue and other traction below.
</span> </>
</div> }
</div> value={isGenerating}
/>
{/* Pitch deck */} {/* Pitch deck */}
<div className="space-y-5"> <div className="space-y-5">

46
src/components/selector.tsx Normal file
View File

@ -0,0 +1,46 @@
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { ReactElement } from "react";
interface SelectorInterface {
label: ReactElement;
name: string;
choice1: string;
choice2: string;
handleFunction: Function;
value: string;
description: ReactElement;
}
export function Selector(props: SelectorInterface) {
return (
<div className="space-y-5">
<Label htmlFor={props.name} className="font-bold text-lg">
{props.label}
</Label>
<div className="flex space-x-5">
<div className="flex space-x-2 w-96">
<Button
type="button"
variant={props.value === props.choice1 ? "default" : "outline"}
onClick={() => props.handleFunction(props.name, props.choice1)}
className="w-20 h-12 text-base"
>
{props.choice1}
</Button>
<Button
type="button"
variant={props.value === props.choice2 ? "default" : "outline"}
onClick={() => props.handleFunction(props.name, props.choice2)}
className="w-20 h-12 text-base"
>
{props.choice2}
</Button>
</div>
<span className="text-[12px] text-neutral-500 self-center">
{props.description}
</span>
</div>
</div>
);
}