[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "framer-motion": "12.23.22" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import CuisineSelector from "../cuisine-selector" export default function Page() { return } [V0_FILE]typescriptreact:file="cuisine-selector.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Check, ChevronRight, ChevronLeft, Edit2 } from "lucide-react" const experienceLevels = ["Novice", "Beginner", "Intermediate", "Knowledgeable", "Expert"] const defiUseCases = ["LP'ing", "Earning Yield", "Growing capital", "Rewards", "Vibes"] const cryptoAssets = [ "BTC", "ETH", "SOL", "BNB", "XRP", "ADA", "DOGE", "AVAX", "DOT", "MATIC", "LINK", "UNI", "ATOM", "LTC", "APT", "ARB", "OP", "NEAR", "STX", "IMX", ] const networks = [ "Ethereum", "Base", "Arbitrum", "Optimism", "Polygon", "Solana", "BSC", "Avalanche", "Plasma", "Unichain", ] const transitionProps = { type: "spring", stiffness: 500, damping: 30, mass: 0.5, } function ChipButton({ label, isSelected, onClick, }: { label: string isSelected: boolean onClick: () => void }) { return ( {label} {isSelected && (

)} ) } export default function CuisineSelector() { const [currentStep, setCurrentStep] = useState(1) const [selectedExperience, setSelectedExperience] = useState("") const [selectedUseCases, setSelectedUseCases] = useState([]) const [selectedAssets, setSelectedAssets] = useState([]) const [selectedNetworks, setSelectedNetworks] = useState([]) const totalSteps = 5 const toggleUseCase = (useCase: string) => { setSelectedUseCases((prev) => (prev.includes(useCase) ? prev.filter((u) => u !== useCase) : [...prev, useCase])) } const toggleAsset = (asset: string) => { setSelectedAssets((prev) => (prev.includes(asset) ? prev.filter((a) => a !== asset) : [...prev, asset])) } const toggleNetwork = (network: string) => { setSelectedNetworks((prev) => (prev.includes(network) ? prev.filter((n) => n !== network) : [...prev, network])) } const handleNext = () => { if (currentStep < totalSteps) { setCurrentStep(currentStep + 1) } } const handleBack = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) } } const handleSubmit = () => { console.log("Form submitted:", { experience: selectedExperience, useCases: selectedUseCases, assets: selectedAssets, networks: selectedNetworks, }) alert("Preferences saved!") } const canProceed = () => { switch (currentStep) { case 1: return selectedExperience !== "" case 2: return selectedUseCases.length > 0 case 3: return selectedAssets.length > 0 case 4: return selectedNetworks.length > 0 case 5: return true default: return false } } return (

Step {currentStep} of {totalSteps}

{currentStep === 1 && (

What's your experience in DeFi?

Select your experience level

{experienceLevels.map((level, index) => ( setSelectedExperience(level)} /> ))}

)} {currentStep === 2 && (

What do you use DeFi for?

Select all that apply

{defiUseCases.map((useCase) => ( toggleUseCase(useCase)} /> ))}

)} {currentStep === 3 && (

What assets do you hold?

Select all that apply

{cryptoAssets.map((asset) => ( toggleAsset(asset)} /> ))}

)} {currentStep === 4 && (

What networks do you use the most?

Select all that apply

{networks.map((network) => ( toggleNetwork(network)} /> ))}

)} {currentStep === 5 && (

Review Your Answers

Make sure everything looks good before submitting

DeFi Experience

{selectedExperience ? `${experienceLevels.indexOf(selectedExperience) + 1} - ${selectedExperience}` : "Not selected"}

DeFi Use Cases

{selectedUseCases.length > 0 ? ( selectedUseCases.map((useCase) => ( {useCase} )) ) : (

None selected

)}

Crypto Assets

{selectedAssets.length > 0 ? ( selectedAssets.map((asset) => ( {asset} )) ) : (

None selected

)}

Networks

{selectedNetworks.length > 0 ? ( selectedNetworks.map((network) => ( {network} )) ) : (

None selected

)}

{currentStep < totalSteps ? ( ) : ( )}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This