├── public
    ├── favicon.ico
    ├── assets
    │   ├── arcade.png
    │   ├── success.png
    │   ├── game-console.png
    │   ├── online-gaming.png
    │   └── screenshot-form.webp
    ├── vercel.svg
    ├── thirteen.svg
    └── next.svg
├── postcss.config.js
├── .vscode
    └── settings.json
├── styles
    └── globals.css
├── next.config.js
├── lib
    └── utils.ts
├── .eslintrc.json
├── app
    ├── head.tsx
    ├── layout.tsx
    └── page.tsx
├── pages
    └── api
    │   └── hello.ts
├── .gitignore
├── components
    ├── ui
    │   ├── label.tsx
    │   ├── separator.tsx
    │   ├── checkbox.tsx
    │   ├── input.tsx
    │   ├── switch.tsx
    │   ├── radio-group.tsx
    │   └── button.tsx
    ├── FormWrapper.tsx
    ├── SuccessMessage.tsx
    ├── AddonsForm.tsx
    ├── UserInfoForm.tsx
    ├── FinalStep.tsx
    ├── SideBar.tsx
    └── PlanForm.tsx
├── tsconfig.json
├── hooks
    └── useMultiplestepForm.ts
├── package.json
├── README.md
└── tailwind.config.js


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/assets/arcade.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/assets/arcade.png


--------------------------------------------------------------------------------
/public/assets/success.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/assets/success.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/assets/game-console.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/assets/game-console.png


--------------------------------------------------------------------------------
/public/assets/online-gaming.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/assets/online-gaming.png


