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

2
components/figlet/FigletConverter.tsx
View File

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

28
components/figlet/FontSelector.tsx
View File

@@ -40,32 +40,6 @@ export function FontSelector({
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
const fuse = React.useMemo(() => {
return new Fuse(fonts, {
@@ -169,7 +143,7 @@ export function FontSelector({
<Input
ref={searchInputRef}
type="text"
placeholder="Search fonts... (Press / to focus)"
placeholder="Search fonts..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
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);
}, []);
// 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) => {
onSelectUnit(unit, measure);
setQuery('');
@@ -140,7 +116,7 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
<Input
ref={inputRef}
type="text"
placeholder="Search units (press / to focus)"
placeholder="Search units..."
value={query}
onChange={(e) => setQuery(e.target.value)}
onFocus={() => query && setIsOpen(true)}

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

@@ -1,6 +1,6 @@
'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 { useTheme } from '@/components/providers/ThemeProvider';
import {
@@ -81,23 +81,6 @@ export default function CommandPalette({
)
: 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
useEffect(() => {
if (isOpen) {
@@ -107,33 +90,6 @@ export default function CommandPalette({
}
}, [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
useEffect(() => {
setSelectedIndex(0);
@@ -163,9 +119,6 @@ export default function CommandPalette({
onChange={e => setQuery(e.target.value)}
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>
{/* Commands List */}
@@ -210,19 +163,9 @@ export default function CommandPalette({
{/* Footer */}
<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">
<kbd className="px-1.5 py-0.5 bg-muted rounded">↑</kbd>
<kbd className="px-1.5 py-0.5 bg-muted rounded">↓</kbd>
<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>
<span>Navigate with arrows</span>
<span>Select with Enter</span>
<span>Close with click outside</span>
</div>
</div>
</div>