style: unify keyboard shortcut hints across tools using Pastel style

- Add shortcut hints below tool descriptions in Figlet and Units pages
- Revert experimental button-based shortcut layout in Units
- Remove redundant shortcut hints from Units footer
- Ensure consistent kbd tag styling across the application
This commit is contained in:
2026-02-23 08:27:26 +01:00
parent 7806bcbede
commit 2160b9aaa0
3 changed files with 14 additions and 18 deletions

View File

@@ -9,6 +9,12 @@ 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>

View File

@@ -9,6 +9,14 @@ 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>

View File

@@ -65,24 +65,6 @@ export default function Footer() {
</a> </a>
</li> </li>
</ul> </ul>
{/* Keyboard Shortcuts */}
<div className="mt-4">
<h4 className="font-semibold text-sm mb-2">Keyboard Shortcuts</h4>
<ul className="space-y-1 text-xs text-muted-foreground">
<li>
<kbd className="px-1.5 py-0.5 bg-muted rounded">/</kbd> Focus search
</li>
<li>
<kbd className="px-1.5 py-0.5 bg-muted rounded">Ctrl</kbd>
{' + '}
<kbd className="px-1.5 py-0.5 bg-muted rounded">K</kbd> Command palette
</li>
<li>
<kbd className="px-1.5 py-0.5 bg-muted rounded">ESC</kbd> Close dialogs
</li>
</ul>
</div>
</div> </div>
</div> </div>