Refactor package.json to add @radix-ui/react-switch dependency

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@supabase-cache-helpers/postgrest-react-query": "^1.10.1",

src/app/business/apply/page.tsx

@@ -2,6 +2,7 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import {
   Select,
   SelectContent,
@@ -15,6 +16,12 @@ import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { useForm } from "react-hook-form";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function Apply() {
   let supabase = createSupabaseClient();
@@ -27,6 +34,7 @@ export default function Apply() {
   const [businessPitch, setBusinessPitch] = useState("");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("");
+  const [applyProject, setApplyProject] = useState(false);
   const communitySize = [
     "N/A",
     "0-5K",
@@ -339,10 +347,33 @@ export default function Apply() {
                 </span>
               </div>
             </div>
+            <div className="flex space-x-5">
+              <Switch onCheckedChange={() => setApplyProject(!applyProject)}>
+                Apply your first project!
+              </Switch>
+              <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, <br /> which is crucial for unlocking the tools
+                      necessary to raise funds.
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </div>
         </div>
 
         {/* apply first project */}
+        {applyProject && (
           <div className="grid auto-rows-max w-3/4 ml-48 bg-zinc-100 dark:bg-zinc-900 mt-10 pt-12 pb-12">
             {/* header */}
             <div className="ml-96">
@@ -368,7 +399,10 @@ export default function Apply() {
 
               {/* project type */}
               <div className="mt-10 space-y-5">
-              <Label htmlFor="projectType" className="font-bold text-lg mt-10">
+                <Label
+                  htmlFor="projectType"
+                  className="font-bold text-lg mt-10"
+                >
                   Project type
                 </Label>
                 <div className="flex space-x-5">
@@ -444,13 +478,31 @@ export default function Apply() {
                   </span>
                 </div>
               </div>
+
+              {/* project logo */}
+              <div className="mt-10 space-y-5">
+                <Label
+                  htmlFor="projectLogo"
+                  className="font-bold text-lg mt-10"
+                >
+                  Project logo
+                </Label>
+                <div className="flex space-x-5">
+                  <Input type="file" id="projectPitchDeck" className="w-96" />
+                  <span className="text-[12px] text-neutral-500 self-center">
+                    Please upload the logo picture that best represents your
+                    project.
+                  </span>
                 </div>
               </div>
+            </div>
+          </div>
+        )}
         {/* Submit */}
         <center>
           <Button
             className="mt-12 mb-20  h-10 text-base font-bold py-6 px-5"
-            type="button"
+            type="submit"
           >
             Submit application
           </Button>

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }