valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(figlet): update default text and remove search keyboard hint

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-23 09:46:35 +01:00
parent 6fbcdd3674
commit 90b045f349
7 changed files with 7 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(app)/figlet/page.tsx
View File

@@ -9,12 +9,6 @@ export default function FigletPage() {
<p className="text-muted-foreground"> <p className="text-muted-foreground">
ASCII Art Text Generator with 373 Fonts ASCII Art Text Generator with 373 Fonts
</p> </p>
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
<kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
<span>Focus Search</span>
<kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
<span>Clear Search</span>
</div>
</div> </div>
<FigletConverter /> <FigletConverter />
</div> </div>

8
app/(app)/units/page.tsx
View File

@@ -9,14 +9,6 @@ export default function UnitsPage() {
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Smart unit converter with 187 units across 23 categories Smart unit converter with 187 units across 23 categories
</p> </p>
<div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
<kbd className="px-2 py-1 bg-muted rounded border">/</kbd>
<span>Focus Search</span>
<kbd className="px-2 py-1 bg-muted rounded border ml-3">Ctrl+K</kbd>
<span>Command Palette</span>
<kbd className="px-2 py-1 bg-muted rounded border ml-3">ESC</kbd>
<span>Close Dialogs</span>
</div>
</div> </div>
<MainConverter /> <MainConverter />
</div> </div>

2
components/figlet/FigletConverter.tsx
View File

@@ -13,7 +13,7 @@ import { toast } from 'sonner';
import type { FigletFont } from '@/types/figlet'; import type { FigletFont } from '@/types/figlet';
export function FigletConverter() { export function FigletConverter() {
const [text, setText] = React.useState('Figlet UI'); const [text, setText] = React.useState('Figlet');
const [selectedFont, setSelectedFont] = React.useState('Standard'); const [selectedFont, setSelectedFont] = React.useState('Standard');
const [asciiArt, setAsciiArt] = React.useState(''); const [asciiArt, setAsciiArt] = React.useState('');
const [fonts, setFonts] = React.useState<FigletFont[]>([]); const [fonts, setFonts] = React.useState<FigletFont[]>([]);

28
components/figlet/FontSelector.tsx
View File

@@ -40,32 +40,6 @@ export function FontSelector({
setRecentFonts(getRecentFonts()); setRecentFonts(getRecentFonts());
}, []); }, []);
// Keyboard shortcuts
React.useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// "/" to focus search
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
const activeElement = document.activeElement;
if (
activeElement?.tagName !== 'INPUT' &&
activeElement?.tagName !== 'TEXTAREA'
) {
e.preventDefault();
searchInputRef.current?.focus();
}
}
// "Esc" to clear search
if (e.key === 'Escape' && searchQuery) {
e.preventDefault();
setSearchQuery('');
searchInputRef.current?.blur();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [searchQuery]);
// Initialize Fuse.js for fuzzy search // Initialize Fuse.js for fuzzy search
const fuse = React.useMemo(() => { const fuse = React.useMemo(() => {
return new Fuse(fonts, { return new Fuse(fonts, {
@@ -169,7 +143,7 @@ export function FontSelector({
<Input <Input
ref={searchInputRef} ref={searchInputRef}
type="text" type="text"
placeholder="Search fonts... (Press / to focus)" placeholder="Search fonts..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 pr-9" className="pl-9 pr-9"

26
components/units/converter/SearchUnits.tsx
View File

@@ -97,30 +97,6 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, []); }, []);
// Keyboard shortcut: / to focus search
useEffect(() => {
function handleKeyDown(e: KeyboardEvent) {
if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
const activeElement = document.activeElement;
if (
activeElement?.tagName !== 'INPUT' &&
activeElement?.tagName !== 'TEXTAREA'
) {
e.preventDefault();
inputRef.current?.focus();
}
}
if (e.key === 'Escape') {
setIsOpen(false);
inputRef.current?.blur();
}
}
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
const handleSelectUnit = (unit: string, measure: Measure) => { const handleSelectUnit = (unit: string, measure: Measure) => {
onSelectUnit(unit, measure); onSelectUnit(unit, measure);
setQuery(''); setQuery('');
@@ -140,7 +116,7 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
<Input <Input
ref={inputRef} ref={inputRef}
type="text" type="text"
placeholder="Search units (press / to focus)" placeholder="Search units..."
value={query} value={query}
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
onFocus={() => query && setIsOpen(true)} onFocus={() => query && setIsOpen(true)}

65
components/units/ui/CommandPalette.tsx
View File

@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useState, useEffect, useCallback, useRef } from 'react'; import { useState, useEffect, useMemo, useRef } from 'react';
import { Command, Hash, Star, Moon, Sun } from 'lucide-react'; import { Command, Hash, Star, Moon, Sun } from 'lucide-react';
import { useTheme } from '@/components/providers/ThemeProvider'; import { useTheme } from '@/components/providers/ThemeProvider';
import { import {
@@ -81,23 +81,6 @@ export default function CommandPalette({
) )
: allCommands; : allCommands;
// Keyboard shortcut to open
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
e.preventDefault();
setIsOpen(prev => !prev);
}
if (e.key === 'Escape') {
setIsOpen(false);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
// Focus input when opened // Focus input when opened
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
@@ -107,33 +90,6 @@ export default function CommandPalette({
} }
}, [isOpen]); }, [isOpen]);
// Keyboard navigation
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelectedIndex(prev =>
prev < filteredCommands.length - 1 ? prev + 1 : prev
);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelectedIndex(prev => (prev > 0 ? prev - 1 : prev));
} else if (e.key === 'Enter') {
e.preventDefault();
const command = filteredCommands[selectedIndex];
if (command) {
command.action();
setIsOpen(false);
}
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [isOpen, selectedIndex, filteredCommands]);
// Reset selected index when query changes // Reset selected index when query changes
useEffect(() => { useEffect(() => {
setSelectedIndex(0); setSelectedIndex(0);
@@ -163,9 +119,6 @@ export default function CommandPalette({
onChange={e => setQuery(e.target.value)} onChange={e => setQuery(e.target.value)}
className="flex-1 bg-transparent py-4 px-4 outline-none placeholder:text-muted-foreground" className="flex-1 bg-transparent py-4 px-4 outline-none placeholder:text-muted-foreground"
/> />
<kbd className="hidden sm:inline-block px-2 py-1 text-xs bg-muted rounded">
ESC
</kbd>
</div> </div>
{/* Commands List */} {/* Commands List */}
@@ -210,19 +163,9 @@ export default function CommandPalette({
{/* Footer */} {/* Footer */}
<div className="border-t px-4 py-2 text-xs text-muted-foreground flex items-center gap-4"> <div className="border-t px-4 py-2 text-xs text-muted-foreground flex items-center gap-4">
<div className="flex items-center gap-1"> <span>Navigate with arrows</span>
<kbd className="px-1.5 py-0.5 bg-muted rounded">↑</kbd> <span>Select with Enter</span>
<kbd className="px-1.5 py-0.5 bg-muted rounded">↓</kbd> <span>Close with click outside</span>
<span>Navigate</span>
</div>
<div className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-muted rounded">Enter</kbd>
<span>Select</span>
</div>
<div className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd>
<span>Close</span>
</div>
</div> </div>
</div> </div>
</div> </div>

34
lib/figlet/hooks/useKeyboardShortcuts.ts
View File

@@ -1,34 +0,0 @@
'use client';
import { useEffect } from 'react';
export interface KeyboardShortcut {
key: string;
ctrlKey?: boolean;
metaKey?: boolean;
shiftKey?: boolean;
handler: () => void;
description: string;
}
export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
for (const shortcut of shortcuts) {
const keyMatches = event.key.toLowerCase() === shortcut.key.toLowerCase();
const ctrlMatches = shortcut.ctrlKey ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey;
const metaMatches = shortcut.metaKey ? event.metaKey : true;
const shiftMatches = shortcut.shiftKey ? event.shiftKey : !event.shiftKey;
if (keyMatches && ctrlMatches && shiftMatches) {
event.preventDefault();
shortcut.handler();
break;
}
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [shortcuts]);
}