refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx

@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { Settings2, Keyboard } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface KeyboardShortcutsSectionProps {
+  onOpenKeyboardMap: () => void;
+}
+
+export function KeyboardShortcutsSection({
+  onOpenKeyboardMap,
+}: KeyboardShortcutsSectionProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl overflow-hidden",
+        "border border-border/50",
+        "bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl",
+        "shadow-sm shadow-black/5"
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Settings2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Keyboard Shortcuts
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize keyboard shortcuts for navigation and actions using the
+          visual keyboard map.
+        </p>
+      </div>
+      <div className="p-6">
+        {/* Centered message directing to keyboard map */}
+        <div className="flex flex-col items-center justify-center py-12 text-center space-y-5">
+          <div className="relative">
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-500/10 to-brand-600/5 flex items-center justify-center border border-brand-500/20">
+              <Keyboard className="w-10 h-10 text-brand-500/60" />
+            </div>
+            <div className="absolute inset-0 bg-brand-500/10 blur-2xl rounded-full -z-10" />
+          </div>
+          <div className="space-y-2 max-w-md">
+            <h3 className="text-lg font-semibold text-foreground">
+              Use the Visual Keyboard Map
+            </h3>
+            <p className="text-sm text-muted-foreground/80">
+              Click the button below to customize your keyboard shortcuts. The visual
+              interface shows all available keys and lets you easily edit shortcuts.
+            </p>
+          </div>
+          <Button
+            variant="default"
+            size="lg"
+            onClick={onOpenKeyboardMap}
+            className={cn(
+              "gap-2.5 mt-2 h-11 px-6",
+              "bg-gradient-to-r from-brand-500 to-brand-600",
+              "hover:from-brand-600 hover:to-brand-600",
+              "text-white font-medium border-0",
+              "shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25",
+              "transition-all duration-200 ease-out",
+              "hover:scale-[1.02] active:scale-[0.98]"
+            )}
+          >
+            <Keyboard className="w-5 h-5" />
+            Open Keyboard Map
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}