[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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback } from "react" import { cn } from "@/lib/utils" const KEYBOARD_LAYOUT = { numbers: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], topRow: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], middleRow: ["A", "S", "D", "F", "G", "H", "J", "K", "L"], bottomRow: ["Z", "X", "C", "V", "B", "N", "M"], } interface KeyProps { children: React.ReactNode onClick?: () => void className?: string isPressed?: boolean size?: "sm" | "md" | "lg" | "xl" } function Key({ children, onClick, className, isPressed, size = "md" }: KeyProps) { const sizeClasses = { sm: "w-12 h-12 text-sm", md: "w-14 h-14 text-base", lg: "w-20 h-14 text-base", xl: "w-96 h-14 text-base", } return ( ) } export default function QwertyKeyboard() { const [text, setText] = useState("") const [pressedKeys, setPressedKeys] = useState>(new Set()) const [capsLock, setCapsLock] = useState(false) const handleKeyPress = useCallback( (key: string) => { if (key === "BACKSPACE") { setText((prev) => prev.slice(0, -1)) } else if (key === "SPACE") { setText((prev) => prev + " ") } else if (key === "CAPS") { setCapsLock((prev) => !prev) } else if (key === "ENTER") { setText((prev) => prev + "\n") } else { const finalKey = capsLock ? key.toUpperCase() : key.toLowerCase() setText((prev) => prev + finalKey) } }, [capsLock], ) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { e.preventDefault() const key = e.key.toUpperCase() setPressedKeys((prev) => new Set(prev).add(key)) if (key === "BACKSPACE") { handleKeyPress("BACKSPACE") } else if (key === " ") { handleKeyPress("SPACE") } else if (key === "CAPSLOCK") { handleKeyPress("CAPS") } else if (key === "ENTER") { handleKeyPress("ENTER") } else if (/^[A-Z0-9]$/.test(key)) { handleKeyPress(key) } } const handleKeyUp = (e: KeyboardEvent) => { const key = e.key.toUpperCase() setPressedKeys((prev) => { const newSet = new Set(prev) newSet.delete(key) return newSet }) } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) } }, [handleKeyPress]) return (

{/* Text Display */}

{/* Keyboard */}

{/* Number Row */}

{KEYBOARD_LAYOUT.numbers.map((key) => ( handleKeyPress(key)} isPressed={pressedKeys.has(key)}> {key} ))}

{/* Top Row (QWERTY) */}

{KEYBOARD_LAYOUT.topRow.map((key) => ( handleKeyPress(key)} isPressed={pressedKeys.has(key)}> {key} ))}

{/* Middle Row (ASDF) */}

handleKeyPress("CAPS")} isPressed={capsLock} size="lg" className={capsLock ? "bg-blue-600 hover:bg-blue-500" : ""} > caps {KEYBOARD_LAYOUT.middleRow.map((key) => ( handleKeyPress(key)} isPressed={pressedKeys.has(key)}> {key} ))} handleKeyPress("ENTER")} isPressed={pressedKeys.has("ENTER")} size="lg"> return

{/* Bottom Row (ZXCV) */}

handleKeyPress("SHIFT")} isPressed={pressedKeys.has("SHIFT")} size="lg"> shift {KEYBOARD_LAYOUT.bottomRow.map((key) => ( handleKeyPress(key)} isPressed={pressedKeys.has(key)}> {key} ))} handleKeyPress("BACKSPACE")} isPressed={pressedKeys.has("BACKSPACE")} size="lg"> delete

{/* Space Row */}

fn ^ ⌥ ⌘ handleKeyPress("SPACE")} isPressed={pressedKeys.has(" ")} size="xl"> {/* Empty spacebar */} ⌘ ⌥

{/* Instructions */}

) }

About

Tags

Share

More from fmerian

More Templates Like This

About

Tags

Share

About

Tags

Share

More from fmerian

More Templates Like This