Keyboard

1"use client";
2import type React from "react";
3import { useEffect, useState } from "react";
4import {
5  Command,
6  ArrowUp,
7  ArrowDown,
8  ArrowLeft,
9  ArrowRight,
10  ChevronsUp,
11  Menu,
12} from "lucide-react";
13 
14interface KeyObject {
15  label?: string;
16  code?: string;
17  size: number;
18  spacer?: boolean;
19  type?: string;
20  icon?: string;
21}
22interface KeyboardRow {
23  function?: boolean;
24  keys: KeyObject[];
25  nav?: KeyObject[];
26}
27interface InteractiveKeyboardProps {
28  layout?: "standard" | "compact";
29  showFunctionKeys?: boolean;
30  showNavigationCluster?: boolean;
31  activeKeys?: string[];
32  activeKeyGlowColor?: string;
33  activeKeyGlowIntensity?: number;
34  theme?: "cyberpunk" | "minimal" | "retro" | "mechanical" | "neon" | "pastel";
35  keyColor?: string;
36  keyTextColor?: string;
37  accentColor?: string;
38  keyPressedColor?: string;
39  keyPressAnimationDuration?: number;
40  onKeyPress?: (code: string, key?: string) => void;
41  onKeyRelease?: (code: string, key?: string) => void;
42  className?: string;
43  allowPhysicalKeyboard?: boolean;
44  perspective?: number;
45  rotateX?: number;
46  [key: string]: unknown;
47}
48 
49interface KeyStyleProps {
50  background: string;
51  color: string;
52  boxShadow: string;
53  textShadow?: string;
54  border: string;
55  fontFamily?: string;
56  fontWeight?: string | number;
57  fontSize?: string;
58  borderRadius?: string;
59  letterSpacing?: string;
60  transform?: string;
61  transition?: string;
62  height?: string;
63  marginBottom?: string;
64  padding?: string;
65  width?: string;
66}
67 
68interface ThemeStyles {
69  keyboard: {
70    background: string;
71    boxShadow: string;
72    border: string;
73    borderRadius?: string;
74    marginBottom?: string;
75    padding?: string;
76    width?: string;
77  };
78  key: KeyStyleProps;
79  keyPressed: KeyStyleProps;
80  keyHover: KeyStyleProps;
81  keyActive?: KeyStyleProps;
82  specialKey?: KeyStyleProps;
83  functionKey?: KeyStyleProps;
84  modifierKey?: KeyStyleProps;
85  spaceKey?: KeyStyleProps;
86  arrowKey?: KeyStyleProps;
87}
88 
89const InteractiveKeyboard: React.FC<InteractiveKeyboardProps> = ({
90  layout = "standard",
91  showFunctionKeys = true,
92  showNavigationCluster = true,
93  activeKeys = [],
94  activeKeyGlowColor = "#6366f1",
95  activeKeyGlowIntensity = 0.8,
96  theme = "cyberpunk",
97  keyColor = "#2a2a2a",
98  keyTextColor = "#ffffff",
99  accentColor = "#6366f1",
100  keyPressedColor = "#333333",
101  keyPressAnimationDuration = 150,
102  onKeyPress = () => {},
103  onKeyRelease = () => {},
104  className = "",
105  allowPhysicalKeyboard = true,
106  perspective = 1000,
107  rotateX = 10,
108// … truncated