9b:I[903690,["/chat-static/_next/static/immutable/chunks/2u5gitmblwzhv.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"ExplicitChatIdProvider"] 9c:I[838238,["/chat-static/_next/static/immutable/chunks/2u5gitmblwzhv.js","/chat-static/_next/static/immutable/chunks/2_5m3u4145ss0.js","/chat-static/_next/static/immutable/chunks/06fhmb9zv6uo6.js","/chat-static/_next/static/immutable/chunks/09xvrt12-2rl0.js","/chat-static/_next/static/immutable/chunks/1xgcq8c4f_8fq.js","/chat-static/_next/static/immutable/chunks/1hvqmnitid4xe.js","/chat-static/_next/static/immutable/chunks/3rr5l9ro89g8d.js","/chat-static/_next/static/immutable/chunks/3hsdob8hgrg37.js","/chat-static/_next/static/immutable/chunks/1pxmbozdcc9y7.js","/chat-static/_next/static/immutable/chunks/38yaqwe2ys7o6.js","/chat-static/_next/static/immutable/chunks/1yui69gkjunmr.js","/chat-static/_next/static/immutable/chunks/3em_xe-n6-qt7.js","/chat-static/_next/static/immutable/chunks/09-0bd882xikd.js","/chat-static/_next/static/immutable/chunks/3u4hk7y5fepx4.js","/chat-static/_next/static/immutable/chunks/3fps7vfyqxiw6.js","/chat-static/_next/static/immutable/chunks/0mvgw83jdcr8_.js","/chat-static/_next/static/immutable/chunks/3z_28wzzktgw2.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/363ke95s1ko6o.js","/chat-static/_next/static/immutable/chunks/416tmudpeffkz.js","/chat-static/_next/static/immutable/chunks/2ild4_8nnn7ys.js","/chat-static/_next/static/immutable/chunks/28kbmv3dy8txv.js","/chat-static/_next/static/immutable/chunks/22efgyn_v5u19.js","/chat-static/_next/static/immutable/chunks/0jb6ous0375oa.js","/chat-static/_next/static/immutable/chunks/1wjcpzg3nzemw.js","/chat-static/_next/static/immutable/chunks/1knar4f0vp2xn.js","/chat-static/_next/static/immutable/chunks/22609g7ehklky.js","/chat-static/_next/static/immutable/chunks/23g_9unic-14a.js","/chat-static/_next/static/immutable/chunks/3d94pkoo4if9r.js","/chat-static/_next/static/immutable/chunks/1h2xxp9cr5c5m.js","/chat-static/_next/static/immutable/chunks/0kwy-rkr6sgzi.js","/chat-static/_next/static/immutable/chunks/2irdqvyz3s8-x.js","/chat-static/_next/static/immutable/chunks/2e80bj61ftled.js","/chat-static/_next/static/immutable/chunks/11q-tf8omz4oz.js","/chat-static/_next/static/immutable/chunks/2l9h4spirx5z4.js","/chat-static/_next/static/immutable/chunks/3239rz_4jff-u.js","/chat-static/_next/static/immutable/chunks/3435domgao21b.js","/chat-static/_next/static/immutable/chunks/37xw6m9iyvjhu.js","/chat-static/_next/static/immutable/chunks/3ra8b37ai-3dk.js"],"SWRDataProvider"] 9d:T1082,[V0_FILE]typescriptreact:file="cuisine-selector.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Check } from 'lucide-react' const cuisines = [ "Mexican", "Italian", "Chinese", "Japanese", "Indian", "Greek", "French", "Spanish", "Turkish", "Lebanese", "Vietnamese", "Korean", "Argentinian", "Peruvian", "Ethiopian", "Nigerian", "German", "British", "Irish", "Swedish", "Danish", "Polish", "Hungarian", "Portuguese", ] const transitionProps = { type: "spring", stiffness: 500, damping: 30, mass: 0.5, } export default function CuisineSelector() { const [selected, setSelected] = useState([]) const toggleCuisine = (cuisine: string) => { setSelected((prev) => prev.includes(cuisine) ? prev.filter((c) => c !== cuisine) : [...prev, cuisine] ) } return (

What are your favorite cuisines?

{cuisines.map((cuisine) => { const isSelected = selected.includes(cuisine) return ( toggleCuisine(cuisine)} layout initial={false} animate={{ backgroundColor: isSelected ? "#2a1711" : "rgba(39, 39, 42, 0.5)", }} whileHover={{ backgroundColor: isSelected ? "#2a1711" : "rgba(39, 39, 42, 0.8)", }} whileTap={{ backgroundColor: isSelected ? "#1f1209" : "rgba(39, 39, 42, 0.9)", }} transition={{ type: "spring", stiffness: 500, damping: 30, mass: 0.5, backgroundColor: { duration: 0.1 }, }} className={` inline-flex items-center px-4 py-2 rounded-full text-base font-medium whitespace-nowrap overflow-hidden ring-1 ring-inset ${isSelected ? "text-[#ff9066] ring-[hsla(0,0%,100%,0.12)]" : "text-zinc-400 ring-[hsla(0,0%,100%,0.06)]"} `} > {cuisine} {isSelected && (

)} ) })}

) } 91:["$","$L9b",null,{"chatId":"3g3Z4cT4Uxj","children":["$","$L9c",null,{"data":{"@\"active-block\",\"3g3Z4cT4Uxj\",":{"id":"xj6wKCr8Ays","messageId":"j3PklJxmI3rDhMWR0YIh4sdMpfb2Bla1","source":"$9d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"cuisine-selector","type":"code-project","project":"cuisine-selector"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"3g3Z4cT4Uxj\",":false},"children":"$L9e"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This