93:I[903690,["/chat-static/_next/static/immutable/chunks/1ute-309vfysb.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/02p_gimenxqg6.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/2xcwq527vfo_s.js","/chat-static/_next/static/immutable/chunks/3w5mstj4y6jmt.js","/chat-static/_next/static/immutable/chunks/44bzs6j8eepa8.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/0nkjq070py0o2.js","/chat-static/_next/static/immutable/chunks/0vc-wig_ads9a.js","/chat-static/_next/static/immutable/chunks/0lwi6g2baipnp.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/2lhijsntj02nh.js","/chat-static/_next/static/immutable/chunks/39xww5dkqchkn.js","/chat-static/_next/static/immutable/chunks/2rs5y36t1i2xl.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1ute-309vfysb.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/02p_gimenxqg6.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/2xcwq527vfo_s.js","/chat-static/_next/static/immutable/chunks/3w5mstj4y6jmt.js","/chat-static/_next/static/immutable/chunks/44bzs6j8eepa8.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/0nkjq070py0o2.js","/chat-static/_next/static/immutable/chunks/0vc-wig_ads9a.js","/chat-static/_next/static/immutable/chunks/0lwi6g2baipnp.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/2lhijsntj02nh.js","/chat-static/_next/static/immutable/chunks/39xww5dkqchkn.js","/chat-static/_next/static/immutable/chunks/2rs5y36t1i2xl.js"],"SWRDataProvider"] 95: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 && (

)} ) })}

) } 89:["$","$L93",null,{"chatId":"3g3Z4cT4Uxj","children":["$","$L94",null,{"data":{"@\"active-block\",\"3g3Z4cT4Uxj\",":{"id":"xj6wKCr8Ays","messageId":"j3PklJxmI3rDhMWR0YIh4sdMpfb2Bla1","source":"$95","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":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This