93:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/38t7_sa142ds_.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2w039ilfkalg6.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/38t7_sa142ds_.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/2w039ilfkalg6.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0psdvt7apvzt9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_A3s3iYUtrv7dQwCWskMVmnE4GSDc"],"SWRDataProvider"] 95:T2f36,[V0_FILE]xml:file="public/one.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/one-rgbFbF5CoSXJEtPo35UtCr4mzEFlZn.svg" isMerged="true" [V0_FILE]xml:file="public/two.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/two-O5mjmYdw87ldNo7jYjjQJTvVURViFO.svg" isMerged="true" [V0_FILE]xml:file="public/three.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/three-ftzoGwzi3M7PHU1Ug0siGUTctd0hCW.svg" isMerged="true" [V0_FILE]xml:file="public/four.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/four-GQHPY0NARES08Mc8ulo2UeaatMJtgU.svg" isMerged="true" [V0_FILE]xml:file="public/five.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/five-Xux5rPbgJQlkTiRGdl1PfDPwwqTQYy.svg" isMerged="true" [V0_FILE]png:file="public/tabby-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tabby-cat-JrIrhQj1POyJ4Cv6z8qYHoUlFpfmRT.png" isMerged="true" [V0_FILE]png:file="public/cat-hat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cat-hat-v5PFqTn9hSwfxuwRKLm41Y7hvMbjb8.png" isMerged="true" [V0_FILE]png:file="public/cat-box.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cat-box-Tn3f9RhCLcSdzuJvpn0jYwCkG2fi9p.png" isMerged="true" [V0_FILE]png:file="public/cracker-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/cracker-cat-dK6lQNtPjxlHHTKAk3HZHZSN0XNc0Q.png" isMerged="true" [V0_FILE]png:file="public/galaxy-cat.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/galaxy-cat-BIGeojg5WNdPYBLeqJtVBbI5v4sE7F.png" isMerged="true" [V0_FILE]typescriptreact:file="components/options-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" interface OptionData { id: number background: string icon: string main: string sub: string defaultColor: string } const OptionsSelector: React.FC = () => { const [activeOption, setActiveOption] = useState(0) const optionsData: OptionData[] = [ { id: 0, background: "/tabby-cat.png", icon: "fas fa-glasses", main: "cool cat", sub: "living the sunglasses life", defaultColor: "#ED5565", }, { id: 1, background: "/cat-hat.png", icon: "fas fa-sun", main: "poolside vibes", sub: "summer hat game strong", defaultColor: "#FC6E51", }, { id: 2, background: "/cat-box.png", icon: "fas fa-box", main: "box explorer", sub: "if i fits, i sits", defaultColor: "#FFCE54", }, { id: 3, background: "/cracker-cat.png", icon: "fas fa-cookie-bite", main: "snack time", sub: "nom nom nom", defaultColor: "#2ECC71", }, { id: 4, background: "/galaxy-cat.png", icon: "fas fa-star", main: "cosmic kitty", sub: "exploring the universe", defaultColor: "#5D9CEC", }, ] const handleOptionClick = (optionId: number) => { setActiveOption(optionId) } const styles = ` body { margin: 0; padding: 0; } .options-container { display: flex; flex-direction: row; justify-content: center; align-items: center; overflow: hidden; height: 100vh; font-family: 'Roboto', sans-serif; transition: 0.25s; background: #f5f5f5; } .options-wrapper { display: flex; flex-direction: row; align-items: stretch; overflow: hidden; min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px; } .option-item { position: relative; overflow: hidden; min-width: 60px; margin: 10px; background-size: auto 120%; background-position: center; cursor: pointer; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); border-radius: 30px; flex-grow: 1; } .option-item.active { flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%; } .option-item.active .option-shadow { box-shadow: none; } .option-item:not(.active) .option-shadow { bottom: -40px; box-shadow: none; } .option-item.active .option-label { bottom: 20px; left: 20px; } .option-item:not(.active) .option-label { bottom: 10px; left: 10px; } .option-item.active .option-info > div { left: 0px; opacity: 1; } .option-item:not(.active) .option-info > div { left: 20px; opacity: 0; } .option-shadow { position: absolute; bottom: 0px; left: 0px; right: 0px; height: 120px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .option-label { display: flex; position: absolute; right: 0px; height: 40px; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .option-icon { display: flex; flex-direction: row; justify-content: center; align-items: center; min-width: 40px; max-width: 40px; height: 40px; border-radius: 100%; background-color: white; } .option-info { display: flex; flex-direction: column; justify-content: center; margin-left: 10px; color: white; white-space: pre; } .option-info > div { position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; } .option-main { font-weight: bold; font-size: 1.2rem; } .option-sub { transition-delay: 0.1s; } .inactive-options { display: none; } /* Tablet and Mobile Responsive Styles */ @media screen and (max-width: 1024px) { .options-container { padding: 20px; height: auto; min-height: 100vh; flex-direction: column; } .options-wrapper { display: flex; flex-direction: column; min-width: auto; max-width: none; width: 100%; height: auto; align-items: center; } /* Active option takes full width and proper height */ .option-item.active { display: block; width: 100%; max-width: 500px; height: 300px; margin: 0 0 30px 0; border-radius: 25px; background-size: cover; flex-grow: 0; transform: none; } /* Ensure content is in bottom left */ .option-item.active .option-label { bottom: 25px; left: 25px; right: auto; height: 40px; } .option-item.active .option-info > div { left: 0px; opacity: 1; } /* Hide inactive options from normal flow and show as icons */ .option-item:not(.active) { display: none; } /* Show inactive options as circular icons */ .inactive-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; width: 100%; max-width: 500px; } .inactive-option { width: 70px; height: 70px; border-radius: 50%; background-size: cover; background-position: center; position: relative; cursor: pointer; transition: transform 0.3s ease; overflow: hidden; } .inactive-option::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); border-radius: 50%; } .inactive-option-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 1; } } /* Mobile specific adjustments */ @media screen and (max-width: 768px) { .option-item.active { height: 250px; border-radius: 20px; max-width: 400px; } .option-item.active .option-label { bottom: 20px; left: 20px; } .inactive-option { width: 60px; height: 60px; } .inactive-option-inner { width: 35px; height: 35px; font-size: 16px; } } /* Small mobile adjustments */ @media screen and (max-width: 480px) { .option-item.active { height: 220px; border-radius: 18px; } .option-item.active .option-label { bottom: 18px; left: 18px; } .option-main { font-size: 1.1rem; } .inactive-option { width: 50px; height: 50px; } .inactive-option-inner { width: 30px; height: 30px; font-size: 14px; } } ` return ( <>

About

Tags

Share

About

Tags

Share

More from nocheerleader

More Templates Like This