8f:I[903690,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"SWRDataProvider"] 91:T1607,[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": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/keyboard-button.tsx" isEdit="true" "use client" import type React from "react" import { cn } from "@/lib/utils" import { type ButtonHTMLAttributes, forwardRef } from "react" interface KeyboardButtonProps extends ButtonHTMLAttributes { children: React.ReactNode } const KeyboardButton = forwardRef(({ className, children, ...props }, ref) => { const playClickSound = () => { const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)() const oscillator = audioContext.createOscillator() const gainNode = audioContext.createGain() oscillator.connect(gainNode) gainNode.connect(audioContext.destination) oscillator.frequency.value = 800 oscillator.type = "sine" gainNode.gain.setValueAtTime(0.3, audioContext.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1) oscillator.start(audioContext.currentTime) oscillator.stop(audioContext.currentTime + 0.1) } const handleClick = (e: React.MouseEvent) => { playClickSound() props.onClick?.(e) } return (

) }) KeyboardButton.displayName = "KeyboardButton" export { KeyboardButton } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { KeyboardButton } from "@/components/keyboard-button" export default function Home() { return (

console.log("Back pressed")}>Back {/* Additional buttons can be added here */}

) }88:["$","$L8f",null,{"chatId":"o21FLw6baVX","children":["$","$L90",null,{"data":{"@\"active-block\",\"o21FLw6baVX\",":{"id":"b_3Wm8EVpHGp6","messageId":"dMhGe7YgKumUBFspwgscdOoEMTOpA9lK","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","project":"Code","taskNameActive":"Updating button design","taskNameComplete":"Button design updated"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"o21FLw6baVX\",":false},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This