--------------------------------------------------------------------------------
/public/assets/screenshot-form.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Marcosfitzsimons/multi-step-form/HEAD/public/assets/screenshot-form.webp


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "typescript.tsdk": "node_modules\\typescript\\lib",
3 |   "typescript.enablePromptUseWorkspaceTsdk": true
4 | }


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | 
4 | .border {
5 |   background-clip: padding-box;
6 | }
7 | 
8 | @tailwind utilities;
9 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   experimental: {
4 |     appDir: true,
5 |   },
6 | }
7 | 
8 | module.exports = nextConfig
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |  
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://json.schemastore.org/eslintrc",
 3 |   "extends": ["next/core-web-vitals", ""],
 4 |   "plugins": ["tailwindcss"],
 5 |   "settings": {
 6 |     "tailwindcss": {
 7 |       "callees": ["cn"]
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/app/head.tsx:
--------------------------------------------------------------------------------
 1 | export default function Head() {
 2 |   return (
 3 |     <>
 4 |       <title>Multi Step Form</title>
 5 |       <meta content="width=device-width, initial-scale=1" name="viewport" />
 6 |       <meta name="description" content="Generated by create next app" />
 7 |       <link rel="icon" href="/favicon.ico" />
 8 |     </>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 |  
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 |  
 6 | import { cn } from "@/lib/utils"
 7 |  
 8 | const Label = React.forwardRef<
 9 |   React.ElementRef<typeof LabelPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <LabelPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Label.displayName = LabelPrimitive.Root.displayName
22 |  
23 | export { Label }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "baseUrl": ".",
23 |     "paths": {
24 |       "@/*": ["./*"]
25 |     }
26 |   },
27 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
28 |   "exclude": ["node_modules"]
29 | }
30 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Ubuntu } from "@next/font/google";
 2 | 
 3 | import "../styles/globals.css";
 4 | 
 5 | const ubuntu = Ubuntu({
 6 |   variable: "--font-ubuntu",
 7 |   weight: ["400", "500", "700"],
 8 |   subsets: ["latin"],
 9 |   display: "swap",
10 | });
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: {
15 |   children: React.ReactNode;
16 | }) {
17 |   return (
18 |     <html
19 |       lang="en"
20 |       className={`${ubuntu.variable} bg-[#0d0f12] text-neutral-200`}
21 |     >
22 |       {/*
23 |         <head /> will contain the components returned by the nearest parent
24 |         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
25 |       */}
26 |       <head />
27 |       <body className="flex justify-center items-center h-screen w-full">
28 |         {children}
29 |       </body>
30 |     </html>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "bg-neutral-700",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | );
29 | Separator.displayName = SeparatorPrimitive.Root.displayName;
30 | 
31 | export { Separator };
32 | 


--------------------------------------------------------------------------------
/hooks/useMultiplestepForm.ts:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import { useState } from 'react'
 4 | 
 5 | export function useMultiplestepForm(steps: number) {
 6 |     const [currentStepIndex, setCurrentStepIndex] = useState(0)
 7 |     const [showSuccessMsg, setShowSuccessMsg] = useState(false);
 8 | 
 9 |     const nextStep = () => {
10 |         if (currentStepIndex < steps - 1) {
11 |             setCurrentStepIndex((i) => i + 1)
12 |         }
13 |         if (currentStepIndex === 3) {
14 |             setShowSuccessMsg(true)
15 |         }
16 |     }
17 | 
18 |     const previousStep = () => {
19 |         if (currentStepIndex > 0) {
20 |             setCurrentStepIndex((i) => i - 1)
21 |         }
22 |     }
23 | 
24 |     const goTo = (index: number) => {
25 |         setCurrentStepIndex(index)
26 |     }
27 | 
28 |     return {
29 |         currentStepIndex,
30 |         steps,
31 |         isFirstStep: currentStepIndex === 0,
32 |         isLastStep: currentStepIndex === steps - 1,
33 |         showSuccessMsg,
34 |         goTo,
35 |         nextStep,
36 |         previousStep
37 |     }
38 | }


--------------------------------------------------------------------------------
/public/thirteen.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>


--------------------------------------------------------------------------------
/components/FormWrapper.tsx:
--------------------------------------------------------------------------------
 1 | import type { ReactNode } from "react";
 2 | import { motion } from "framer-motion";
 3 | 
 4 | type FormWrapperProps = {
 5 |   title: string;
 6 |   description: string;
 7 |   children: ReactNode;
 8 | };
 9 | 
10 | const formVariants = {
11 |   hidden: {
12 |     opacity: 0,
13 |     x: -50,
14 |   },
15 |   visible: {
16 |     opacity: 1,
17 |     x: 0,
18 |   },
19 |   exit: {
20 |     opacity: 0,
21 |     x: 50,
22 |     transition: {
23 |       ease: "easeOut",
24 |     },
25 |   },
26 | };
27 | 
28 | const FormWrapper = ({ title, description, children }: FormWrapperProps) => {
29 |   return (
30 |     <motion.div
31 |       className="flex flex-col gap-5"
32 |       variants={formVariants}
33 |       initial="hidden"
34 |       animate="visible"
35 |       exit="exit"
36 |     >
37 |       <div className="flex flex-col gap-1">
38 |         <h2 className="text-xl font-semibold text-white md:text-2xl">
39 |           {title}
40 |         </h2>
41 |         <p className="text-sm text-neutral-300 md:text-base">{description}</p>
42 |       </div>
43 |       {children}
44 |     </motion.div>
45 |   );
46 | };
47 | 
48 | export default FormWrapper;
49 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { Check } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Checkbox = React.forwardRef<
10 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12 | >(({ className, ...props }, ref) => (
13 |   <CheckboxPrimitive.Root
14 |     ref={ref}
15 |     className={cn(
16 |       "peer h-4 w-4 shrink-0 rounded-sm border border-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
17 |       className
18 |     )}
19 |     {...props}
20 |   >
21 |     <CheckboxPrimitive.Indicator
22 |       className={cn("flex items-center justify-center")}
23 |     >
24 |       <Check className="h-4 w-4" />
25 |     </CheckboxPrimitive.Indicator>
26 |   </CheckboxPrimitive.Root>
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 | 
30 | export { Checkbox }
31 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <div className="flex flex-1 items-center">
12 |         <div
13 |           className="w-full relative before:pointer-events-none focus-within:before:opacity-100 before:opacity-0 before:absolute before:-inset-1 before:rounded-[12px] before:border before:border-[#77f6aa]/70 before:ring-2 before:ring-[#77f6aa]/5 before:transition
14 | after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 focus-within:after:shadow-[#77f6aa] after:transition"
15 |         >
16 |           <input
17 |             className={cn(
18 |               "relative text-sm text-neutral-200 bg-neutral-750 placeholder:text-neutral-500 px-3.5 py-2 rounded-lg border border-black/5 shadow-input shadow-black/10 !outline-none",
19 |               className
20 |             )}
21 |             ref={ref}
22 |             {...props}
23 |           />
24 |         </div>
25 |       </div>
26 |     );
27 |   }
28 | );
29 | Input.displayName = "Input";
30 | 
31 | export { Input };
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "multi-step-form",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@next/font": "^13.1.6",
13 |     "@radix-ui/react-checkbox": "^1.0.1",
14 |     "@radix-ui/react-label": "^2.0.0",
15 |     "@radix-ui/react-radio-group": "^1.1.1",
16 |     "@radix-ui/react-separator": "^1.0.1",
17 |     "@radix-ui/react-switch": "^1.0.1",
18 |     "@radix-ui/react-toggle-group": "^1.0.2",
19 |     "@types/node": "18.13.0",
20 |     "@types/react": "18.0.28",
21 |     "@types/react-dom": "18.0.10",
22 |     "class-variance-authority": "^0.4.0",
23 |     "clsx": "^1.2.1",
24 |     "eslint-config-next": "13.1.6",
25 |     "eslint-plugin-tailwindcss": "^3.8.3",
26 |     "framer-motion": "^9.0.4",
27 |     "lucide-react": "^0.112.0",
28 |     "next": "13.1.6",
29 |     "react": "18.2.0",
30 |     "react-dom": "18.2.0",
31 |     "react-rough-notation": "^1.0.3",
32 |     "tailwind-merge": "^1.9.1",
33 |     "tailwindcss-animate": "^1.0.5",
34 |     "typescript": "4.9.5"
35 |   },
36 |   "devDependencies": {
37 |     "autoprefixer": "^10.4.13",
38 |     "eslint": "^8.34.0",
39 |     "postcss": "^8.4.21",
40 |     "tailwindcss": "^3.2.6"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Multi-step form
 2 | 
 3 | ## Table of contents
 4 | 
 5 | - [Overview](#overview)
 6 |   - [Screenshot](#screenshot)
 7 |   - [Built with](#built-with)
 8 |   - [The challenge](#the-challenge)
 9 |   - [Links](#links)
10 | 
11 | - [Author](#author)
12 | - [Acknowledgments](#acknowledgments)
13 | 
14 | ## Overview
15 | 
16 | ### Screenshot
17 | 
18 | ![](./public/assets/screenshot-form.webp)
19 | 
20 | ### Built with
21 | 
22 | - Semantic HTML5 markup
23 | - Flexbox
24 | - Mobile-first workflow
25 | - [React](https://reactjs.org/) - JS library
26 | - [Next.js 13](https://beta.nextjs.org/docs) - React framework
27 | - [TailwindCSS](https://tailwindcss.com/) - For styles
28 | - [shadcn/ui](https://ui.shadcn.com/) - shadcn/ui components :rocket:
29 | - [Framer Motion](https://www.framer.com/motion/) - For animations
30 | 
31 | ### The challenge
32 | 
33 | Users should be able to:
34 | 
35 | - Complete each step of the sequence
36 | - See a summary of their selections on the final step and confirm their order
37 | - View the optimal layout for the interface depending on their device's screen size
38 | - See hover and focus states for all interactive elements on the page
39 | 
40 | ### Links
41 | 
42 | - Live Site URL: [Here](https://multi-step-form-tawny.vercel.app/)
43 | 
44 | ## Author
45 | 
46 | - Website - [Marcos V Fitzsimons](https://marcosfitzsimons.com.ar/)
47 | 


--------------------------------------------------------------------------------
/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Switch = React.forwardRef<
 9 |   React.ElementRef<typeof SwitchPrimitives.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SwitchPrimitives.Root
13 |     className={cn(
14 |       "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-[#60c589] dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 dark:data-[state=unchecked]:bg-slate-700 dark:data-[state=checked]:bg-slate-400",
15 |       className
16 |     )}
17 |     {...props}
18 |     ref={ref}
19 |   >
20 |     <SwitchPrimitives.Thumb
21 |       className={cn(
22 |         "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5"
23 |       )}
24 |     />
25 |   </SwitchPrimitives.Root>
26 | ));
27 | Switch.displayName = SwitchPrimitives.Root.displayName;
28 | 
29 | export { Switch };
30 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class", '[data-theme="dark"]'],
 4 |   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
 5 |   theme: {
 6 |     extend: {
 7 |       fontFamily: {
 8 |         sans: ['var(--font-ubuntu)'],
 9 |       },
10 |       keyframes: {
11 |         "accordion-down": {
12 |           from: { height: 0 },
13 |           to: { height: "var(--radix-accordion-content-height)" },
14 |         },
15 |         "accordion-up": {
16 |           from: { height: "var(--radix-accordion-content-height)" },
17 |           to: { height: 0 },
18 |         },
19 |       },
20 |       animation: {
21 |         "accordion-down": "accordion-down 0.2s ease-out",
22 |         "accordion-up": "accordion-up 0.2s ease-out",
23 |       },
24 |       colors: {
25 |         neutral: {
26 |           750: '#313131'
27 |         }
28 |       },
29 |       boxShadow: {
30 |         input: `
31 |           0px 1px 0px -1px var(--tw-shadow-color),
32 |           0px 1px 1px -1px var(--tw-shadow-color),
33 |           0px 1px 2px -1px var(--tw-shadow-color),
34 |           0px 2px 4px -2px var(--tw-shadow-color),
35 |           0px 3px 6px -3px var(--tw-shadow-color)
36 |         `,
37 |         highlight: `
38 |           inset 0px 0px 0px 1px var(--tw-shadow-color),
39 |           inset 0px 1px 0px var(--tw-shadow-color)
40 |         `,
41 |       },
42 |     },
43 |   },
44 |   plugins: [require("tailwindcss-animate")],
45 | }


--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 5 | import { Circle } from "lucide-react";
 6 | 
 7 | import { cn } from "@/lib/utils";
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   );
20 | });
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, children, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "text:fill-slate-50 h-4 w-4 rounded-full border border-slate-300 text-slate-900 hover:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:text-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-2.5 w-2.5 fill-neutral-200 dark:fill-slate-50" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   );
41 | });
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
43 | 
44 | export { RadioGroup, RadioGroupItem };
45 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { VariantProps, cva } from "class-variance-authority";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const buttonVariants = cva(
 7 |   "outline-none inline-flex items-center justify-center text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900",
12 |         destructive:
13 |           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
14 |         outline:
15 |           "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
16 |         subtle:
17 |           "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
18 |         ghost:
19 |           "bg-transparent dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
20 |         link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
21 |       },
22 |       size: {
23 |         default: "h-10 py-2 px-4",
24 |         sm: "h-9 px-2 rounded-md",
25 |         lg: "h-11 px-8 rounded-md",
26 |       },
27 |     },
28 |     defaultVariants: {
29 |       variant: "default",
30 |       size: "default",
31 |     },
32 |   }
33 | );
34 | 
35 | export interface ButtonProps
36 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
37 |     VariantProps<typeof buttonVariants> {}
38 | 
39 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
40 |   ({ className, variant, size, ...props }, ref) => {
41 |     return (
42 |       <button
43 |         className={cn(buttonVariants({ variant, size, className }))}
44 |         ref={ref}
45 |         {...props}
46 |       />
47 |     );
48 |   }
49 | );
50 | Button.displayName = "Button";
51 | 
52 | export { Button, buttonVariants };
53 | 


--------------------------------------------------------------------------------
/components/SuccessMessage.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { motion } from "framer-motion";
 3 | import { RefreshCcw } from "lucide-react";
 4 | import { Button } from "../components/ui/button";
 5 | import successIcon from "../public/assets/success.png";
 6 | 
 7 | const successVariants = {
 8 |   hidden: {
 9 |     opacity: 0,
10 |     y: 50,
11 |   },
12 |   visible: {
13 |     opacity: 1,
14 |     y: 0,
15 |     transition: {
16 |       ease: "backIn",
17 |       duration: 0.6,
18 |     },
19 |   },
20 | };
21 | 
22 | const SuccessMessage = () => {
23 |   const refresh = () => window.location.reload();
24 |   return (
25 |     <motion.section
26 |       className="w-full h-full flex flex-col items-center justify-center gap-4 md:gap-2 text-center"
27 |       variants={successVariants}
28 |       initial="hidden"
29 |       animate="visible"
30 |     >
31 |       <Image
32 |         src={successIcon}
33 |         width="150"
34 |         height="150"
35 |         alt="Success Icon"
36 |         className="md:mb-4"
37 |       />
38 |       <h4 className="text-2xl font-semibold text-white md:text-3xl">
39 |         Thank you!
40 |       </h4>
41 |       <p className="text-sm max-w-md text-neutral-300 md:text-base">
42 |         Thanks for confirming your subscription! We hope you have fun using our
43 |         plataform. If you ever need support, please feel free to email us at
44 |         support@loremgaming.com
45 |       </p>
46 |       <div className="flex items-center mt-6">
47 |         <div className="relative after:pointer-events-none after:absolute after:inset-px after:rounded-[11px] after:shadow-highlight after:shadow-white/10 focus-within:after:shadow-[#77f6aa] after:transition">
48 |           <Button
49 |             onClick={refresh}
50 |             className="relative text-neutral-200 bg-neutral-900 border border-black/20 shadow-input shadow-black/10 rounded-xl hover:text-white"
51 |           >
52 |             <RefreshCcw className="mr-2 h-4 w-4" /> Restart
53 |           </Button>
54 |         </div>
55 |       </div>
56 |     </motion.section>
57 |   );
58 | };
59 | 
60 | export default SuccessMessage;
61 | 


--------------------------------------------------------------------------------
/components/AddonsForm.tsx:
--------------------------------------------------------------------------------
 1 | import { FormItems } from "@/app/page";
 2 | import { Checkbox } from "@/components/ui/checkbox";
 3 | import FormWrapper from "./FormWrapper";
 4 | 
 5 | type stepProps = FormItems & {
 6 |   updateForm: (fieldToUpdate: Partial<FormItems>) => void;
 7 | };
 8 | 
 9 | const AddonsForm = ({ addOns, yearly, updateForm }: stepProps) => {
10 |   function handleCheckboxChange(addOnId: number, checked: boolean) {
11 |     const updatedAddOns = addOns.map((addOn) =>
12 |       addOn.id === addOnId ? { ...addOn, checked } : addOn
13 |     );
14 |     updateForm({ addOns: updatedAddOns });
15 |   }
16 | 
17 |   return (
18 |     <FormWrapper
19 |       title="Pick add-ons"
20 |       description="Add-ons help enhance your gaming experience"
21 |     >
22 |       <div className="flex flex-col gap-3">
23 |         {addOns.map((addOn) => (
24 |           <div
25 |             className={`border border-neutral-600 flex items-center gap-3 p-3 rounded-md ${
26 |               addOn.checked ? "border-[#77f6aa] bg-neutral-900" : ""
27 |             } focus:border-[#77f6aa] outline-none hover:border-[#77f6aa] md:gap-5 md:p-5`}
28 |             key={addOn.id}
29 |           >
30 |             <Checkbox
31 |               id={`addon-${addOn.id}`}
32 |               checked={addOn.checked}
33 |               onCheckedChange={(checked) =>
34 |                 handleCheckboxChange(addOn.id, checked as boolean)
35 |               }
36 |             />
37 |             <div className="w-full flex items-center justify-between">
38 |               <div className="flex flex-col">
39 |                 <label
40 |                   htmlFor={`addon-${addOn.id}`}
41 |                   className="text-white font-semibold"
42 |                 >
43 |                   {addOn.title}
44 |                 </label>
45 |                 <p className="text-sm">{addOn.subtitle}</p>
46 |               </div>
47 |               <p className="text-[#77f6aa]">
48 |                 {`+$${yearly ? addOn.price * 10 : addOn.price}${
49 |                   yearly ? "/yr" : "/mo"
50 |                 }`}
51 |               </p>
52 |             </div>
53 |           </div>
54 |         ))}
55 |       </div>
56 |     </FormWrapper>
57 |   );
58 | };
59 | 
60 | export default AddonsForm;
61 | 


--------------------------------------------------------------------------------
/components/UserInfoForm.tsx:
--------------------------------------------------------------------------------
 1 | import FormWrapper from "./FormWrapper";
 2 | import { Input } from "@/components/ui/input";
 3 | import { Label } from "@/components/ui/label";
 4 | import { FormItems } from "../app/page";
 5 | 
 6 | type StepProps = FormItems & {
 7 |   updateForm: (fieldToUpdate: Partial<FormItems>) => void;
 8 |   errors: Partial<FormItems>;
 9 | };
10 | 
11 | const UserInfoForm = ({
12 |   name,
13 |   email,
14 |   phone,
15 |   errors,
16 |   updateForm,
17 | }: StepProps) => {
18 |   return (
19 |     <FormWrapper
20 |       title="Personal info"
21 |       description="Please provide your name, email address, and phone number."
22 |     >
23 |       <div className="w-full flex flex-col gap-5">
24 |         <div className="flex flex-col gap-2">
25 |           <Label htmlFor="name">Name</Label>
26 |           <Input
27 |             autoFocus
28 |             type="text"
29 |             name="name"
30 |             id="name"
31 |             placeholder="e.g. Stephen King"
32 |             value={name}
33 |             onChange={(e) => updateForm({ name: e.target.value })}
34 |             className="w-full"
35 |             required
36 |           />
37 |           {errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
38 |         </div>
39 |         <div className="flex flex-col gap-2">
40 |           <Label htmlFor="email">Email Address</Label>
41 |           <Input
42 |             type="text"
43 |             name="email"
44 |             id="email"
45 |             placeholder="e.g. stephenking@lorem.com"
46 |             value={email}
47 |             className="w-full"
48 |             onChange={(e) => updateForm({ email: e.target.value })}
49 |             required
50 |           />
51 |           {errors.email && (
52 |             <p className="text-red-500 text-sm">{errors.email}</p>
53 |           )}
54 |         </div>
55 |         <div className="flex flex-col gap-2">
56 |           <Label htmlFor="phone">Phone Number</Label>
57 |           <Input
58 |             type="tel"
59 |             name="phone"
60 |             id="phone"
61 |             placeholder="e.g. +1 234 567 890"
62 |             value={phone}
63 |             className="w-full"
64 |             onChange={(e) => updateForm({ phone: e.target.value })}
65 |             required
66 |           />
67 |           {errors.phone && (
68 |             <p className="text-red-500 text-sm">{errors.phone}</p>
69 |           )}
70 |         </div>
71 |       </div>
72 |     </FormWrapper>
73 |   );
74 | };
75 | 
76 | export default UserInfoForm;
77 | 


--------------------------------------------------------------------------------
/components/FinalStep.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState, useEffect } from "react";
 4 | import FormWrapper from "./FormWrapper";
 5 | import { Separator } from "@/components/ui/separator";
 6 | import { FormItems } from "@/app/page";
 7 | 
 8 | type StepProps = FormItems & {
 9 |   goTo: (index: number) => void;
10 | };
11 | 
12 | const FinalStep = ({ yearly, plan, addOns, goTo }: StepProps) => {
13 |   let planPrice = 0;
14 |   switch (plan) {
15 |     case "arcade":
16 |       planPrice = 9;
17 |       break;
18 |     case "advanced":
19 |       planPrice = 12;
20 |       break;
21 |     case "pro":
22 |       planPrice = 15;
23 |       break;
24 |     default:
25 |       planPrice = 0;
26 |       break;
27 |   }
28 | 
29 |   const filteredAddOns = addOns.filter((addOn) => addOn.checked === true);
30 | 
31 |   const totalAddOnsPrice = filteredAddOns?.reduce(
32 |     (acc, obj) => acc + obj.price,
33 |     0
34 |   );
35 |   console.log(totalAddOnsPrice);
36 | 
37 |   return (
38 |     <FormWrapper
39 |       title="Finishing Up"
40 |       description="Double-check everything looks OK before confirming."
41 |     >
42 |       <div className="">
43 |         <div className="bg-neutral-900 p-4 mt-2 rounded-md border border-neutral-700">
44 |           <div className="flex justify-between items-center">
45 |             <div className="">
46 |               <h4 className="font-semibold text-white md:text-lg">
47 |                 {`${plan.charAt(0).toUpperCase() + plan.slice(1)} (${
48 |                   yearly ? "Yearly" : "Monthly"
49 |                 })`}
50 |               </h4>
51 |               <button
52 |                 onClick={() => goTo(1)}
53 |                 className="text-[#6fe79f] text-sm"
54 |               >
55 |                 Change
56 |               </button>
57 |             </div>
58 |             <p className="font-semibold text-white">{`$${
59 |               yearly ? planPrice * 10 : planPrice
60 |             }${yearly ? "/yr" : "/mo"}`}</p>
61 |           </div>
62 |           {filteredAddOns.length > 0 && <Separator className="my-4" />}
63 |           {filteredAddOns?.map((addOn) => (
64 |             <div
65 |               className="flex justify-between items-center my-2"
66 |               key={addOn.id}
67 |             >
68 |               <p className="text-neutral-400">{addOn.title}</p>
69 |               <p className="">{`$${yearly ? addOn.price * 10 : addOn.price}${
70 |                 yearly ? "/yr" : "/mo"
71 |               }`}</p>
72 |             </div>
73 |           ))}
74 |         </div>
75 |         <div className="flex justify-between items-center my-4 px-4">
76 |           <p className="text-neutral-400">
77 |             Total (per {yearly ? "year" : "month"})
78 |           </p>
79 |           <p className="text-[#6fe79f] font-semibold md:text-lg">
80 |             +$
81 |             {yearly
82 |               ? planPrice * 10 + totalAddOnsPrice * 10
83 |               : planPrice + totalAddOnsPrice}
84 |             /{yearly ? "yr" : "mo"}
85 |           </p>
86 |         </div>
87 |       </div>
88 |     </FormWrapper>
89 |   );
90 | };
91 | 
92 | export default FinalStep;
93 | 


--------------------------------------------------------------------------------
/components/SideBar.tsx:
--------------------------------------------------------------------------------
  1 | import { RoughNotation } from "react-rough-notation";
  2 | 
  3 | type NavProps = {
  4 |   currentStepIndex: number;
  5 |   goTo: (index: number) => void;
  6 | };
  7 | 
  8 | const SideBar = ({ currentStepIndex, goTo }: NavProps) => {
  9 |   return (
 10 |     <div className="absolute -top-20 left-0 w-full md:w-[25%] md:relative md:top-0 md:left-0">
 11 |       <nav className="py-5 text-slate-200 bg-neutral-900 h-full rounded-md border border-neutral-700 md:p-5">
 12 |         <ul className="flex justify-center gap-2 md:flex-col">
 13 |           <li className="flex flex-col items-start font-medium">
 14 |             <span className="hidden text-neutral-500 uppercase text-sm md:flex">
 15 |               step 1
 16 |             </span>
 17 |             <button
 18 |               tabIndex={0}
 19 |               onClick={() => goTo(0)}
 20 |               className={`text-sm ${
 21 |                 currentStepIndex === 0 ? "text-[#ffe666]" : "text-white"
 22 |               } md:text-base`}
 23 |             >
 24 |               <RoughNotation
 25 |                 type="underline"
 26 |                 show={currentStepIndex === 0}
 27 |                 color="#ffe666"
 28 |               >
 29 |                 Your info
 30 |               </RoughNotation>
 31 |             </button>
 32 |           </li>
 33 |           <li className="flex flex-col items-start font-medium">
 34 |             <span className="hidden text-neutral-500 uppercase text-sm md:flex">
 35 |               step 2
 36 |             </span>
 37 |             <button
 38 |               tabIndex={0}
 39 |               onClick={() => goTo(1)}
 40 |               className={`text-sm ${
 41 |                 currentStepIndex === 1 ? "text-[#bd284d]" : "text-white"
 42 |               } md:text-base`}
 43 |             >
 44 |               <RoughNotation
 45 |                 type="underline"
 46 |                 show={currentStepIndex === 1}
 47 |                 color="#bd284d"
 48 |               >
 49 |                 Select plan
 50 |               </RoughNotation>
 51 |             </button>
 52 |           </li>
 53 |           <li className="flex flex-col items-start font-medium">
 54 |             <span className="hidden text-neutral-500 uppercase text-sm md:flex">
 55 |               step 3
 56 |             </span>
 57 |             <button
 58 |               tabIndex={0}
 59 |               onClick={() => goTo(2)}
 60 |               className={`text-sm ${
 61 |                 currentStepIndex === 2 ? "text-[#E7B8FF]" : "text-white"
 62 |               } md:text-base`}
 63 |             >
 64 |               <RoughNotation
 65 |                 type="underline"
 66 |                 show={currentStepIndex === 2}
 67 |                 color="#E7B8FF"
 68 |               >
 69 |                 Add-ons
 70 |               </RoughNotation>
 71 |             </button>
 72 |           </li>
 73 |           <li className="flex flex-col items-start font-medium">
 74 |             <span className="hidden text-neutral-500 uppercase text-sm md:flex">
 75 |               step 4
 76 |             </span>
 77 |             <button
 78 |               tabIndex={0}
 79 |               onClick={() => goTo(3)}
 80 |               className={`text-sm ${
 81 |                 currentStepIndex === 3 ? "text-[#6fe79f]" : "text-white"
 82 |               } md:text-base`}
 83 |             >
 84 |               <RoughNotation
 85 |                 type="underline"
 86 |                 show={currentStepIndex === 3}
 87 |                 color="#6fe79f"
 88 |               >
 89 |                 Summary
 90 |               </RoughNotation>
 91 |             </button>
 92 |           </li>
 93 |         </ul>
 94 |       </nav>
 95 |     </div>
 96 |   );
 97 | };
 98 | 
 99 | export default SideBar;
100 | 


--------------------------------------------------------------------------------
/components/PlanForm.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import Image from "next/image";
  5 | import * as ToggleGroup from "@radix-ui/react-toggle-group";
  6 | import { Label } from "@/components/ui/label";
  7 | import { Switch } from "@/components/ui/switch";
  8 | import FormWrapper from "./FormWrapper";
  9 | import { FormItems } from "@/app/page";
 10 | import arcadeImg from "../public/assets/arcade.png";
 11 | import advancedImg from "../public/assets/game-console.png";
 12 | import proImg from "../public/assets/online-gaming.png";
 13 | 
 14 | type stepProps = FormItems & {
 15 |   updateForm: (fieldToUpdate: Partial<FormItems>) => void;
 16 | };
 17 | 
 18 | type Plan = "arcade" | "advanced" | "pro";
 19 | 
 20 | const PlanForm = ({ updateForm, plan, yearly }: stepProps) => {
 21 |   const [yearlyUpdated, setYearlyUpdated] = useState(yearly);
 22 |   const [planSelected, setPlanSelected] = useState<Plan>(plan);
 23 | 
 24 |   const handleCheckedChange = (yearlyUpdated: boolean) => {
 25 |     setYearlyUpdated((prev) => !prev);
 26 |     updateForm({ yearly: yearlyUpdated });
 27 |   };
 28 | 
 29 |   const handleValueChange = (planSelected: Plan) => {
 30 |     if (planSelected) {
 31 |       setPlanSelected(planSelected);
 32 |       updateForm({ plan: planSelected });
 33 |     }
 34 |   };
 35 | 
 36 |   return (
 37 |     <FormWrapper
 38 |       title="Select your plan"
 39 |       description="You have the option of monthly or yearly billing."
 40 |     >
 41 |       <ToggleGroup.Root
 42 |         orientation="horizontal"
 43 |         className="flex flex-col gap-3 my-2 md:flex-row md:items-center md:justify-between md:gap-0"
 44 |         type="single"
 45 |         value={planSelected}
 46 |         onValueChange={handleValueChange}
 47 |       >
 48 |         <ToggleGroup.Item
 49 |           value="arcade"
 50 |           className="border border-neutral-600 flex items-start gap-3 p-3 h-24 rounded-md aspect-square data-[state=on]:border-[#77f6aa] data-[state=on]:bg-neutral-900 focus:border-[#77f6aa] outline-none hover:border-[#77f6aa] md:h-44 md:w-[30%] md:flex-col md:justify-between md:gap-0"
 51 |         >
 52 |           <Image src={arcadeImg} alt="arcade" width="40" height="40" />
 53 |           <div className="relative -top-1 flex flex-col items-start md:top-0">
 54 |             <p className="text-white font-semibold">Arcade</p>
 55 |             <p className="text-sm">{yearly ? "$90/yr" : "$9/mo"}</p>
 56 |             {yearly && (
 57 |               <span className="text-white text-sm">2 months free</span>
 58 |             )}
 59 |           </div>
 60 |         </ToggleGroup.Item>
 61 |         <ToggleGroup.Item
 62 |           value="advanced"
 63 |           className="border border-neutral-600 flex items-start gap-3 p-3 h-24 rounded-md aspect-square data-[state=on]:border-[#77f6aa] data-[state=on]:bg-neutral-900 focus:border-[#77f6aa] outline-none hover:border-[#77f6aa] md:h-44 md:w-[30%] md:flex-col md:justify-between md:gap-0"
 64 |         >
 65 |           <Image src={advancedImg} alt="advanced" width="40" height="40" />
 66 |           <div className="relative -top-1 flex flex-col items-start md:top-0">
 67 |             <p className="text-white font-semibold">Advanced</p>
 68 |             <p className="text-sm">{yearly ? "$120/yr" : "$12/mo"}</p>
 69 |             {yearly && (
 70 |               <span className="text-white text-sm">2 months free</span>
 71 |             )}
 72 |           </div>
 73 |         </ToggleGroup.Item>
 74 | 
 75 |         <ToggleGroup.Item
 76 |           className="border border-neutral-600 flex items-start gap-3 p-3 h-24 rounded-md aspect-square data-[state=on]:border-[#77f6aa] data-[state=on]:bg-neutral-900 focus:border-[#77f6aa] outline-none hover:border-[#77f6aa] md:h-44 md:w-[30%] md:flex-col md:justify-between md:gap-0"
 77 |           value="pro"
 78 |         >
 79 |           <Image src={proImg} alt="pro" width="40" height="40" />
 80 |           <div className="relative -top-1 flex flex-col items-start md:top-0">
 81 |             <p className="text-white font-semibold">Pro</p>
 82 |             <p className="text-sm">{yearly ? "$150/yr" : "$15/mo"}</p>
 83 |             {yearly && (
 84 |               <span className="text-white text-sm">2 months free</span>
 85 |             )}
 86 |           </div>
 87 |         </ToggleGroup.Item>
 88 |       </ToggleGroup.Root>
 89 |       <div className="w-full flex items-center justify-center bg-neutral-900 p-3 rounded-md">
 90 |         <div className="flex items-center gap-6">
 91 |           <Label
 92 |             htmlFor="airplane-mode"
 93 |             className={yearly ? "" : "text-[#77f6aa]"}
 94 |           >
 95 |             Monthly
 96 |           </Label>
 97 |           <Switch
 98 |             id="airplane-mode"
 99 |             checked={yearlyUpdated}
100 |             onCheckedChange={handleCheckedChange}
101 |           />
102 |           <Label
103 |             htmlFor="airplane-mode"
104 |             className={yearly ? "text-[#77f6aa]" : ""}
105 |           >
106 |             Yearly
107 |           </Label>
108 |         </div>
109 |       </div>
110 |     </FormWrapper>
111 |   );
112 | };
113 | 
114 | export default PlanForm;
115 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { useMultiplestepForm } from "hooks/useMultiplestepForm";
  6 | import { AnimatePresence } from "framer-motion";
  7 | import UserInfoForm from "@/components/UserInfoForm";
  8 | import PlanForm from "@/components/PlanForm";
  9 | import AddonsForm from "@/components/AddonsForm";
 10 | import FinalStep from "@/components/FinalStep";
 11 | import SuccessMessage from "@/components/SuccessMessage";
 12 | import SideBar from "@/components/SideBar";
 13 | 
 14 | interface AddOn {
 15 |   id: number;
 16 |   checked: boolean;
 17 |   title: string;
 18 |   subtitle: string;
 19 |   price: number;
 20 | }
 21 | 
 22 | export type FormItems = {
 23 |   name: string;
 24 |   email: string;
 25 |   phone: string;
 26 |   plan: "arcade" | "advanced" | "pro";
 27 |   yearly: boolean;
 28 |   addOns: AddOn[];
 29 | };
 30 | 
 31 | const initialValues: FormItems = {
 32 |   name: "",
 33 |   email: "",
 34 |   phone: "",
 35 |   plan: "arcade",
 36 |   yearly: false,
 37 |   addOns: [
 38 |     {
 39 |       id: 1,
 40 |       checked: true,
 41 |       title: "Online Service",
 42 |       subtitle: "Access to multiple games",
 43 |       price: 1,
 44 |     },
 45 |     {
 46 |       id: 2,
 47 |       checked: false,
 48 |       title: "Large storage",
 49 |       subtitle: "Extra 1TB of cloud save",
 50 |       price: 2,
 51 |     },
 52 |     {
 53 |       id: 3,
 54 |       checked: false,
 55 |       title: "Customizable Profile",
 56 |       subtitle: "Custom theme on your profile",
 57 |       price: 2,
 58 |     },
 59 |   ],
 60 | };
 61 | 
 62 | export default function Home() {
 63 |   const [formData, setFormData] = useState(initialValues);
 64 |   const [errors, setErrors] = useState<Record<string, string>>({});
 65 |   const {
 66 |     previousStep,
 67 |     nextStep,
 68 |     currentStepIndex,
 69 |     isFirstStep,
 70 |     isLastStep,
 71 |     steps,
 72 |     goTo,
 73 |     showSuccessMsg,
 74 |   } = useMultiplestepForm(4);
 75 | 
 76 |   function updateForm(fieldToUpdate: Partial<FormItems>) {
 77 |     const { name, email, phone } = fieldToUpdate;
 78 | 
 79 |     if (name && name.trim().length < 3) {
 80 |       setErrors((prevState) => ({
 81 |         ...prevState,
 82 |         name: "Name should be at least 3 characters long",
 83 |       }));
 84 |     } else if (name && name.trim().length > 15) {
 85 |       setErrors((prevState) => ({
 86 |         ...prevState,
 87 |         name: "Name should be no longer than 15 characters",
 88 |       }));
 89 |     } else {
 90 |       setErrors((prevState) => ({
 91 |         ...prevState,
 92 |         name: "",
 93 |       }));
 94 |     }
 95 | 
 96 |     if (email && !/\S+@\S+\.\S+/.test(email)) {
 97 |       setErrors((prevState) => ({
 98 |         ...prevState,
 99 |         email: "Please enter a valid email address",
100 |       }));
101 |     } else {
102 |       setErrors((prevState) => ({
103 |         ...prevState,
104 |         email: "",
105 |       }));
106 |     }
107 | 
108 |     if (phone && !/^[0-9]{10}$/.test(phone)) {
109 |       setErrors((prevState) => ({
110 |         ...prevState,
111 |         phone: "Please enter a valid 10-digit phone number",
112 |       }));
113 |     } else {
114 |       setErrors((prevState) => ({
115 |         ...prevState,
116 |         phone: "",
117 |       }));
118 |     }
119 | 
120 |     setFormData({ ...formData, ...fieldToUpdate });
121 |   }
122 | 
123 |   const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {
124 |     e.preventDefault();
125 |     if (Object.values(errors).some((error) => error)) {
126 |       return;
127 |     }
128 |     nextStep();
129 |   };
130 | 
131 |   return (
132 |     <div
133 |       className={`flex justify-between ${
134 |         currentStepIndex === 1 ? "h-[600px] md:h-[500px]" : "h-[500px]"
135 |       } w-11/12 max-w-4xl relative m-1 rounded-lg border border-neutral-700 bg-[#262626] p-4`}
136 |     >
137 |       {!showSuccessMsg ? (
138 |         <SideBar currentStepIndex={currentStepIndex} goTo={goTo} />
139 |       ) : (
140 |         ""
141 |       )}
142 |       <main
143 |         className={`${showSuccessMsg ? "w-full" : "w-full md:mt-5 md:w-[65%]"}`}
144 |       >
145 |         {showSuccessMsg ? (
146 |           <AnimatePresence mode="wait">
147 |             <SuccessMessage />
148 |           </AnimatePresence>
149 |         ) : (
150 |           <form
151 |             onSubmit={handleOnSubmit}
152 |             className="w-full flex flex-col justify-between h-full"
153 |           >
154 |             <AnimatePresence mode="wait">
155 |               {currentStepIndex === 0 && (
156 |                 <UserInfoForm
157 |                   key="step1"
158 |                   {...formData}
159 |                   updateForm={updateForm}
160 |                   errors={errors}
161 |                 />
162 |               )}
163 |               {currentStepIndex === 1 && (
164 |                 <PlanForm key="step2" {...formData} updateForm={updateForm} />
165 |               )}
166 |               {currentStepIndex === 2 && (
167 |                 <AddonsForm key="step3" {...formData} updateForm={updateForm} />
168 |               )}
169 |               {currentStepIndex === 3 && (
170 |                 <FinalStep key="step4" {...formData} goTo={goTo} />
171 |               )}
172 |             </AnimatePresence>
173 |             <div className="w-full items-center flex justify-between">
174 |               <div className="">
175 |                 <Button
176 |                   onClick={previousStep}
177 |                   type="button"
178 |                   variant="ghost"
179 |                   className={`${
180 |                     isFirstStep
181 |                       ? "invisible"
182 |                       : "visible p-0 text-neutral-200 hover:text-white"
183 |                   }`}
184 |                 >
185 |                   Go Back
186 |                 </Button>
187 |               </div>
188 |               <div className="flex items-center">
189 |                 <div className="relative after:pointer-events-none after:absolute after:inset-px after:rounded-[11px] after:shadow-highlight after:shadow-white/10 focus-within:after:shadow-[#77f6aa] after:transition">
190 |                   <Button
191 |                     type="submit"
192 |                     className="relative text-neutral-200 bg-neutral-900 border border-black/20 shadow-input shadow-black/10 rounded-xl hover:text-white"
193 |                   >
194 |                     {isLastStep ? "Confirm" : "Next Step"}
195 |                   </Button>
196 |                 </div>
197 |               </div>
198 |             </div>
199 |           </form>
200 |         )}
201 |       </main>
202 |     </div>
203 |   );
204 | }
205 | 


--------------------------------------------------------------------------------