83:I[903690,["/chat-static/_next/static/immutable/chunks/1qi6shb-t5wtt.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/2-uv90qpo53a-.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/1qi6shb-t5wtt.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/2_sbgebowt27c.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/15m08g0r1sz7n.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/3nlorw7q2vubs.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/18b4wo94ces2k.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3-rpxpeg4t4b-.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/2-uv90qpo53a-.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3tdrqbs7rcxs4.js","/chat-static/_next/static/immutable/chunks/10-4zakcw-uv1.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/0gt8okoh2nixy.js","/chat-static/_next/static/immutable/chunks/1p6oka4hjrcyn.js","/chat-static/_next/static/immutable/chunks/2f-ssp-khch03.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3u6ndbp3pwyc-.js"],"SWRDataProvider"] 85:T3c00,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import SoundPanel from "@/components/sound-controls" export default function Home() { return (

) } [V0_FILE]png:file="public/slack-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slack-icon-l1HnjFFfPINgR3zVas7AIkTbKuLN7V.png" isMerged="true" [V0_FILE]png:file="public/zoom-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/zoom-icon-YLABLfSmgX1gG9L8P8vvZ5eDaqBcbf.png" isMerged="true" [V0_FILE]jpg:file="public/apple-music-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/apple-music-icon-t1v8ayBMvVoAxKNbfiokbKv8ws5lMR.jpg" isMerged="true" [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/sound-controls.tsx" isEdit="true" isQuickEdit="true" "use client" import * as React from "react" import { Volume2, Mic, Settings2, ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" import { Switch } from "@/components/ui/switch" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" // --- Horizontal Volume Slider with Icon --- interface VolumeSliderProps { icon: React.ElementType label: string value: number onChange: (value: number) => void showMeter?: boolean className?: string } export function VolumeSlider({ icon: Icon, label, value, onChange, showMeter = true, className }: VolumeSliderProps) { // The handle is 28px, track height is 24px. Centered handle needs 14px from edges. const handleSize = 28 const trackHeight = 24 const padding = handleSize / 2 // 14px return (

{label && {label}}

{/* Active track */}

onChange(Number.parseInt(e.target.value))} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20" />

{value}% {showMeter && (

0 ? "bg-[#34c759]" : "bg-[#333]")} />

40 ? "bg-[#34c759]" : "bg-[#333]")} />

70 ? "bg-[#ffcc00]" : "bg-[#333]")} />

90 ? "bg-[#ff3b30]" : "bg-[#333]")} />

)}

) } // --- Equalizer Band Slider with Embedded VU Meter Track --- interface EQBandProps { frequency: string value: number onChange: (value: number) => void } export function EQBand({ frequency, value, onChange }: EQBandProps) { // Value maps to -12dB to +12dB, UI range 0-100 const dotCount = 14 return (

{/* Dot Track */}

{Array.from({ length: dotCount }).map((_, i) => { const index = dotCount - 1 - i // reverse order for flex-col const isActive = (value / 100) * (dotCount - 1) >= index let color = "bg-[#2a2a2a]" if (isActive) { if (index < 8) color = "bg-[#34c759] shadow-[0_0_5px_rgba(52,199,89,0.5)]" else if (index < 11) color = "bg-[#ffcc00] shadow-[0_0_5px_rgba(255,204,0,0.5)]" else if (index < 13) color = "bg-[#ff9500] shadow-[0_0_5px_rgba(255,149,0,0.5)]" else color = "bg-[#ff3b30] shadow-[0_0_5px_rgba(255,59,48,0.5)]" } return

})}

{/* Real Input */} onChange(Number.parseInt(e.target.value))} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer [appearance:slider-vertical] rotate-180" style={{ writingMode: "vertical-lr" as any }} /> {/* Thumb */}

{frequency.split(" ")[0]}
{frequency.split(" ")[1]}

) } // --- Main Sound Panel --- export default function SoundPanel() { const [outputVol, setOutputVol] = React.useState(100) const [inputVol, setInputVol] = React.useState(0) const [slackVol, setSlackVol] = React.useState(100) const [zoomVol, setZoomVol] = React.useState(52) const [musicVol, setMusicVol] = React.useState(75) const [eqEnabled, setEqEnabled] = React.useState(true) const [eqBands, setEqBands] = React.useState([70, 60, 50, 40, 35, 40, 50, 65, 75, 85]) const frequencies = [ "30 Hz", "60 Hz", "120 Hz", "200 Hz", "400 Hz", "800 Hz", "1.6k Hz", "3.2k Hz", "6.4k Hz", "12.8k Hz", ] return (

Sound

System

Active applications

Slack

Zoom

Music

{/* Equalizer Section */}

Equalizer (10 Band)

Preset Low & High boost Flat Bass Boost Electronic

{eqBands.map((val, i) => ( { const next = [...eqBands] next[i] = newVal setEqBands(next) }} /> ))}

) }7c:["$","$L83",null,{"chatId":"qN1DJD0vldA","children":["$","$L84",null,{"data":{"@\"active-block\",\"qN1DJD0vldA\",":{"id":"b_c9hDfsBgkka","messageId":"YPH0RXXQWCTLvjVzUOYuPEesueyacaAz","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Fixing preset dropdown width and colors","taskNameComplete":"Fixed preset dropdown width and colors"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"qN1DJD0vldA\",":false,"":null},"children":"$L86"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This