Something went wrong. Try again.
My personal website, blog and portfolio ankddev.fyi
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<script lang="ts"> interface Command { title: string; keys: string[]; action: string; delay?: number; context?: string; }
interface Props { commands: Command[]; class?: string; }
const { commands, class: className }: Props = $props();
let selectedCommand = $state(0);
let currentCommand = $derived(commands[selectedCommand]);
function selectCommand(idx: number) { selectedCommand = idx; }
const information = $derived([ { title: 'Action', value: currentCommand.action }, { title: 'Context', value: currentCommand.context || 'Everywhere' } ]);</script>
<div class={[ 'grid lg:grid-cols-2 gap-8 py-4 px-3 bg-inherit border-2 w-full border-dashed border-driftwood-700/40 rounded-md', className ]}> <div class="flex flex-col gap-2"> {#each commands as command, idx (command.title)} <button class={[ 'w-full text-left flex flex-col gap-1 p-2 rounded-md border transition-all', selectedCommand === idx ? 'border-driftwood-600' : 'border-driftwood-700/30 hover:border-driftwood-500' ]} onclick={() => selectCommand(idx)} > <div class="font-medium text-sm">{command.title}</div> </button> {/each} </div>
<div class="flex flex-col gap-2"> <div class="rounded-md"> <div class="flex flex-wrap gap-2"> {#each currentCommand.keys as key, index (currentCommand.title + '-key-' + index)} <code>{key}</code> {/each} </div> </div>
<div class="flex border border-driftwood-700 rounded-md p-2 flex-col gap-.5"> {#each information as info (info.title)} <div class="text-sm"> <span class="font-semibold">{info.title}</span>: {info.value} </div> {/each} </div> </div></div>