96:I[903690,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/1ich0nry3h0hs.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/0s56f80ap3yos.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/0411bdxfbeniw.js","/chat-static/_next/static/immutable/chunks/24g-e1plqimjd.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/15te13l_0aokw.js","/chat-static/_next/static/immutable/chunks/3mqqjk7btl-q3.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/13swkeoj_7gd7.js","/chat-static/_next/static/immutable/chunks/0ox1w_skv5i01.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/03ggsewfdnt13.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/1h7ypp813k57d.js","/chat-static/_next/static/immutable/chunks/02_tyxb_2ub3k.js","/chat-static/_next/static/immutable/chunks/1ich0nry3h0hs.js","/chat-static/_next/static/immutable/chunks/3xbcfm8ji-xnl.js","/chat-static/_next/static/immutable/chunks/2gu0aetgviqpj.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2j9ejspyv5gjj.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/44bhef7a7u-7e.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1kvzodmjemrnt.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/1_0--72vfkr3d.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/2kosfxqe1lmj7.js","/chat-static/_next/static/immutable/chunks/0s56f80ap3yos.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/2ddpysx1qz1j9.js","/chat-static/_next/static/immutable/chunks/0kld-wnfh2dtn.js","/chat-static/_next/static/immutable/chunks/2hlt206nuvb_q.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/1y-s_5v3gpgrs.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/1wdjjp6taywpy.js"],"SWRDataProvider"] 98: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